0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev' into dev 

# Conflicts:
#	src/components/AIcon/index.tsx
This commit is contained in:
xieyonghong 2023-01-28 18:12:43 +08:00
parent 3e42721d31 9f87a92f0a
commit 11fc6fa4f7
11 changed files with 460 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/api/login.js
View File

@ -1,17 +0,0 @@
import server from '@/utils/request'
export const config = () => server.get(`/authorize/captcha/config`)
export const code = () => server.get(`/authorize/captcha/image?width=130&height=30`)
export const authLogin = (data) => server.post(`/authorize/login`, data)
export const getInitSet = () => server.get(`/user/settings/init`)
export const postInitSet = (data) => server.post(`/user/settings/init`, data)
export const systemVersion = () => server.get(`/system/version`)
export const bindInfo = () => server.get(`/application/sso/_all`)
export const settingDetail = (scopes) => server.get(`/system/config/${scopes}`)

49
src/api/login.ts Normal file
View File

@ -0,0 +1,49 @@
import server from '@/utils/request'
/**
* 获取验证码配置
* @returns
*/
export const config = () => server.get(`/authorize/captcha/config`)
/**
* 获取验证码图片
* @returns
*/
export const code = () => server.get(`/authorize/captcha/image?width=130&height=30`)
/**
* 登录
* @returns
*/
export const authLogin = (data: any) => server.post(`/authorize/login`, data)
/**
* 查询初始化配置信息
* @returns
*/
export const getInitSet = () => server.get(`/user/settings/init`)
/**
* 创建初始化配置信息
* @returns
*/
export const postInitSet = (data: any) => server.post(`/user/settings/init`, data)
/**
* 查询系统版本信息
* @returns
*/
export const systemVersion = () => server.get(`/system/version`)
/**
* 获取支持的SSO的应用
* @returns
*/
export const bindInfo = () => server.get(`/application/sso/_all`)
/**
* 查询配置信息
* @returns
*/
export const settingDetail = (scopes: string) => server.get(`/system/config/${scopes}`)

29
src/api/notice/config.ts
View File

@ -1,4 +1,4 @@
import { patch, post, get } from '@/utils/request'
import { patch, post, get, remove } from '@/utils/request'
export default {
// 列表
@ -8,5 +8,30 @@ export default {
// 新增
save: (data: any) => post(`/notifier/config`, data),
// 修改
update: (data: any) => patch(`/notifier/config`, data)
update: (data: any) => patch(`/notifier/config`, data),
del: (id: string) => remove(`/notifier/config/${id}`),
getTemplate: (data: any, id: string) => post(`/notifier/template/${id}/_query`, data),
getTemplateDetail: (id: string) => get(`/notifier/template/${id}/detail`),
debug: (data: any, configId: string, templateId: string) => post(`/notifier/${configId}/${templateId}/_send`, data),
getHistory: (data: any, id: string) => post(`/notify/history/config/${id}/_query`, data),
// 获取所有平台用户
getPlatformUsers: () => post(`/user/_query/no-paging`, { paging: false }),
// 钉钉部门
dingTalkDept: (id: string) => get(`/notifier/dingtalk/corp/${id}/departments/tree`),
// 钉钉部门人员
getDingTalkUsers: (configId: string, deptId: string) => get(`/notifier/dingtalk/corp/${configId}/${deptId}/users`),
// 钉钉已经绑定的人员
getDingTalkBindUsers: (id: string) => get(`/user/third-party/dingTalk_dingTalkMessage/${id}`),
// 钉钉绑定用户
dingTalkBindUser: (data: any, id: string) => patch(`/user/third-party/dingTalk_dingTalkMessage/${id}`, data),
// 微信部门
weChatDept: (id: string) => get(`/notifier/wechat/corp/${id}/departments`),
// 微信部门人员
getWeChatUsers: (configId: string, deptId: string) => get(`/notifier/wechat/corp/${configId}/${deptId}/users`),
// 微信已经绑定的人员
getWeChatBindUsers: (id: string) => get(`/user/third-party/weixin_corpMessage/${id}`),
// 微信绑定用户
weChatBindUser: (data: any, id: string) => patch(`/user/third-party/weixin_corpMessage/${id}`, data),
// 解绑
unBindUser: (data: any, id: string) => post(`/user/third-party/${id}/_unbind`, data)
}

19
src/api/notice/template.ts
View File

@ -1,4 +1,5 @@
import { patch, post, get } from '@/utils/request'
import { patch, post, get, remove } from '@/utils/request'
import { BindConfig } from '@/views/notice/Template/types'
export default {
// 列表
@ -8,5 +9,19 @@ export default {
// 新增
save: (data: any) => post(`/notifier/template`, data),
// 修改
update: (data: any) => patch(`/notifier/template`, data)
update: (data: any) => patch(`/notifier/template`, data),
del: (id: any) => remove(`/notifier/template/${id}`),
getConfig: (data: any) => post<BindConfig>(`/notifier/config/_query/no-paging?paging=false`, data),
getTemplateDetail: (id: string) => get(`/notifier/template/${id}/detail`),
debug: (data: any, configId: string, templateId: string) => post(`/notifier/${configId}/${templateId}/_send`, data),
getHistory: (data: any, id: string) => post(`/notify/history/template/${id}/_query`, data),
// 钉钉/微信, 根据配置获取部门和用户
getDept: (type: string, id: string) => get(`/notifier/${type}/corp/${id}/departments`),
getUser: (type: string, id: string) => get(`/notifier/${type}/corp/${id}/users`),
// 微信获取标签推送
getTags: (id: string) => get(`/notifier/wechat/corp/${id}/tags`),
// 语音/短信获取阿里云模板
getAliTemplate: (id: string) => get(`/notifier/sms/aliyun/${id}/templates`),
// 短信获取签名
getSigns: (id: string) => get(`/notifier/sms/aliyun/${id}/signs`)
}

3
src/components/AIcon/index.tsx
View File

@ -28,7 +28,8 @@ const iconKeys = [
'ExclamationCircleOutlined',
'UploadOutlined',
'MenuUnfoldOutlined',
'MenuFoldOutlined'
'MenuFoldOutlined',
'QuestionCircleOutlined'
]
const Icon = (props: {type: string}) => {

6
src/components/RadioCard/index.vue
View File

@ -25,6 +25,7 @@ interface IOption {
type Emits = {
(e: 'update:modelValue', data: string): void;
(e: 'change') :void
};
const emit = defineEmits<Emits>();
@ -41,7 +42,10 @@ const props = defineProps({
const myValue = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val),
set: (val) => {
emit('update:modelValue', val)
emit('change')
},
});
</script>

65
src/views/notice/Template/Detail/components/Attachments.vue
View File

@ -1,4 +1,4 @@
<!-- webhook请求头可编辑表格 -->
<!-- 附件信息 -->
<template>
<div class="attachment-wrapper">
<div
@ -15,13 +15,16 @@
[TOKEN_KEY]: LocalStore.get(TOKEN_KEY),
}"
:showUploadList="false"
@change="handleChange"
@change="(e) => handleChange(e, item.id)"
>
<upload-outlined />
</a-upload>
</template>
</a-input>
<delete-outlined @click="handleDelete" style="cursor: pointer" />
<delete-outlined
@click="handleDelete(item.id)"
style="cursor: pointer"
/>
</div>
<a-button
@ -62,35 +65,65 @@ const props = defineProps({
},
});
const handleChange = (info: UploadChangeParam) => {
if (info.file.status === 'done') {
const result = info.file.response?.result;
console.log('result: ', result);
}
};
// const fileList = computed({
// get: () => props.attachments.map((m) => ({ id: fileId(), ...m })),
// set: (val) =>
// emit(
// 'update:attachments',
// val.map(({ name, location }) => ({ name, location })),
// ),
// });
const fileList = ref<IAttachments[]>([]);
watch(
() => props.attachments,
(val) => {
fileList.value = val;
fileList.value = val.map((m) => ({
id: fileId(),
...m,
}));
},
{ deep: true },
);
const handleDelete = (id: number) => {
const idx = fileList.value.findIndex((f) => f.id === id);
fileList.value.splice(idx, 1);
emit('update:attachments', fileList.value);
const handleChange = (info: UploadChangeParam, id: string | undefined) => {
if (info.file.status === 'done') {
const targetFileIdx = fileList.value.findIndex((f) => f.id === id);
fileList.value[targetFileIdx].name = info.file.name;
fileList.value[targetFileIdx].location = info.file.response?.result;
emit(
'update:attachments',
fileList.value.map(({ name, location }) => ({ name, location })),
);
}
};
/**
* 删除附件
* @param id
*/
const handleDelete = (id: string | undefined) => {
const idx = fileList.value.findIndex((f) => f.id === id);
fileList.value.splice(idx, 1);
};
/**
* 添加附件
*/
const handleAdd = () => {
fileList.value.push({
id: fileList.value.length,
id: fileId(),
name: '',
location: '',
});
emit('update:attachments', fileList.value);
};
/**
* 附件标识
*/
const fileId = () => String(new Date().getTime() + Math.random() * 9);
</script>
<style lang="less" scoped>

136
src/views/notice/Template/Detail/components/VariableDefinitions.vue Normal file
View File

@ -0,0 +1,136 @@
<!-- 模板内容-变量列表 -->
<template>
<div class="table-wrapper">
<a-table
:columns="columns"
:data-source="dataSource"
bordered
:pagination="false"
>
<template #bodyCell="{ column, text, record }">
<span v-if="column.dataIndex === 'id'">
{{ record[column.dataIndex] }}
</span>
<a-input
v-if="column.dataIndex === 'name'"
v-model:value="record.name"
/>
<a-select
v-if="column.dataIndex === 'type'"
v-model:value="record.type"
@change="handleTypeChange(record)"
>
<a-select-option value="string">字符串</a-select-option>
<a-select-option value="date">时间</a-select-option>
<a-select-option value="double">数字</a-select-option>
</a-select>
<template v-if="column.dataIndex === 'format'">
<span v-if="record.type === 'string'">
{{ record.format }}
</span>
<a-select
v-if="record.type === 'date'"
v-model:value="record.format"
>
<a-select-option value="timestamp">
timestamp
</a-select-option>
<a-select-option value="yyyy-MM-dd">
yyyy-MM-dd
</a-select-option>
<a-select-option value="yyyy-MM-dd HH:mm:ss">
yyyy-MM-dd HH:mm:ss
</a-select-option>
</a-select>
<a-input
v-if="record.type === 'double'"
v-model:value="record.format"
>
<template #suffix>
<a-tooltip
title="格式为：%.xf x代表数字保留的小数位数。当x=0时,代表格式为整数"
>
<AIcon type="QuestionCircleOutlined" />
</a-tooltip>
</template>
</a-input>
</template>
</template>
</a-table>
</div>
</template>
<script setup lang="ts">
import { PropType } from 'vue';
interface IVariable {
id: string;
name: string;
type: string;
format: string;
}
type Emits = {
(e: 'update:variableDefinitions', data: IVariable[]): void;
};
const emit = defineEmits<Emits>();
const props = defineProps({
variableDefinitions: {
type: Array as PropType<IVariable[]>,
default: () => [],
},
});
const columns = [
{
title: '变量',
dataIndex: 'id',
width: 80,
},
{
title: '名称',
dataIndex: 'name',
// width: 160,
},
{
title: '类型',
dataIndex: 'type',
// width: 160,
},
{
title: '格式',
dataIndex: 'format',
width: 150,
},
];
const dataSource = computed({
get: () => props.variableDefinitions,
set: (val) => emit('update:variableDefinitions', val),
});
watch(
() => dataSource.value,
(val) => {
emit('update:variableDefinitions', val);
},
{ deep: true },
);
const handleTypeChange = (record: IVariable) => {
switch (record.type) {
case 'string':
record.format = '%s';
break;
case 'date':
record.format = 'timestamp';
break;
case 'double':
record.format = '%.0f';
break;
}
};
</script>
<style lang="less" scoped></style>

140
src/views/notice/Template/Detail/index.vue
View File

@ -39,6 +39,7 @@
<RadioCard
:options="msgType"
v-model="formData.provider"
@change="getConfigList"
/>
</a-form-item>
<a-form-item
@ -51,11 +52,11 @@
placeholder="请选择绑定配置"
>
<a-select-option
v-for="(item, index) in ROBOT_MSG_TYPE"
v-for="(item, index) in configList"
:key="index"
:value="item.value"
:value="item.id"
>
{{ item.label }}
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
@ -120,8 +121,7 @@
>
<!-- <a-input
v-model:value="
formData.template.markdown
?.title
formData.template.markdown?.title
"
placeholder="请输入标题"
/> -->
@ -246,17 +246,11 @@
</a-form-item>
<a-form-item label="收件人">
<a-select
mode="tags"
:options="[]"
v-model:value="formData.template.sendTo"
placeholder="请选择收件人"
>
<a-select-option
v-for="(item, index) in ROBOT_MSG_TYPE"
:key="index"
:value="item.value"
>
{{ item.label }}
</a-select-option>
</a-select>
/>
</a-form-item>
<a-form-item label="附件信息">
<Attachments
@ -418,6 +412,34 @@
</div>
</a-form-item>
</template>
<a-form-item
label="模版内容"
v-if="
formData.type !== 'sms' &&
formData.type !== 'webhook'
"
>
<a-textarea
v-model:value="formData.template.message"
:maxlength="200"
:rows="5"
placeholder="变量格式:${name};
示例:尊敬的${name},${time}有设备触发告警,请注意处理"
/>
</a-form-item>
<a-form-item
label="变量列表"
v-if="
formData.variableDefinitions &&
formData.variableDefinitions.length
"
>
<VariableDefinitions
v-model:variableDefinitions="
formData.variableDefinitions
"
/>
</a-form-item>
<a-form-item label="说明">
<a-textarea
v-model:value="formData.description"
@ -462,7 +484,8 @@ import {
import templateApi from '@/api/notice/template';
import Doc from './doc/index';
import MonacoEditor from '@/components/MonacoEditor/index.vue';
import Attachments from './components/Attachments.vue'
import Attachments from './components/Attachments.vue';
import VariableDefinitions from './components/VariableDefinitions.vue';
const router = useRouter();
const route = useRoute();
@ -500,12 +523,14 @@ watch(
msgType.value = MSG_TYPE[val];
formData.value.provider = msgType.value[0].value;
console.log('formData.value.template: ', formData.value.template);
// console.log('formData.value.template: ', formData.value.template);
getConfigList();
},
);
computed(() => {
console.log('formData.value.type: ', formData.value.type);
// console.log('formData.value.type: ', formData.value.type);
Object.assign(
formData.value.template,
TEMPLATE_FIELD_MAP[formData.value.type][formData.value.provider],
@ -547,11 +572,42 @@ const { resetFields, validate, validateInfos, clearValidate } = useForm(
watch(
() => formData.value.type,
() => {
formData.value.variableDefinitions = [];
clearValidate();
},
{ deep: true },
);
watch(
() => formData.value.template.message,
(val) => {
if (!val) return;
// 已经存在的变量
const oldKey = formData.value.variableDefinitions?.map((m) => m.id);
// 正则提取${}里面的值
const pattern = /(?<=\$\{).*?(?=\})/g;
const titleList = val.match(pattern)?.filter((f) => f);
const newKey = [...new Set(titleList)];
const result = newKey?.map((m) =>
oldKey.includes(m)
? formData.value.variableDefinitions.find(
(item) => item.id === m,
)
: {
id: m,
name: '',
type: 'string',
format: '%s',
},
);
formData.value.variableDefinitions = result;
},
{ deep: true },
);
/**
* 获取详情
*/
const getDetail = async () => {
const res = await templateApi.detail(route.params.id as string);
// console.log('res: ', res);
@ -560,6 +616,20 @@ const getDetail = async () => {
};
// getDetail();
/**
* 获取绑定配置
*/
const configList = ref();
const getConfigList = async () => {
const terms = [
{ column: 'type$IN', value: formData.value.type },
{ column: 'provider', value: formData.value.provider },
];
const { result } = await templateApi.getConfig({ terms });
configList.value = result;
};
getConfigList();
/**
* 表单提交
*/
@ -567,25 +637,35 @@ const btnLoading = ref<boolean>(false);
const handleSubmit = () => {
validate()
.then(async () => {
console.log('formData.value: ', formData.value);
// console.log('formData.value: ', formData.value);
btnLoading.value = true;
// let res;
// if (!formData.value.id) {
// res = await templateApi.save(formData.value);
// } else {
// res = await templateApi.update(formData.value);
// }
// // console.log('res: ', res);
// if (res?.success) {
// message.success('保存成功');
// router.back();
// }
btnLoading.value = false;
let res;
if (!formData.value.id) {
res = await templateApi.save(formData.value);
} else {
res = await templateApi.update(formData.value);
}
// console.log('res: ', res);
if (res?.success) {
message.success('保存成功');
router.back();
}
})
.catch((err) => {
console.log('err: ', err);
btnLoading.value = false;
});
};
// test
watch(
() => formData.value,
(val) => {
console.log('formData.value: ', val);
},
{ deep: true },
);
// test
</script>
<style lang="less" scoped>

47
src/views/notice/Template/types.d.ts vendored
View File

@ -7,7 +7,7 @@ export interface IHeaders {
interface IAttachments {
location: string;
name: string;
id?: number;
id?: string;
}
interface IVariableDefinitions {
id: string;
@ -16,6 +16,17 @@ interface IVariableDefinitions {
format: string;
}
interface IMarkDown {
text: string;
title: string;
}
interface ILink {
title: string;
picUrl: string;
messageUrl: string;
text: string;
}
export type TemplateFormData = {
template: {
// 钉钉消息
@ -23,16 +34,8 @@ export type TemplateFormData = {
message?: string;
// 钉钉机器人
messageType?: string;
markdown?: {
text: string;
title: string;
};
link?: {
title: string;
picUrl: string;
messageUrl: string;
text: string;
};
markdown?: IMarkDown;
link?: ILink;
// 微信
// agentId?: string;
// message?: string;
@ -71,4 +74,24 @@ export type TemplateFormData = {
creatorId?: string;
createTime?: number;
configId?: string;
};
};
// 绑定配置类型
export type config = {
host: string;
password: string;
port: number;
sender: string;
ssl: boolean;
username: string;
}
export type BindConfig = {
configuration: config;
createTime: number
creatorId: string;
id: string;
maxRetryTimes: number;
name: string;
provider: string;
type: string
}

86
src/views/user/Login/index.vue
View File

@ -83,19 +83,20 @@
]"
>
<a-input
class="login-code-input"
v-model:value="form.verifyCode"
autocomplete="off"
:maxlength="64"
placeholder="请输入验证码"
></a-input>
<div class="login-code">
<img
:src="codeUrl"
@click="getCode()"
class="login-code-img"
/>
</div>
>
<template #addonAfter>
<div>
<img
:src="codeUrl"
@click="getCode()"
/>
</div>
</template>
</a-input>
</a-form-item>
<a-form-item
name="remember"
@ -103,7 +104,14 @@
>
<a-checkbox
v-model:checked="form.remember"
>记住密码</a-checkbox
@change="
() =>
(form.expires =
form.remember
? -1
: 3600000)
"
>记住我</a-checkbox
>
</a-form-item>
<a-form-item>
@ -180,7 +188,6 @@ import {
bindInfo,
settingDetail,
} from '@/api/login';
import Cookies from 'js-cookie';
import { useUserInfo } from '@/store/userInfo';
import { LocalStore } from '@/utils/comm';
import { BASE_API_PATH, TOKEN_KEY, Version_Code } from '@/utils/variable';
@ -220,34 +227,24 @@ iconMap.set('dingtalk-ent-app', getImage('/bind/dingtalk.png'));
iconMap.set('wechat-webapp', getImage('/bind/wechat-webapp.png'));
const onFinish = async () => {
form.remember
? Cookies.set('user', encodeURIComponent(JSON.stringify(form)), {
expires: 7,
})
: Cookies.remove('user');
Cookies.set('username', form.username, { expires: 30 });
try {
loading.value = true;
const res: any = await authLogin(form);
loading.value = false;
if (res.success) {
store.$patch({
...res.result,
username: form.username,
});
LocalStore.set(TOKEN_KEY, res?.result.token);
// if (res.result.username === 'admin') {
// const resp: any = await getInitSet();
// if (resp.status === 200 && !resp.result.length) {
// window.location.href = '/#/init-home';
// return;
// }
// }
// window.location.href = '/';
const resp: any = await getInitSet();
if (resp.success) {
router.push('/demo');
if (res.result.username === 'admin') {
const resp: any = await getInitSet();
if (resp.status === 200 && !resp.result.length) {
window.location.href = '/#/init-home';
return;
}
}
window.location.href = '/';
}
} catch (error) {
form.verifyCode = '';
@ -269,14 +266,6 @@ const getCode = async () => {
}
};
const getCookie = () => {
// form.username = Cookies.get('username');
if (!Cookies.get('user')) return;
const user = JSON.parse(decodeURIComponent(Cookies.get('user')));
form.username = user.username;
form.password = user.password;
form.remember = user.remember || false;
};
const getOpen = () => {
LocalStore.removeAll();
@ -292,7 +281,7 @@ const getOpen = () => {
}
}
});
settingDetail('front').then((res) => {
settingDetail('front').then((res: any) => {
if (res.status === 200) {
const ico: any = document.querySelector('link[rel="icon"]');
ico.href = res.result.ico;
@ -337,7 +326,6 @@ watch(
getOpen();
getCode();
getCookie();
screenRotation(screenWidth.value, screenHeight.value);
</script>
@ -470,23 +458,9 @@ screenRotation(screenWidth.value, screenHeight.value);
}
.verifyCode {
.login-code-input {
width: 70%;
float: left;
}
.login-code {
width: 30%;
height: 32px;
float: left;
background-color: #e4e6e7;
img {
cursor: pointer;
vertical-align: middle;
}
.login-code-img {
width: 100%;
height: 100%;
}
img {
cursor: pointer;
// vertical-align: middle;
}
}
}