Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
easy
commit
085a2d711a
|
|
@ -17,12 +17,18 @@ module.exports = {
|
|||
'perf', // 性能优化
|
||||
]
|
||||
],
|
||||
'type-case': [0],
|
||||
'type-empty': [0],
|
||||
'scope-empty': [0],
|
||||
'scope-case': [0],
|
||||
'subject-full-stop': [0, 'never'],
|
||||
'subject-case': [0, 'never'],
|
||||
'header-max-length': [0, 'always', 72]
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
{
|
||||
rules: {
|
||||
"commit-rule": ({ raw }) => {
|
||||
return [
|
||||
/^\[(build|feat|fix|update|refactor|docs|chore|style|revert|perf)].+/g.test(raw),
|
||||
`commit备注信息格式错误，格式为 <[type] 修改内容>，type支持${types.join(",")}`
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
// generated by unplugin-vue-components
|
||||
// We suggest you to commit this file into source control
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
import '@vue/runtime-core'
|
||||
|
||||
export {}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
AAlert: typeof import('ant-design-vue/es')['Alert']
|
||||
ABadge: typeof import('ant-design-vue/es')['Badge']
|
||||
AButton: typeof import('ant-design-vue/es')['Button']
|
||||
ACard: typeof import('ant-design-vue/es')['Card']
|
||||
ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
|
||||
ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
|
||||
ACol: typeof import('ant-design-vue/es')['Col']
|
||||
ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
|
||||
ADivider: typeof import('ant-design-vue/es')['Divider']
|
||||
AEmpty: typeof import('ant-design-vue/es')['Empty']
|
||||
AForm: typeof import('ant-design-vue/es')['Form']
|
||||
AFormItem: typeof import('ant-design-vue/es')['FormItem']
|
||||
AInput: typeof import('ant-design-vue/es')['Input']
|
||||
AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
|
||||
AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
|
||||
AModal: typeof import('ant-design-vue/es')['Modal']
|
||||
APagination: typeof import('ant-design-vue/es')['Pagination']
|
||||
APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
|
||||
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
|
||||
ARow: typeof import('ant-design-vue/es')['Row']
|
||||
ASelect: typeof import('ant-design-vue/es')['Select']
|
||||
ASpin: typeof import('ant-design-vue/es')['Spin']
|
||||
ASwitch: typeof import('ant-design-vue/es')['Switch']
|
||||
ATable: typeof import('ant-design-vue/es')['Table']
|
||||
ATabPane: typeof import('ant-design-vue/es')['TabPane']
|
||||
ATabs: typeof import('ant-design-vue/es')['Tabs']
|
||||
ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
|
||||
ATooltip: typeof import('ant-design-vue/es')['Tooltip']
|
||||
ATree: typeof import('ant-design-vue/es')['Tree']
|
||||
ATreeSelect: typeof import('ant-design-vue/es')['TreeSelect']
|
||||
AUpload: typeof import('ant-design-vue/es')['Upload']
|
||||
BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default']
|
||||
CardBox: typeof import('./src/components/CardBox/index.vue')['default']
|
||||
FormFormBuilder: typeof import('./src/components/Form/FormBuilder.vue')['default']
|
||||
GeoComponent: typeof import('./src/components/GeoComponent/index.vue')['default']
|
||||
MonacoEditor: typeof import('./src/components/MonacoEditor/index.vue')['default']
|
||||
PermissionButton: typeof import('./src/components/PermissionButton/index.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
Table: typeof import('./src/components/Table/index.vue')['default']
|
||||
TitleComponent: typeof import('./src/components/TitleComponent/index.vue')['default']
|
||||
ValueItem: typeof import('./src/components/ValueItem/index.vue')['default']
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
export default {
|
||||
theme: {
|
||||
'primary-color': '#00A4FF',
|
||||
'primary-color': '#1d39c4',
|
||||
},
|
||||
logo: '/favicon.ico',
|
||||
title: 'Jetlinks'
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@
|
|||
"typescript": "^4.9.3",
|
||||
"vite": "^4.0.0",
|
||||
"vite-plugin-html": "^3.2.0",
|
||||
"vite-plugin-style-import": "^2.0.0",
|
||||
"vite-plugin-vue-setup-extend": "^0.4.0",
|
||||
"vue-tsc": "^1.0.11"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
import server from '@/utils/request'
|
||||
|
||||
export const queryNoPagingPost = (data: any) => server.post(`/device-product/_query/no-paging?paging=false`, data)
|
||||
|
|
@ -241,7 +241,7 @@ watch(props.initValue, (newValue: any) => {
|
|||
})
|
||||
|
||||
defineExpose({
|
||||
resetModel,
|
||||
reset: resetModel,
|
||||
formValidate,
|
||||
setItemValue,
|
||||
setData
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
<script setup lang="ts" name="PermissionButton">
|
||||
import type { ButtonProps, TooltipProps, PopconfirmProps } from 'ant-design-vue'
|
||||
import { usePermissionStore } from '@/store/permission';
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
<!-- 单选卡片 -->
|
||||
<template>
|
||||
<div class="m-radio">
|
||||
<div
|
||||
class="m-radio-item"
|
||||
:class="{ active: myValue === item.value }"
|
||||
v-for="(item, index) in options"
|
||||
:key="index"
|
||||
@click="myValue = item.value"
|
||||
>
|
||||
<img class="img" :src="item.logo" alt="" />
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue';
|
||||
|
||||
interface IOption {
|
||||
label: string;
|
||||
value: string;
|
||||
logo: string;
|
||||
}
|
||||
|
||||
type Emits = {
|
||||
(e: 'update:modelValue', data: string): void;
|
||||
};
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const props = defineProps({
|
||||
options: {
|
||||
type: Array as PropType<IOption[]>,
|
||||
default: () => [],
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const myValue = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.m-radio {
|
||||
display: flex;
|
||||
&-item {
|
||||
padding: 10px 15px;
|
||||
margin-right: 15px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
cursor: pointer;
|
||||
.img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
&.active {
|
||||
color: #1d39c4;
|
||||
border-color: #1d39c4;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<template>
|
||||
<div class='JSearch-item'>
|
||||
<div class='JSearch-item--type'>
|
||||
<a-select
|
||||
v-if='index !== 1 && index !== 4'
|
||||
:options='typeOptions'
|
||||
v-model:value='termsModel.type'
|
||||
style='width: 100%;'
|
||||
/>
|
||||
<span v-else>
|
||||
{{
|
||||
index === 1 ? '第一组' : '第二组'
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<a-select
|
||||
class='JSearch-item--column'
|
||||
:options='columnOptions'
|
||||
v-model:value='termsModel.column'
|
||||
/>
|
||||
<a-select
|
||||
class='JSearch-item--termType'
|
||||
:options='termTypeOptions'
|
||||
v-model:value='termsModel.termType'
|
||||
/>
|
||||
<div class='JSearch-item--value'>
|
||||
<a-input
|
||||
v-if='component === componentType.input'
|
||||
v-model:value='termsModel.value'
|
||||
/>
|
||||
<a-select
|
||||
v-else-if='component === componentType.select'
|
||||
v-model:value='termsModel.value'
|
||||
:options='options'
|
||||
/>
|
||||
<a-inputnumber
|
||||
v-else-if='component === componentType.inputNumber'
|
||||
v-model:value='termsModel.value'
|
||||
/>
|
||||
<a-input-password
|
||||
v-else-if='component === componentType.password'
|
||||
v-model:value='termsModel.value'
|
||||
/>
|
||||
<a-switch
|
||||
v-else-if='component === componentType.switch'
|
||||
v-model:checked='termsModel.value'
|
||||
/>
|
||||
<a-radio-group
|
||||
v-else-if='component === componentType.radio'
|
||||
v-model:value='termsModel.value'
|
||||
/>
|
||||
<a-checkbox-group
|
||||
v-else-if='component === componentType.checkbox'
|
||||
v-model:value='termsModel.value'
|
||||
:options='options'
|
||||
/>
|
||||
<a-time-picker
|
||||
v-else-if='component === componentType.time'
|
||||
v-model:value='termsModel.value'
|
||||
/>
|
||||
<a-date-picker
|
||||
v-else-if='component === componentType.date'
|
||||
v-model:value='termsModel.value'
|
||||
/>
|
||||
<a-tree-select
|
||||
v-else-if='component === componentType.tree'
|
||||
v-model:value='termsModel.value'
|
||||
:tree-data='options'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts' name='SearchItem'>
|
||||
import { componentType } from 'components/Form'
|
||||
import { typeOptions } from './util'
|
||||
|
||||
const props = defineProps({
|
||||
component: {
|
||||
type: String,
|
||||
default: componentType.input
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
})
|
||||
|
||||
const termsModel = reactive({})
|
||||
|
||||
const options = ref([])
|
||||
|
||||
const columnOptions = reactive([])
|
||||
|
||||
const termTypeOptions = reactive([])
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang='less'>
|
||||
.JSearch-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
.JSearch-item--type {
|
||||
min-width: 120px;
|
||||
> span {
|
||||
line-height: 34px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.JSearch-item--column {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.JSearch-item--termType {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.JSearch-item--value {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<div class='JSearch-content'>
|
||||
<div class='left'>
|
||||
<SearchItem :index='1' />
|
||||
<SearchItem :index='2' />
|
||||
<SearchItem :index='3' />
|
||||
</div>
|
||||
<div class='center'>
|
||||
<a-select
|
||||
:options='typeOptions'
|
||||
/>
|
||||
</div>
|
||||
<div class='right'>
|
||||
<SearchItem :index='4' />
|
||||
<SearchItem :index='5' />
|
||||
<SearchItem :index='6' />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts' name='Search'>
|
||||
import SearchItem from './Item.vue'
|
||||
import { typeOptions } from './util'
|
||||
|
||||
const props = defineProps({
|
||||
defaultParams: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'advanced'
|
||||
},
|
||||
|
||||
key: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const searchParams = reactive({
|
||||
data: {}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang='less'>
|
||||
.JSearch-content {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
.left, & .right {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-direction: column;
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex-basis: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import Search from './Search.vue'
|
||||
|
||||
export default Search
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export const typeOptions = [
|
||||
{ label: '或者', value: 'or' },
|
||||
{ label: '并且', value: 'and' },
|
||||
]
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
.jtable-body {
|
||||
width: 100%;
|
||||
padding: 0 24px 24px;
|
||||
background-color: white;
|
||||
.jtable-body-header {
|
||||
padding: 16px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.jtable-body-header-right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
.jtable-setting-item {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color-hover;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: @primary-color-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.jtable-content {
|
||||
.jtable-alert {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.jtable-card {
|
||||
.jtable-card-items {
|
||||
display: grid;
|
||||
grid-gap: 26px;
|
||||
.jtable-card-item {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.jtable-pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
:global {
|
||||
.ant-pagination-item {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,268 @@
|
|||
import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
|
||||
import styles from './index.module.less'
|
||||
import { Pagination, Table, Empty, Spin, Alert } from 'ant-design-vue'
|
||||
import type { TableProps, ColumnProps } from 'ant-design-vue/es/table'
|
||||
import type { TooltipProps } from 'ant-design-vue/es/tooltip'
|
||||
import type { PopconfirmProps } from 'ant-design-vue/es/popconfirm'
|
||||
import { CSSProperties, PropType } from 'vue';
|
||||
|
||||
enum ModelEnum {
|
||||
TABLE = 'TABLE',
|
||||
CARD = 'CARD',
|
||||
}
|
||||
|
||||
type RequestData = {
|
||||
code: string;
|
||||
result: {
|
||||
data: Record<string, any>[] | undefined;
|
||||
pageIndex: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
};
|
||||
status: number;
|
||||
} & Record<string, any>;
|
||||
|
||||
export interface ActionsType {
|
||||
key: string;
|
||||
text?: string;
|
||||
disabled?: boolean;
|
||||
permission?: boolean;
|
||||
onClick?: (data: any) => void;
|
||||
style?: CSSProperties;
|
||||
tooltip?: TooltipProps;
|
||||
popConfirm?: PopconfirmProps;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
export interface JColumnProps extends ColumnProps{
|
||||
scopedSlots?: boolean; // 是否为插槽 true: 是 false: 否
|
||||
}
|
||||
|
||||
export interface JTableProps extends TableProps{
|
||||
request?: (params: Record<string, any> & {
|
||||
pageSize: number;
|
||||
pageIndex: number;
|
||||
}) => Promise<Partial<RequestData>>;
|
||||
cardBodyClass?: string;
|
||||
columns: JColumnProps[];
|
||||
params?: Record<string, any> & {
|
||||
pageSize: number;
|
||||
pageIndex: number;
|
||||
};
|
||||
model?: keyof typeof ModelEnum | undefined; // 显示table还是card
|
||||
actions?: ActionsType[];
|
||||
noPagination?: boolean;
|
||||
rowSelection?: TableProps['rowSelection'];
|
||||
cardProps?: Record<string, any>;
|
||||
dataSource?: Record<string, any>[];
|
||||
}
|
||||
|
||||
const JTable = defineComponent<JTableProps>({
|
||||
name: 'JTable',
|
||||
slots: [
|
||||
'headerTitle', // 顶部左边插槽
|
||||
'card', // 卡片内容
|
||||
],
|
||||
emits: [
|
||||
'modelChange', // 切换卡片和表格
|
||||
],
|
||||
props: {
|
||||
request: {
|
||||
type: Function,
|
||||
default: undefined
|
||||
},
|
||||
cardBodyClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
params: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
model: {
|
||||
type: [String, undefined],
|
||||
default: undefined
|
||||
},
|
||||
actions: {
|
||||
type: Array as PropType<ActionsType[]>,
|
||||
default: () => []
|
||||
},
|
||||
noPagination: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
rowSelection: {
|
||||
type: Object as PropType<TableProps['rowSelection']>,
|
||||
default: () => undefined
|
||||
},
|
||||
cardProps: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
},
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
} as any,
|
||||
setup(props: JTableProps ,{ slots, emit }){
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
|
||||
const _model = ref<keyof typeof ModelEnum>(props.model ? props.model : ModelEnum.CARD); // 模式切换
|
||||
const column = ref<number>(4);
|
||||
const _dataSource = ref<Record<string, any>[]>([])
|
||||
const pageIndex = ref<number>(0)
|
||||
const pageSize = ref<number>(6)
|
||||
const total = ref<number>(0)
|
||||
const _columns = ref<JColumnProps[]>(props?.columns || [])
|
||||
const loading = ref<boolean>(true)
|
||||
|
||||
// alert关闭，取消选择
|
||||
const handleAlertClose = () => {
|
||||
emit('cancelSelect')
|
||||
}
|
||||
|
||||
/**
|
||||
* 请求数据
|
||||
*/
|
||||
const handleSearch = async (_params?: Record<string, any>) => {
|
||||
loading.value = true
|
||||
if(props.request) {
|
||||
const resp = await props.request({
|
||||
pageSize: 12,
|
||||
pageIndex: 1,
|
||||
..._params
|
||||
})
|
||||
if(resp.status === 200){
|
||||
// 判断如果是最后一页且最后一页为空，就跳转到前一页
|
||||
if(resp.result?.data?.length === 0 && resp.result.total && resp.result.pageSize && resp.result.pageIndex) {
|
||||
handleSearch({
|
||||
..._params,
|
||||
pageSize: pageSize.value,
|
||||
pageIndex: pageIndex.value - 1,
|
||||
})
|
||||
} else {
|
||||
_dataSource.value = resp.result?.data || []
|
||||
pageIndex.value = resp.result?.pageIndex || 0
|
||||
pageSize.value = resp.result?.pageSize || 6
|
||||
total.value = resp.result?.total || 0
|
||||
}
|
||||
}
|
||||
} else {
|
||||
_dataSource.value = props?.dataSource || []
|
||||
}
|
||||
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
handleSearch(props.params)
|
||||
})
|
||||
|
||||
return () => <Spin spinning={loading.value}>
|
||||
<div class={styles["jtable-body"]}>
|
||||
<div class={styles["jtable-body-header"]}>
|
||||
<div class={styles["jtable-body-header-left"]}>
|
||||
{/* 顶部左边插槽 */}
|
||||
{slots.headerTitle && slots.headerTitle()}
|
||||
</div>
|
||||
<div class={styles["jtable-body-header-right"]}>
|
||||
<div class={[styles["jtable-setting-item"], ModelEnum.CARD === _model.value ? styles['active'] : '']} onClick={() => {
|
||||
_model.value = ModelEnum.CARD
|
||||
}}>
|
||||
<AppstoreOutlined />
|
||||
</div>
|
||||
<div class={[styles["jtable-setting-item"], ModelEnum.TABLE === _model.value ? styles['active'] : '']} onClick={() => {
|
||||
_model.value = ModelEnum.TABLE
|
||||
}}>
|
||||
<UnorderedListOutlined />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* content */}
|
||||
<div class={styles['jtable-content']}>
|
||||
{
|
||||
props?.rowSelection && props?.rowSelection?.selectedRowKeys && props.rowSelection.selectedRowKeys?.length ?
|
||||
<div class={styles['jtable-alert']}>
|
||||
<Alert
|
||||
message={'已选择' + props?.rowSelection?.selectedRowKeys?.length + '项'}
|
||||
type="info"
|
||||
onClose={handleAlertClose}
|
||||
closeText={<a>取消选择</a>}
|
||||
/>
|
||||
</div> : null
|
||||
}
|
||||
{
|
||||
_model.value === ModelEnum.CARD ?
|
||||
<div class={styles['jtable-card']}>
|
||||
{
|
||||
_dataSource.value.length ?
|
||||
<div
|
||||
class={styles['jtable-card-items']}
|
||||
style={{gridTemplateColumns: `repeat(${column.value}, 1fr)`}}
|
||||
>
|
||||
{
|
||||
_dataSource.value.map(item => slots.card ?
|
||||
<div class={[styles['jtable-card-item'], props.cardBodyClass]}>{slots.card({row: item, actions: props?.actions || []})}</div>
|
||||
: null)
|
||||
}
|
||||
</div> :
|
||||
<div><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
|
||||
}
|
||||
</div> :
|
||||
<div>
|
||||
<Table
|
||||
dataSource={_dataSource.value}
|
||||
columns={_columns.value}
|
||||
pagination={false}
|
||||
rowKey="id"
|
||||
rowSelection={props.rowSelection}
|
||||
scroll={{x: 1366}}
|
||||
v-slots={{
|
||||
bodyCell: (dt: Record<string, any>) => {
|
||||
const {column, record} = dt;
|
||||
if((column?.key || column?.dataIndex) && column?.scopedSlots && (slots?.[column?.dataIndex] || slots?.[column?.key])) {
|
||||
const _key = column?.key || column?.dataIndex
|
||||
return slots?.[_key]!({row: record, actions: props.actions})
|
||||
} else {
|
||||
return record?.[column?.dataIndex] || ''
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
{/* 分页 */}
|
||||
{
|
||||
_dataSource.value.length && !props.noPagination &&
|
||||
<div class={styles['jtable-pagination']}>
|
||||
<Pagination
|
||||
size="small"
|
||||
total={total.value}
|
||||
showQuickJumper={false}
|
||||
showSizeChanger={true}
|
||||
current={pageIndex.value}
|
||||
pageSize={pageSize.value}
|
||||
pageSizeOptions={['12', '24', '48', '60', '100']}
|
||||
showTotal={(total, range) => {
|
||||
return `第 ${range[0]} - ${range[1]} 条/总共 ${total} 条`
|
||||
}}
|
||||
onChange={(page, size) => {
|
||||
handleSearch({
|
||||
...props.params,
|
||||
pageSize: size,
|
||||
pageIndex: pageSize.value === size ? page : 1,
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</Spin>
|
||||
}
|
||||
})
|
||||
|
||||
export default JTable
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script setup lang="ts" name="JTable">
|
||||
import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
|
||||
import type { TableProps, ColumnsType } from 'ant-design-vue/es/table'
|
||||
import type { TooltipProps } from 'ant-design-vue/es/tooltip'
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import type { App } from 'vue'
|
||||
import AIcon from './AIcon'
|
||||
import PermissionButton from './PermissionButton/index.vue'
|
||||
import JTable from './Table/index.vue'
|
||||
import JTable from './Table/index'
|
||||
import TitleComponent from "./TitleComponent/index.vue";
|
||||
import Form from './Form';
|
||||
import CardBox from './CardBox/index.vue';
|
||||
import Search from './Search'
|
||||
|
||||
export default {
|
||||
install(app: App) {
|
||||
|
|
@ -14,5 +15,6 @@ export default {
|
|||
.component('TitleComponent', TitleComponent)
|
||||
.component('Form', Form)
|
||||
.component('CardBox', CardBox)
|
||||
.component('Search', Search)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import App from './App.vue'
|
|||
import store from './store'
|
||||
import router from './router'
|
||||
import components from './components'
|
||||
import './style.css'
|
||||
import './style.less'
|
||||
import 'ant-design-vue/es/notification/style/css';
|
||||
import Antd from 'ant-design-vue/es'
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,15 @@ const router = createRouter({
|
|||
routes: menus
|
||||
})
|
||||
|
||||
const filterPath = [
|
||||
'/form',
|
||||
'/search'
|
||||
]
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
const token = LocalStore.get(TOKEN_KEY)
|
||||
if (token) {
|
||||
|
||||
if (token || filterPath.includes(to.path)) {
|
||||
next()
|
||||
} else {
|
||||
if (to.path === LoginPath) {
|
||||
|
|
|
|||
|
|
@ -44,6 +44,26 @@ export default [
|
|||
path: '/form',
|
||||
component: () => import('@/views/demo/Form.vue')
|
||||
},
|
||||
{
|
||||
path: '/search',
|
||||
component: () => import('@/views/demo/Search.vue')
|
||||
},
|
||||
{
|
||||
path: '/notice/Config',
|
||||
component: () => import('@/views/notice/Config/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/notice/Config/detail/:id',
|
||||
component: () => import('@/views/notice/Config/Detail/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/notice/Template',
|
||||
component: () => import('@/views/notice/Template/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/notice/Template/detail/:id',
|
||||
component: () => import('@/views/notice/Template/Detail/index.vue')
|
||||
},
|
||||
// end: 测试用, 可删除
|
||||
|
||||
// link 运维管理
|
||||
|
|
@ -69,7 +89,7 @@ export default [
|
|||
},
|
||||
// 初始化
|
||||
{
|
||||
path: '/init-home',
|
||||
component: () => import('@/views/init-home/index.vue')
|
||||
},
|
||||
path: '/init-home',
|
||||
component: () => import('@/views/init-home/index.vue')
|
||||
},
|
||||
]
|
||||
|
|
@ -26,23 +26,24 @@ export const request = axios.create({
|
|||
* @param {String} responseType 如果接口是需要导出文件流，那么responseType = 'blob'
|
||||
* @returns {AxiosInstance}
|
||||
*/
|
||||
export const post = function(url: string, data = {}, params = {}) {
|
||||
export const post = function<T>(url: string, data = {}, params = {}) {
|
||||
params = typeof params === 'string' ? { responseType: params } : params
|
||||
return request({
|
||||
return request<any, AxiosResponseRewrite<T>>({
|
||||
...params,
|
||||
method: 'POST',
|
||||
url,
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* put method request
|
||||
* @param {String} url
|
||||
* @param {Object} [data]
|
||||
* @returns {AxiosInstance}
|
||||
*/
|
||||
export const put = function(url: string, data = {},) {
|
||||
return request({
|
||||
export const put = function<T>(url: string, data = {},) {
|
||||
return request<any, AxiosResponseRewrite<T>>({
|
||||
method: 'PUT',
|
||||
url,
|
||||
data
|
||||
|
|
@ -55,8 +56,8 @@ export const put = function(url: string, data = {},) {
|
|||
* @param {Object} [data]
|
||||
* @returns {AxiosInstance}
|
||||
*/
|
||||
export const patch = function(url: string, data = {}) {
|
||||
return request({
|
||||
export const patch = function<T>(url: string, data = {}) {
|
||||
return request<any, AxiosResponseRewrite<T>>({
|
||||
method: 'PATCH',
|
||||
url,
|
||||
data
|
||||
|
|
@ -69,8 +70,8 @@ export const patch = function(url: string, data = {}) {
|
|||
* @param {Object} [ext] 扩展参数
|
||||
* @returns {AxiosInstance}
|
||||
*/
|
||||
export const get = function(url: string, params = {}, ext?: any) {
|
||||
return request({
|
||||
export const get = function<T>(url: string, params = {}, ext?: any) {
|
||||
return request<any, AxiosResponseRewrite<T>>({
|
||||
method: 'GET',
|
||||
url,
|
||||
params,
|
||||
|
|
@ -85,8 +86,8 @@ export const get = function(url: string, params = {}, ext?: any) {
|
|||
* @param {Object} [ext] 扩展参数
|
||||
* @returns {AxiosInstance}
|
||||
*/
|
||||
export const remove = function(url: string, params = {}, ext?: any) {
|
||||
return request({
|
||||
export const remove = function<T>(url: string, params = {}, ext?: any) {
|
||||
return request<any, AxiosResponseRewrite<T>>({
|
||||
method: 'DELETE',
|
||||
url,
|
||||
params,
|
||||
|
|
@ -101,7 +102,7 @@ export const remove = function(url: string, params = {}, ext?: any) {
|
|||
* @return {*}
|
||||
*/
|
||||
export const getStream = function(url: string, params = {}) {
|
||||
return get(url, params, {
|
||||
return get<any>(url, params, {
|
||||
responseType: 'arraybuffer' // 设置请求数据类型，返回blob可解析类型
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const submit = () => {
|
|||
}
|
||||
|
||||
const reset = () => {
|
||||
|
||||
form.value.reset()
|
||||
}
|
||||
|
||||
const setValue =() => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<div class='search'>
|
||||
<Search />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search {
|
||||
width: calc(100% - 330px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -38,14 +38,14 @@
|
|||
<a-button type="primary">新增</a-button>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox :value="slotProps" @click="handleClick" :actions="actions" v-bind="slotProps" :active="_selectedRowKeys.includes(slotProps.id)">
|
||||
<CardBox :value="slotProps" @click="handleClick" :actions="slotProps.actions" v-bind="slotProps.row" :active="_selectedRowKeys.includes(slotProps.row.id)">
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img :src="getImage('/device-product.png')" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<h3>{{slotProps.name}}</h3>
|
||||
<h3>{{slotProps.row.name}}</h3>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
|
|
@ -68,11 +68,11 @@
|
|||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<a-tooltip v-for="i in actions" :key="i.key" v-bind="i.tooltip">
|
||||
<a-tooltip v-for="i in slotProps.actions" :key="i.key" v-bind="i.tooltip">
|
||||
<a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
|
||||
<a-button style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
|
||||
</a-popconfirm>
|
||||
<a-button style="padding: 0" type="link" v-else @click="i.onClick && i.onClick(slotProps)">
|
||||
<a-button style="padding: 0" type="link" v-else @click="i.onClick && i.onClick(slotProps.row)">
|
||||
<AIcon :type="i.icon" />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import { Button } from 'ant-design-vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup(){
|
||||
return () => <div>
|
||||
<Button type='primary'>新增</Button>
|
||||
</div>
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,405 @@
|
|||
<!-- 通知配置详情 -->
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<a-card>
|
||||
<a-row>
|
||||
<a-col :span="10">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item
|
||||
label="通知方式"
|
||||
v-bind="validateInfos.type"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="formData.type"
|
||||
placeholder="请选择通知方式"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in NOTICE_METHOD"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="名称" v-bind="validateInfos.name">
|
||||
<a-input
|
||||
v-model:value="formData.name"
|
||||
placeholder="请输入名称"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="类型"
|
||||
v-bind="validateInfos.provider"
|
||||
v-if="formData.type !== 'email'"
|
||||
>
|
||||
<RadioCard
|
||||
:options="msgType"
|
||||
v-model="formData.provider"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- 钉钉 -->
|
||||
<template v-if="formData.type === 'dingTalk'">
|
||||
<template
|
||||
v-if="formData.provider === 'dingTalkMessage'"
|
||||
>
|
||||
<a-form-item
|
||||
label="AppKey"
|
||||
v-bind="
|
||||
validateInfos['configuration.appKey']
|
||||
"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.appKey
|
||||
"
|
||||
placeholder="请输入AppKey"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="AppSecret"
|
||||
v-bind="
|
||||
validateInfos['configuration.appSecret']
|
||||
"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.appSecret
|
||||
"
|
||||
placeholder="请输入AppSecret"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template
|
||||
v-if="
|
||||
formData.provider === 'dingTalkRobotWebHook'
|
||||
"
|
||||
>
|
||||
<a-form-item
|
||||
label="webHook"
|
||||
v-bind="validateInfos['configuration.url']"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.url
|
||||
"
|
||||
placeholder="请输入webHook"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 微信 -->
|
||||
<template v-if="formData.type === 'weixin'">
|
||||
<a-form-item
|
||||
label="corpId"
|
||||
v-bind="validateInfos['configuration.corpId']"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.corpId
|
||||
"
|
||||
placeholder="请输入corpId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="corpSecret"
|
||||
v-bind="
|
||||
validateInfos['configuration.corpSecret']
|
||||
"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.corpSecret
|
||||
"
|
||||
placeholder="请输入corpSecret"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 邮件 -->
|
||||
<template v-if="formData.type === 'email'">
|
||||
<a-form-item
|
||||
label="服务器地址"
|
||||
v-bind="validateInfos['configuration.host']"
|
||||
>
|
||||
<a-space>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.host
|
||||
"
|
||||
placeholder="请输入服务器地址"
|
||||
/>
|
||||
<a-input-number
|
||||
v-model:value="
|
||||
formData.configuration.port
|
||||
"
|
||||
/>
|
||||
<a-checkbox
|
||||
v-model:value="
|
||||
formData.configuration.ssl
|
||||
"
|
||||
>
|
||||
开启SSL
|
||||
</a-checkbox>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="发件人"
|
||||
v-bind="validateInfos['configuration.sender']"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.sender
|
||||
"
|
||||
placeholder="请输入发件人"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="用户名"
|
||||
v-bind="validateInfos['configuration.username']"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.username
|
||||
"
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="密码"
|
||||
v-bind="validateInfos['configuration.password']"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.password
|
||||
"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 语音/短信 -->
|
||||
<template
|
||||
v-if="
|
||||
formData.type === 'voice' ||
|
||||
formData.type === 'sms'
|
||||
"
|
||||
>
|
||||
<a-form-item
|
||||
label="RegionId"
|
||||
v-bind="validateInfos['configuration.regionId']"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="
|
||||
formData.configuration.regionId
|
||||
"
|
||||
placeholder="请选择RegionId"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in regionList"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="AccessKeyId"
|
||||
v-bind="
|
||||
validateInfos['configuration.accessKeyId']
|
||||
"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.accessKeyId
|
||||
"
|
||||
placeholder="请输入AccessKeyId"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="Secret"
|
||||
v-bind="validateInfos['configuration.secret']"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.configuration.secret
|
||||
"
|
||||
placeholder="Secret"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- webhook -->
|
||||
<template v-if="formData.type === 'webhook'">
|
||||
<a-form-item
|
||||
label="Webhook"
|
||||
v-bind="validateInfos['configuration.url']"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formData.configuration.url"
|
||||
placeholder="请输入Webhook"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<a-form-item label="说明">
|
||||
<a-textarea
|
||||
v-model:value="formData.description"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
:rows="5"
|
||||
placeholder="请输入说明"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{ offset: 0, span: 3 }">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
style="width: 100%"
|
||||
>
|
||||
保存
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-col :span="12" :push="2"></a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getImage, LocalStore } from '@/utils/comm';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { ConfigFormData } from '../types';
|
||||
import {
|
||||
NOTICE_METHOD,
|
||||
CONFIG_FIELD_MAP,
|
||||
MSG_TYPE,
|
||||
} from '@/views/notice/const';
|
||||
import regionList from './regionId';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
// 消息类型
|
||||
const msgType = ref([
|
||||
{
|
||||
label: '钉钉消息',
|
||||
value: 'dingTalkMessage',
|
||||
logo: getImage('/notice/dingtalk.png'),
|
||||
},
|
||||
{
|
||||
label: '群机器人消息',
|
||||
value: 'dingTalkRobotWebHook',
|
||||
logo: getImage('/notice/dingTalk-rebot.png'),
|
||||
},
|
||||
]);
|
||||
|
||||
// 表单数据
|
||||
const formData = ref<ConfigFormData>({
|
||||
configuration: {
|
||||
appKey: '',
|
||||
appSecret: '',
|
||||
url: '',
|
||||
},
|
||||
description: '',
|
||||
name: '',
|
||||
provider: 'dingTalkMessage',
|
||||
type: NOTICE_METHOD[0].value,
|
||||
});
|
||||
|
||||
// 根据通知方式展示对应的字段
|
||||
watch(
|
||||
() => formData.value.type,
|
||||
(val) => {
|
||||
formData.value.configuration = CONFIG_FIELD_MAP[val];
|
||||
msgType.value = MSG_TYPE[val];
|
||||
|
||||
formData.value.provider = msgType.value[0].value;
|
||||
},
|
||||
);
|
||||
|
||||
// 验证规则
|
||||
const formRules = ref({
|
||||
type: [{ required: true, message: '请选择通知方式' }],
|
||||
name: [
|
||||
{ required: true, message: '请输入名称' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
provider: [{ required: true, message: '请选择类型' }],
|
||||
// 钉钉
|
||||
'configuration.appKey': [
|
||||
{ required: true, message: '请输入AppKey' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
'configuration.appSecret': [
|
||||
{ required: true, message: '请输入AppSecret' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
// 'configuration.url': [{ required: true, message: '请输入WebHook' }],
|
||||
// 微信
|
||||
'configuration.corpId': [
|
||||
{ required: true, message: '请输入corpId' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
'configuration.corpSecret': [
|
||||
{ required: true, message: '请输入corpSecret' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
// 阿里云语音/短信
|
||||
'configuration.regionId': [
|
||||
{ required: true, message: '请输入RegionId' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
'configuration.accessKeyId': [
|
||||
{ required: true, message: '请输入AccessKeyId' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
'configuration.secret': [
|
||||
{ required: true, message: '请输入Secret' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
// 邮件
|
||||
'configuration.host': [{ required: true, message: '请输入服务器地址' }],
|
||||
'configuration.sender': [{ required: true, message: '请输入发件人' }],
|
||||
'configuration.username': [
|
||||
{ required: true, message: '请输入用户名' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
'configuration.password': [
|
||||
{ required: true, message: '请输入密码' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
],
|
||||
// webhook
|
||||
'configuration.url': [
|
||||
{ required: true, message: '请输入Webhook' },
|
||||
{
|
||||
pattern:
|
||||
/^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/,
|
||||
message: 'Webhook需要是一个合法的URL',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
description: [{ max: 200, message: '最多可输入200个字符' }],
|
||||
});
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(
|
||||
formData.value,
|
||||
formRules.value,
|
||||
);
|
||||
console.log('validateInfos: ', validateInfos);
|
||||
|
||||
/**
|
||||
* 表单提交
|
||||
*/
|
||||
const handleSubmit = () => {
|
||||
validate()
|
||||
.then(async () => {})
|
||||
.catch((err) => {});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.page-container {
|
||||
background: #f0f2f5;
|
||||
padding: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
// 数据来源 https://help.aliyun.com/document_detail/188196.html
|
||||
export default [
|
||||
/** 公共云 */
|
||||
//中国地区（包含中国香港、中国澳门，不包含中国台湾）
|
||||
{
|
||||
value: 'cn-qingdao',
|
||||
label: '华北1（青岛）',
|
||||
},
|
||||
{
|
||||
value: 'cn-beijing',
|
||||
label: '华北2（北京）',
|
||||
},
|
||||
{
|
||||
value: 'cn-zhangjiakou',
|
||||
label: '华北3（张家口）',
|
||||
},
|
||||
{
|
||||
value: 'cn-huhehaote',
|
||||
label: '华北5（呼和浩特）',
|
||||
},
|
||||
{
|
||||
value: 'cn-wulanchabu',
|
||||
label: '华北6（乌兰察布）',
|
||||
},
|
||||
{
|
||||
value: 'cn-hangzhou',
|
||||
label: '华东1（杭州）',
|
||||
},
|
||||
{
|
||||
value: 'cn-shanghai',
|
||||
label: '华东2（上海）',
|
||||
},
|
||||
{
|
||||
value: 'cn-nanjing',
|
||||
label: '华东5 （南京-本地地域）',
|
||||
},
|
||||
{
|
||||
value: 'cn-fuzhou',
|
||||
label: '华东6（福州-本地地域）',
|
||||
},
|
||||
{
|
||||
value: 'cn-shenzhen',
|
||||
label: '华南1（深圳）',
|
||||
},
|
||||
{
|
||||
value: 'cn-heyuan',
|
||||
label: '华南2（河源）',
|
||||
},
|
||||
{
|
||||
value: 'cn-guangzhou',
|
||||
label: '华南3（广州）',
|
||||
},
|
||||
{
|
||||
value: 'cn-chengdu',
|
||||
label: '西南1（成都）',
|
||||
},
|
||||
{
|
||||
value: 'cn-hongkong',
|
||||
label: '中国香港',
|
||||
},
|
||||
|
||||
//其他国家和地区
|
||||
{
|
||||
value: 'ap-southeast-1',
|
||||
label: '新加坡',
|
||||
},
|
||||
{
|
||||
value: 'ap-southeast-2',
|
||||
label: '澳大利亚（悉尼）',
|
||||
},
|
||||
{
|
||||
value: 'ap-southeast-3',
|
||||
label: '马来西亚（吉隆坡）',
|
||||
},
|
||||
{
|
||||
value: 'ap-southeast-5',
|
||||
label: '印度尼西亚（雅加达）',
|
||||
},
|
||||
{
|
||||
value: 'ap-southeast-6',
|
||||
label: '菲律宾（马尼拉）',
|
||||
},
|
||||
{
|
||||
value: 'ap-southeast-7',
|
||||
label: '泰国（曼谷）',
|
||||
},
|
||||
{
|
||||
value: 'ap-south-1',
|
||||
label: '印度（孟买）',
|
||||
},
|
||||
{
|
||||
value: 'ap-northeast-1',
|
||||
label: '日本（东京）',
|
||||
},
|
||||
{
|
||||
value: 'ap-northeast-2',
|
||||
label: '韩国（首尔）',
|
||||
},
|
||||
{
|
||||
value: 'us-west-1',
|
||||
label: '美国（硅谷）',
|
||||
},
|
||||
{
|
||||
value: 'us-east-1',
|
||||
label: '美国（弗吉尼亚）',
|
||||
},
|
||||
{
|
||||
value: 'eu-central-1',
|
||||
label: '德国（法兰克福）',
|
||||
},
|
||||
{
|
||||
value: 'eu-west-1',
|
||||
label: '英国（伦敦）',
|
||||
},
|
||||
{
|
||||
value: 'me-east-1',
|
||||
label: '阿联酋（迪拜）',
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!-- 通知配置 -->
|
||||
<template>
|
||||
<div class="page-container">通知配置</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
interface IHeaders {
|
||||
key: string;
|
||||
value: string;
|
||||
}
|
||||
export type ConfigFormData = {
|
||||
configuration: {
|
||||
// 钉钉
|
||||
appKey?: string;
|
||||
appSecret?: string;
|
||||
url?: string;
|
||||
// 微信
|
||||
corpId?: string;
|
||||
corpSecret?: string;
|
||||
// 邮件
|
||||
host?: string;
|
||||
port?: number;
|
||||
ssl?: boolean;
|
||||
sender?: string;
|
||||
username?: string;
|
||||
password?: string;
|
||||
// 语音
|
||||
regionId?: string;
|
||||
accessKeyId?: string;
|
||||
secret?: string;
|
||||
// 短信
|
||||
regionId?: string;
|
||||
accessKeyId?: string;
|
||||
secret?: string;
|
||||
// webhook
|
||||
// url?: string;
|
||||
headers?: IHeaders[];
|
||||
};
|
||||
description: string;
|
||||
name: string;
|
||||
provider: string;
|
||||
type: string;
|
||||
};
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!-- 通知模板详情 -->
|
||||
<template>
|
||||
<div class="page-container">通知模板详情</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!-- 通知模板 -->
|
||||
<template>
|
||||
<div class="page-container">通知模板</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
import { getImage } from '@/utils/comm';
|
||||
|
||||
interface INoticeMethod {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
// 通知方式
|
||||
export const NOTICE_METHOD: INoticeMethod[] = [
|
||||
{
|
||||
label: '钉钉',
|
||||
value: 'dingTalk',
|
||||
},
|
||||
{
|
||||
label: '微信',
|
||||
value: 'weixin',
|
||||
},
|
||||
{
|
||||
label: '邮件',
|
||||
value: 'email',
|
||||
},
|
||||
{
|
||||
label: '语音',
|
||||
value: 'voice',
|
||||
},
|
||||
{
|
||||
label: '短信',
|
||||
value: 'sms',
|
||||
},
|
||||
{
|
||||
label: 'webhook',
|
||||
value: 'webhook',
|
||||
},
|
||||
];
|
||||
|
||||
// 消息类型
|
||||
export const MSG_TYPE = {
|
||||
dingTalk: [
|
||||
{
|
||||
label: '钉钉消息',
|
||||
value: 'dingTalkMessage',
|
||||
logo: getImage('/notice/dingtalk.png'),
|
||||
},
|
||||
{
|
||||
label: '群机器人消息',
|
||||
value: 'dingTalkRobotWebHook',
|
||||
logo: getImage('/notice/dingTalk-rebot.png'),
|
||||
},
|
||||
],
|
||||
weixin: [
|
||||
{
|
||||
label: '企业消息',
|
||||
value: 'corpMessage',
|
||||
logo: getImage('/notice/weixin-corp.png'),
|
||||
},
|
||||
// {
|
||||
// label: '服务号消息',
|
||||
// value: 'officialMessage'
|
||||
// logo: getImage('/notice/weixin-official.png'),
|
||||
// }
|
||||
],
|
||||
voice: [
|
||||
{
|
||||
label: '阿里云语音',
|
||||
value: 'aliyun',
|
||||
logo: getImage('/notice/voice.png'),
|
||||
},
|
||||
],
|
||||
sms: [
|
||||
{
|
||||
label: '阿里云短信',
|
||||
value: 'aliyunSms',
|
||||
logo: getImage('/notice/sms.png'),
|
||||
},
|
||||
],
|
||||
webhook: [
|
||||
{
|
||||
label: 'webhook',
|
||||
value: 'http',
|
||||
logo: getImage('/notice/webhook.png'),
|
||||
},
|
||||
],
|
||||
email: [
|
||||
{
|
||||
label: 'email',
|
||||
value: 'embedded',
|
||||
logo: getImage('/notice/email.png'),
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
// 字段关系映射
|
||||
// 配置
|
||||
export const CONFIG_FIELD_MAP = {
|
||||
dingTalk: {
|
||||
appKey: undefined,
|
||||
appSecret: undefined,
|
||||
url: undefined,
|
||||
},
|
||||
weixin: {
|
||||
corpId: undefined,
|
||||
corpSecret: undefined,
|
||||
},
|
||||
email: {
|
||||
host: undefined,
|
||||
port: 25,
|
||||
ssl: false,
|
||||
sender: undefined,
|
||||
username: undefined,
|
||||
password: undefined,
|
||||
},
|
||||
voice: {
|
||||
regionId: undefined,
|
||||
accessKeyId: undefined,
|
||||
secret: undefined,
|
||||
},
|
||||
sms: {
|
||||
regionId: undefined,
|
||||
accessKeyId: undefined,
|
||||
secret: undefined,
|
||||
},
|
||||
webhook: {
|
||||
url: undefined,
|
||||
headers: [],
|
||||
},
|
||||
};
|
||||
|
|
@ -9,7 +9,6 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="lang" data-lang=""></div>
|
||||
<div class="content">
|
||||
<div class="top">
|
||||
<div class="header">
|
||||
|
|
@ -109,17 +108,13 @@
|
|||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div style="margin-top: 20px">
|
||||
<a-divider plain style="height: 12px">
|
||||
<div
|
||||
style="color: #807676d9, font-size: 12px"
|
||||
>
|
||||
<div class="other">
|
||||
<a-divider plain>
|
||||
<div class="other-text">
|
||||
其他方式登录
|
||||
</div>
|
||||
</a-divider>
|
||||
<div
|
||||
style="position: relative, bottom: 10px; text-align: center"
|
||||
>
|
||||
<div class="other-button">
|
||||
<a-button
|
||||
v-for="(item, index) in bindings"
|
||||
:key="index"
|
||||
|
|
@ -312,8 +307,6 @@ screenRotation(screenWidth.value, screenHeight.value);
|
|||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import 'ant-design-vue/es/style/themes/default.less';
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
|
|
@ -336,22 +329,12 @@ screenRotation(screenWidth.value, screenHeight.value);
|
|||
background: #fff;
|
||||
}
|
||||
|
||||
.lang {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 44px;
|
||||
text-align: right;
|
||||
|
||||
:global(.ant-dropdown-trigger) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: center;
|
||||
padding: 0 0 15% 0;
|
||||
margin-top: 20%;
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
|
|
@ -404,17 +387,6 @@ screenRotation(screenWidth.value, screenHeight.value);
|
|||
max-width: 328px;
|
||||
}
|
||||
|
||||
// ::v-deep {
|
||||
// .@{ant-prefix}-tabs-nav-list {
|
||||
// margin: auto;
|
||||
// font-size: 16px;
|
||||
// }
|
||||
|
||||
// // .ant-formily-item-size-large .ant-formily-item-help {
|
||||
// // text-align: left;
|
||||
// // }
|
||||
// }
|
||||
|
||||
.icon {
|
||||
margin-left: 16px;
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
|
|
@ -429,12 +401,17 @@ screenRotation(screenWidth.value, screenHeight.value);
|
|||
}
|
||||
|
||||
.other {
|
||||
margin-top: 24px;
|
||||
line-height: 22px;
|
||||
text-align: left;
|
||||
margin-top: 20px;
|
||||
|
||||
.register {
|
||||
float: right;
|
||||
.other-text {
|
||||
color: #807676d9;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.other-button {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,11 @@
|
|||
"allowJs": true,
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
"@/*": ["./src/*"],
|
||||
"components/*": ["./src/components/*"],
|
||||
"layouts/*": ["./src/layouts/*"],
|
||||
"store/*": ["./src/store/*"],
|
||||
"style/*": ["./src/style/*"],
|
||||
},
|
||||
"types": ["ant-design-vue/typings/global"],
|
||||
"suppressImplicitAnyIndexErrors": true
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { createHtmlPlugin } from 'vite-plugin-html'
|
|||
import Config from './config/config'
|
||||
import {VueAmapResolver} from '@vuemap/unplugin-resolver'
|
||||
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
|
||||
|
||||
import { createStyleImportPlugin, AndDesignVueResolve } from 'vite-plugin-style-import'
|
||||
import * as path from 'path'
|
||||
|
||||
|
||||
|
|
@ -20,7 +20,7 @@ export default defineConfig(({ mode}) => {
|
|||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src'),
|
||||
'styles': path.resolve(__dirname, 'src/style'),
|
||||
'style': path.resolve(__dirname, 'src/style'),
|
||||
'layouts': path.resolve(__dirname, 'src/layouts'),
|
||||
'components': path.resolve(__dirname, 'src/components'),
|
||||
'store': path.resolve(__dirname, 'src/store'),
|
||||
|
|
@ -69,7 +69,10 @@ export default defineConfig(({ mode}) => {
|
|||
}
|
||||
}
|
||||
}),
|
||||
VueSetupExtend()
|
||||
VueSetupExtend(),
|
||||
createStyleImportPlugin({
|
||||
resolves: [AndDesignVueResolve()]
|
||||
})
|
||||
],
|
||||
server: {
|
||||
host:'0.0.0.0',
|
||||
|
|
@ -89,8 +92,8 @@ export default defineConfig(({ mode}) => {
|
|||
preprocessorOptions: {
|
||||
less: {
|
||||
modifyVars: {
|
||||
hack: `true; @import (reference) "${path.resolve('src/style/variable.less')}";`,
|
||||
...Config.theme,
|
||||
hack: `true; @import (reference) "${path.resolve('src/style/variable.less')}";`
|
||||
},
|
||||
javascriptEnabled: true,
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue