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

Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

This commit is contained in:
blp 2023-01-31 18:09:49 +08:00
parent 4dd78fbd63 16c320802e
commit 09eb1c3a2a
20 changed files with 511 additions and 312 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/device/product.ts
View File

@ -108,7 +108,7 @@ export const deleteProduct = (id: string) => server.patch(`/device-product/${id}
* 检测产品Id唯一性
* @param id 产品ID
*/
export const queryProductId = (id: string) => server.post(`/device-product/${id}/exists`)
export const queryProductId = (id: string) => server.get(`/device-product/${id}/exists`)
/**
* 保存产品
* @param data 产品信息

2
src/api/initHome.ts
View File

@ -1,7 +1,7 @@
import server from '@/utils/request';
// 更新全部菜单
export const updateMenus = (data: any) => server.path(`/menu/iot/_all`, data)
export const updateMenus = (data: any) => server.patch(`/menu/iot/_all`, data)
// 添加角色
export const addRole = (data: any) => server.post(`/role`, data)

7
src/components/CardBox/index.vue
View File

@ -231,6 +231,13 @@ const handleClick = () => {
:deep(.card-item-content-title) {
cursor: pointer;
font-size: 16px;
font-weight: 700;
color: @primary-color;
width: calc(100% - 100px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
:deep(.card-item-heard-name) {

3
src/components/Layout/BasicLayoutPage.vue
View File

@ -21,6 +21,7 @@
import { ProLayout } from '@/components/Layout'
import DefaultSetting from '../../../config/config'
import { useMenuStore } from '@/store/menu'
import { clearMenuItem } from 'components/Layout/utils'
type StateType = {
collapsed: boolean
@ -39,7 +40,7 @@ const layoutConf = reactive({
siderWidth: DefaultSetting.layout.siderWidth,
logo: DefaultSetting.layout.logo,
title: DefaultSetting.layout.title,
menuData: menu.menus,
menuData: clearMenuItem(menu.siderMenus),
});
const state = reactive<StateType>({

2
src/components/Layout/components/Header/index.tsx
View File

@ -32,7 +32,7 @@ export const HeaderView = defineComponent({
height: `${headerHeight.value}px`,
lineHeight: `${headerHeight.value}px`,
width: `100%`,
background: 'transparent'
}}
/>
<Layout.Header

4
src/components/Layout/components/SiderMenu/SiderMenu.less
View File

@ -13,4 +13,8 @@
flex-direction: column;
height: 100%;
}
.ant-menu-inline {
background: transparent;
}
}

1
src/components/MonacoEditor/index.vue
View File

@ -50,6 +50,7 @@ onMounted(() => {
automaticLayout: true,
scrollBeyondLastLine: false,
theme: props.theme, // 主题色: vs(默认高亮), vs-dark(黑色), hc-black(高亮黑色)
formatOnPaste: true,
});
instance.onDidChangeModelContent(() => {

11
src/main.ts
View File

@ -1,17 +1,14 @@
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import components from './components'
import router from './router'
import './style.less'
import 'ant-design-vue/es/notification/style/css';
import Antd from 'ant-design-vue/es'
const app = createApp(App)
app.use(store)
app.use(router)
app.use(components)
app.use(Antd)
app.mount('#app')
.use(router)
.use(components)
.mount('#app')

21
src/router/index.ts
View File

@ -3,6 +3,8 @@ import menus, { LoginPath } from './menu'
import { cleanToken, getToken } from '@/utils/comm'
import { useUserInfo } from '@/store/userInfo'
import { useSystem } from '@/store/system'
import NotFindPage from '@/views/404.vue'
import { useMenuStore } from 'store/menu'
const router = createRouter({
history: createWebHashHistory(),
@ -27,22 +29,23 @@ router.beforeEach((to, from, next) => {
} else {
const userInfo = useUserInfo()
const system = useSystem()
const menu = useMenuStore()
if (!userInfo.userInfos.username) {
if (!menu.menuData.length) {
userInfo.getUserInfo().then(() => {
system.getSystemVersion().then((menuData: any[]) => {
menuData.forEach(r => {
router.addRoute('main', r)
router.addRoute('base', r)
})
const redirect = decodeURIComponent((from.query.redirect as string) || to.path)
if(to.path === redirect) {
next({ ...to, replace: true })
} else {
next({ path: redirect })
}
router.addRoute('base',{
path: '/:pathMatch(.*)',
name: 'error',
component: () => NotFindPage
})
next({ ...to, replace: true })
})
}).catch(() => {
console.log('userInfo', userInfo)
cleanToken()
next({ path: LoginPath })
})

141
src/router/menu.ts
View File

@ -1,24 +1,7 @@
export const LoginPath = '/login'
export default [
// {
// path: '/',
// redirect: LoginPath
// },
// {
// path: '/init',
// component: () => import('@/view/InitPage.vue')
// },
// {
// path: LoginPath,
// name: 'login',
// component: () => import('@/view/Login/index.vue')
// },
// {
// path: '/initsetting',
// component: () => import('@/view/Login/initSet.vue')
// }
{ path: '/*', redirect: '/'},
// start: 测试用, 可删除
{
path: '/login',
@ -32,10 +15,6 @@ export default [
path: '/account/center/bind',
component: () => import('@/views/account/Center/bind/index.vue')
},
{
path: '/iot/home',
component: () => import('@/views/home/index.vue')
},
{
path: '/table',
component: () => import('@/views/demo/table/index.vue')
@ -48,129 +27,13 @@ export default [
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: 测试用, 可删除
// 设备管理
{
path: '/device/instance',
component: () => import('@/views/device/Instance/index.vue')
},
{
// path: '/device/Instance/detail/:id',
// component: () => import('@/views/device/Instance/detail.vue')
path: '/device/instance/detail/:id',
component: () => import('@/views/device/Instance/Detail/index.vue')
},
// link 运维管理
{
path: '/link/log',
component: () => import('@/views/link/Log/index.vue')
},
{
path: '/link/certificate',
component: () => import('@/views/link/Certificate/index.vue')
},
{
path: '/link/certificate/detail/:type/:id',
component: () => import('@/views/link/Certificate/Detail/index.vue')
},
{
path: '/link/accessConfig',
component: () => import('@/views/link/AccessConfig/index.vue')
},
{
path: '/link/accessConfig/detail/add',
component: () => import('@/views/link/AccessConfig/Detail/index.vue')
},
// system 系统管理
{
path:'/system/Basis',
component: ()=>import('@/views/system/Basis/index.vue')
},
{
path:'/system/api',
component: ()=>import('@/views/system/apiPage/index.vue')
},
{
path:'/system/Role',
component: ()=>import('@/views/system/Role/index.vue')
},
{
path:'/system/Role/detail/:id',
component: ()=>import('@/views/system/Role/Detail/index.vue')
},
{
path:'/system/Permission',
component: ()=>import('@/views/system/Permission/index.vue')
},
{
path:'/system/Menu',
component: ()=>import('@/views/system/Menu/index.vue')
},
{
path:'/system/Menu/detail/:id',
component: ()=>import('@/views/system/Menu/Detail/index.vue')
},
// 初始化
{
path: '/init-home',
component: () => import('@/views/init-home/index.vue')
},
// 物联卡 iot-card
{
path: '/iot-card/Home',
component: () => import('@/views/iot-card/Home/index.vue')
},
{
path: '/iot-card/Dashboard',
component: () => import('@/views/iot-card/Dashboard/index.vue')
},
{
path: '/iot-card/CardManagement',
component: () => import('@/views/iot-card/CardManagement/index.vue')
},
{
path: '/iot-card/CardManagement/Detail',
component: () => import('@/views/iot-card/CardManagement/Detail/index.vue')
},
{
path: '/iot-card/Recharge',
component: () => import('@/views/iot-card/Recharge/index.vue')
},
// 北向输出
{
path: '/northbound/DuerOS',
component: () => import('@/views/northbound/DuerOS/index.vue')
},
{
path: '/northbound/AliCloud',
component: () => import('@/views/northbound/AliCloud/index.vue')
},
// 产品分类
{
path: '/iot/device/Category',
component: () => import('@/views/device/Category/index.vue')
} ,
// 产品
{
path: '/iot/device/Product',
component: () => import('@/views/device/Product/index.vue')
}
]

10
src/store/menu.ts
View File

@ -1,11 +1,14 @@
import { defineStore } from "pinia";
import { queryOwnThree } from '@/api/system/menu'
import { filterAsnycRouter } from '@/utils/menu'
import { cloneDeep } from 'lodash-es'
export const useMenuStore = defineStore({
id: 'menu',
state: () => ({
menus: {},
menuData: [],
siderMenus: [],
menusKey: []
}),
getters: {
@ -51,7 +54,8 @@ export const useMenuStore = defineStore({
];
const resp = await queryOwnThree({ paging: false, terms: params })
if (resp.success) {
const menus = filterAsnycRouter(resp.result)
const silderMenus = filterAsnycRouter(cloneDeep(resp.result))
const menus = filterAsnycRouter(cloneDeep(resp.result))
menus.push({
path: '/',
redirect: menus[0]?.path,
@ -59,7 +63,9 @@ export const useMenuStore = defineStore({
hideInMenu: true
}
})
this.menus = menus
this.menuData = menus
this.siderMenus = silderMenus
console.log('silderMenus', silderMenus)
res(menus)
}
})

169
src/utils/menu.ts
View File

@ -1,11 +1,99 @@
const pagesComponent = import.meta.glob('../views/system/**/*.vue', { eager: true });
const pagesComponent = import.meta.glob('../views/**/*.vue', { eager: true });
import { BlankLayoutPage, BasicLayoutPage } from 'components/Layout'
type ExtraRouteItem = {
code: string
name: string
url?: string
}
/**
* 权限信息
*/
export type PermissionInfo = {
permission: string;
actions: string[];
};
/**
* 按钮信息
*/
export type MenuButtonInfo = {
id: string;
name: string;
permissions: PermissionInfo;
createTime: number;
describe?: string;
options: Record<string, any>;
};
export type MenuItem = {
id: string;
/**
* 名称
*/
name: string;
/**
* 编码
*/
code: string;
/**
* 所属应用
*/
application: string;
/**
* 描述
*/
describe: string;
/**
* url，路由
*/
url: string;
/**
* 图标
*/
icon: string;
/**
* 状态, 0为禁用，1为启用
*/
status: number;
/**
* 绑定权限信息
*/
permissions: PermissionInfo[];
/**
* 按钮定义信息
*/
buttons: MenuButtonInfo[];
/**
* 其他配置信息
*/
options: Record<string, any>;
/**
* 父级ID
*/
parentId: string;
/**
* 树结构路径
*/
path: string;
/**
* 排序序号
*/
sortIndex: number;
/**
* 树层级
*/
level: number;
createTime: number;
redirect?: string;
children?: MenuItem[];
accessSupport?: { text: string; value: string };
appId?: string; //应用id
isShow?: boolean;
meta?: {
title?: string
icon?: string
[key: string]: any
},
component?: any
};
// 额外子级路由
const extraRouteObj = {
'media/Cascade': {
@ -59,53 +147,82 @@ const extraRouteObj = {
const resolveComponent = (name: any) => {
// TODO 暂时用system进行测试
const importPage = pagesComponent[`../views/${name}/index.vue`];
// if (!importPage) {
// throw new Error(`Unknown page ${name}. Is it located under Pages with a .vue extension?`);
// }
if (!importPage) {
console.warn(`Unknown page ${name}. Is it located under Pages with a .vue extension?`)
}
//@ts-ignore
return !importPage ? BlankLayoutPage : importPage.default
// return importPage.default
return !!importPage ? importPage.default : undefined
}
const findChildrenRoute = (code: string, url: string): ExtraRouteItem[] => {
const findChildrenRoute = (code: string, url: string): MenuItem[] => {
if (extraRouteObj[code]) {
return extraRouteObj[code].children.map((route: ExtraRouteItem) => {
return extraRouteObj[code].children.map((route: MenuItem) => {
return {
url: `${url}/${route.code}`,
code: route.code,
name: route.name
name: route.name,
isShow: false
}
})
}
return []
}
const findDetailRouteItem = (code: string, url: string): Partial<MenuItem> | null => {
const detailComponent = resolveComponent(`${code}/Detail`)
if (detailComponent) {
return {
url: `${url}/Detail/:id`,
component: detailComponent,
name: '详情信息',
isShow: false
}
}
return null
}
const findDetailRoutes = (routes: any[]): any[] => {
const newRoutes: any[] = []
routes.forEach((route: any) => {
newRoutes.push(route)
const detail = findDetailRouteItem(route.code, route.url)
if (detail) {
newRoutes.push(detail)
}
})
return newRoutes
}
export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level = 1) {
return asyncRouterMap.map((route: any) => {
route.path = `${route.url}`
route.meta = {
icon: route.icon,
title: route.name
title: route.name,
hideInMenu: route.isShow === false
}
// 查看是否有隐藏子路由
route.children = route.children && route.children.length ? [...route.children, ...findChildrenRoute(route.code, route.url)] : findChildrenRoute(route.code, route.url)
// TODO 查看是否具有详情页
// route.children = [...route.children, ]
const extraChildren = findChildrenRoute(route.code, route.url)
route.children = route.children && route.children.length ? [...route.children, ...extraChildren] : extraChildren
route.children = findDetailRoutes(route.children)
if (route.children && route.children.length) {
route.component = () => level === 1 ? BasicLayoutPage : BlankLayoutPage
// TODO 查看是否具有详情页
route.children = filterAsnycRouter(route.children, `${parentCode}/${route.code}`, level + 1)
route.redirect = route.children[0].url
const showChildren = route.children.some((r: any) => !r.meta.hideInMenu)
if (showChildren) {
route.component = () => level === 1 ? BasicLayoutPage : BlankLayoutPage
route.redirect = route.children[0].url
} else {
route.component = resolveComponent(route.code) || BlankLayoutPage;
}
} else {
route.component = resolveComponent(route.code);
route.component = resolveComponent(route.code) || BlankLayoutPage;
}
console.log(route.code, route)
delete route.name
return route
})
}

8
src/utils/regular.ts
View File

@ -1,4 +1,10 @@
// 用于校验 url
export const urlReg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
export const isUrl = (path: string): boolean => urlReg.test(path)
export const isUrl = (path: string): boolean => urlReg.test(path)
// 用于校验只允许输入英文或者数字或者-或者_
export const inputReg = /^[a-zA-Z0-9_\-]+$/
export const isInput = (value: string) => inputReg.test(value)

14
src/views/404.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<a-result status="404" title="404" sub-title="Sorry, the page you visited does not exist.">
</a-result>
</template>
<script>
export default {
name: '404.vue'
}
</script>
<style scoped>
</style>

1
src/views/device/Instance/index.vue
View File

@ -1,4 +1,5 @@
<template>
<Search :columns="columns" target="device-instance" />
<JTable
ref="instanceRef"
:columns="columns"

317
src/views/device/Product/Save/index.vue
View File

@ -11,12 +11,21 @@
cancelText="取消"
v-bind="layout"
width="650px"
:confirmLoading="loading"
>
<div style="margin-top: 10px">
<a-form :layout="'vertical'">
<a-form
:layout="'vertical'"
:model="form"
:rules="rules"
ref="formRef"
>
<a-row type="flex">
<a-col flex="180px">
<a-form-item>
<a-form-item name="photoUrl">
<JUpload v-model="form.photoUrl" />
</a-form-item>
<!-- <a-form-item>
<div class="upload-image-warp-logo">
<div class="upload-image-border-logo">
<a-upload
@ -80,110 +89,105 @@
</div>
</div>
</div>
</a-form-item>
</a-form-item> -->
</a-col>
<a-col flex="auto">
<a-form-item>
<a-form-item name="id">
<template #label>
<span>ID</span>
<a-tooltip
title="若不填写，系统将自动生成唯一ID"
>
<img
class="img-style"
:src="getImage('/init-home/mark.png')"
<AIcon
type="QuestionCircleOutlined"
style="margin-left: 2px"
/>
</a-tooltip>
</template>
<a-input
v-model:value="modelRef.id"
v-model:value="form.id"
placeholder="请输入ID"
:disabled="disabled"
/>
</a-form-item>
<a-form-item label="名称">
<a-form-item label="名称" name="name">
<a-input
v-model:value="modelRef.name"
v-model:value="form.name"
placeholder="请输入名称"
/>
</a-form-item>
</a-col>
</a-row>
<a-form-item label="产品分类">
<a-form-item label="产品分类" name="classifiedId">
<a-tree-select
showSearch
v-model:value="modelRef.productId"
v-model:value="form.classifiedId"
placeholder="请选择产品分类"
:tree-data="treeList"
@change="valueChange"
:fieldNames="{ label: 'name', value: 'id' }"
:filterTreeNode="
(v, option) => filterSelectNode(v, option)
"
>
<template> </template>
</a-tree-select>
</a-form-item>
<a-form-item label="设备类型">
<a-row :span="24" :gutter="20">
<a-col
:span="8"
v-for="item in deviceList"
:key="item.value"
>
<ChooseCard
:value="item"
v-bind="item"
@click="handleClick"
:active="_selectedRowKeys.includes(item.value)"
<a-form-item label="设备类型" name="deviceType">
<a-radio-group
v-model:value="form.deviceType"
style="width: 100%"
@change="changeValue"
>
<a-row :span="24" :gutter="10">
<a-col
:span="8"
v-for="item in deviceList"
:key="item.value"
>
<template #img>
<slot name="img">
<img
v-if="item.value === 'device'"
:src="
getImage('/device-type-1.png')
"
/>
<img
v-if="
item.value === 'childrenDevice'
"
:src="
getImage('/device-type-2.png')
"
/>
<img
v-if="item.value === 'gateway'"
:src="
getImage(
'/device/device-type-3.png',
)
"
/>
</slot>
</template>
<template #content>
<span
class="card-style"
:style="
_selectedRowKeys.includes(
item.value,
)
? 'color: #10239e'
: ''
"
>{{
item.value === 'device'
? '直连设备'
: item.value ===
'childrenDevice'
? '网关子设备'
: item.value === 'gateway'
? '网关设备'
: ''
}}</span
<div class="button-style">
<a-radio-button
:value="item.value"
style="height: 100%; width: 100%"
:disabled="disabled"
>
</template>
</ChooseCard>
</a-col>
</a-row>
<div class="card-content">
<a-row :gutter="20">
<a-col :span="10">
<!-- 图片 -->
<div class="img-style">
<img :src="item.logo" />
</div>
</a-col>
<a-col :span="14">
<span class="card-style">
{{ item.label }}
</span>
</a-col>
</a-row>
<!-- 勾选 -->
<div
v-if="
form.deviceType ===
item.value
"
class="checked-icon"
>
<div>
<CheckOutlined />
</div>
</div>
</div>
</a-radio-button>
</div>
</a-col>
</a-row>
</a-radio-group>
</a-form-item>
<a-form-item label="说明">
<a-form-item label="说明" name="describe">
<a-textarea
v-model:value="modelRef.describe"
v-model:value="form.describe"
placeholder="请输入说明"
/>
</a-form-item>
@ -193,12 +197,21 @@
</template>
<script lang="ts" setup>
import { queryTree } from '@/api/device/category';
import { category } from '@/api/device/product';
import { Form } from 'ant-design-vue';
import { getImage } from '@/utils/comm.ts';
import { message } from 'ant-design-vue';
import ChooseCard from '../ChooseCard/index.vue';
import { filterTreeSelectNode, filterSelectNode } from '@/utils/comm';
import { FILE_UPLOAD } from '@/api/comm';
import { isInput } from '@/utils/regular';
import type { Rule } from 'ant-design-vue/es/form';
import { queryProductId } from '@/api/device/product';
import {
SearchOutlined,
CheckOutlined,
DeleteOutlined,
} from '@ant-design/icons-vue';
const emit = defineEmits(['close', 'save']);
const props = defineProps({
@ -211,9 +224,12 @@ const props = defineProps({
default: 0,
},
});
const loading = ref<boolean>(false);
const treeList = ref<Record<string, any>[]>([]);
const visible = ref(false);
const logoLoading = ref(false);
const visible = ref<boolean>(false);
const logoLoading = ref<boolean>(false);
const formRef = ref();
const disabled = ref<boolean>(false);
const useForm = Form.useForm;
const _selectedRowKeys = ref([]);
const photoValue = ref('/images/device-product.png');
@ -229,42 +245,115 @@ const deviceList = ref([
{
label: '直连设备',
value: 'device',
logo: getImage('/device-type-1.png'),
},
{
label: '网关子设备',
value: 'childrenDevice',
logo: getImage('/device-type-2.png'),
},
{
label: '网关设备',
value: 'gateway',
logo: getImage('/device/device-type-3.png'),
},
]);
const modelRef = reactive({
const form = reactive({
id: '',
name: '',
classifiedId: '',
classifiedName: '',
deviceType: '',
describe: '',
photoUrl: '',
photoUrl: getImage('/device/instance/device-card.png'),
});
/**
* 校验id
*/
const validateInput = async (_rule: Rule, value: string) => {
if (value) {
if (!isInput(value)) {
return Promise.reject('请输入英文或者数字或者-或者_');
} else {
const res = await queryProductId(value);
if (res.status === 200 && res.result) {
return Promise.reject('ID重复');
} else {
return Promise.resolve();
}
}
} else {
return Promise.resolve();
}
};
/**
* 校验是否选择设备类型
*/
const validateDeviceType = async (_rule: Rule, value: string) => {
if (!value) {
return Promise.reject('请选择设备类型');
} else {
return Promise.resolve();
}
};
const rules = reactive({
id: [{ validator: validateInput, trigger: 'blur' }],
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
deviceType: [
{
required: true,
validator: validateDeviceType,
trigger: 'blur',
},
],
});
const valueChange = (value: string, label: string) => {
form.classifiedName = label[0];
};
/**
* 查询产品分类
*/
const queryProductTree = async () => {
category({
paging: false,
}).then((resp) => {
if (resp.status === 200) {
treeList.value = resp.result;
}
});
};
watch(
() => props.isAdd,
() => {
queryTree({ paging: false }).then((resp) => {
if (resp.status === 200) {
treeList.value = resp.result;
}
});
// queryProductTree();
},
{ immediate: true, deep: true },
);
/**
* 显示弹窗
*/
const show = () => {
const show = (data: any) => {
console.log(props.isAdd, '11111');
if (props.isAdd === 2) {
// form.name = data.name;
// form.classifiedId = data.classifiedId;
// form.classifiedName = data.classifiedName;
// form.photoUrl = data.photoUrl || photoValue.value;
// form.deviceType = data.deviceType.value;
// form.describe = form.describe;
// form.id = data.id;
// disabled.value = true;
} else {
// form.name = '';
// form.classifiedId = '';
// form.classifiedName = '';
// form.photoUrl = photoValue.value;
// form.deviceType = '';
// form.describe = '';
// form.id = '';
}
visible.value = true;
};
@ -274,11 +363,18 @@ const show = () => {
const close = () => {
visible.value = false;
};
const { resetFields, validate, validateInfos, clearValidate } = useForm(
form,
rules,
);
/**
* 卡片点击事件
* 提交表单数据
*/
const handleClick = (dt: any) => {
_selectedRowKeys.value = dt;
const submitData = () => {
formRef.value
.validate()
.then(async () => {})
.catch((err: any) => {});
};
/**
* 文件上传之前
@ -306,9 +402,13 @@ const handleChange = (info: any) => {
if (info.file.status === 'done') {
info.file.url = info.file.response?.result;
logoLoading.value = false;
logoLoading.value = info.file.response?.result;
photoValue.value = info.file.response?.result;
}
};
/**
* 初始化
*/
// queryProductTree();
defineExpose({
show: show,
});
@ -316,7 +416,7 @@ defineExpose({
<style scoped lang="less">
.card-style {
position: relative;
top: 8px;
top: 19px;
}
.upload-image-warp-logo {
display: flex;
@ -383,4 +483,37 @@ defineExpose({
}
}
}
.button-style {
background-color: #fff;
height: 66px;
.card-content {
width: 100%;
.img-style {
position: relative;
top: 16px;
}
.checked-icon {
position: absolute;
right: -22px;
bottom: -22px;
z-index: 2;
width: 44px;
height: 44px;
color: #2f54eb;
// background-color: #2f54eb;
transform: rotate(-45deg);
> div {
position: relative;
height: 100%;
transform: rotate(45deg);
background-color: transparent;
}
}
}
// &:hover {
// color: #2f54eb;
// border: 1px solid #2f54eb;
// }
}
</style>

25
src/views/device/Product/index.vue
View File

@ -107,7 +107,7 @@
</template>
</JTable>
<!-- 新增、编辑 -->
<Save ref="saveRef" />
<Save ref="saveRef" :isAdd="isAdd" :title="title" />
</a-card>
</template>
@ -140,6 +140,8 @@ import Save from './Save/index.vue';
/**
* 表格数据
*/
const isAdd = ref<number>(0);
const title = ref<string>('');
const statusMap = new Map();
statusMap.set(1, 'success');
statusMap.set(0, 'error');
@ -187,6 +189,7 @@ const columns = [
];
const _selectedRowKeys = ref<string[]>([]);
const currentForm = ref({});
const onSelectChange = (keys: string[]) => {
_selectedRowKeys.value = [...keys];
@ -205,11 +208,14 @@ const handleClick = (dt: any) => {
}
};
const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
const getActions = (
data: Partial<Record<string, any>>,
type: 'card' | 'table',
): ActionsType[] => {
if (!data) {
return [];
}
return [
const actions = [
{
key: 'view',
text: '查看',
@ -217,6 +223,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
title: '查看',
},
icon: 'EyeOutlined',
onClick: () => {},
},
{
key: 'edit',
@ -226,6 +233,13 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
},
icon: 'EditOutlined',
onClick: () => {
title.value = '编辑';
isAdd.value = 2;
nextTick(() => {
saveRef.value.show(data);
});
},
},
{
key: 'download',
@ -283,10 +297,13 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
icon: 'DeleteOutlined',
},
];
return actions;
};
const add = () => {
saveRef.value.show();
isAdd.value = 1;
title.value = '新增';
saveRef.value.show(currentForm.value);
};
// 筛选

3
src/views/northbound/DuerOS/Save/index.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
123
</template>

2
src/views/northbound/DuerOS/index.vue
View File

@ -148,7 +148,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
}
const add = () => {
message.warn('123')
// router.push(`/northbound/DuerOS/detail/:id`)
}
</script>

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

@ -120,15 +120,15 @@
]
"
>
<!-- <a-input
<a-input
v-model:value="
formData.template.markdown?.title
formData.template.markdown.title
"
placeholder="请输入标题"
/> -->
/>
</a-form-item>
</template>
<!-- <template
<template
v-if="
formData.template.messageType === 'link'
"
@ -141,7 +141,7 @@
>
<a-input
v-model:value="
formData.template.link?.title
formData.template.link.title
"
placeholder="请输入标题"
/>
@ -149,21 +149,40 @@
<a-form-item label="图片链接">
<a-input
v-model:value="
formData.template.link?.picUrl
formData.template.link.picUrl
"
placeholder="请输入图片链接"
/>
>
<template #addonAfter>
<a-upload
name="file"
:action="FILE_UPLOAD"
:headers="{
[TOKEN_KEY]:
LocalStore.get(
TOKEN_KEY,
),
}"
:showUploadList="false"
@change="
(e) => handleChange(e)
"
>
<AIcon type="UploadOutlined" />
</a-upload>
</template>
</a-input>
</a-form-item>
<a-form-item label="内容链接">
<a-input
v-model:value="
formData.template.link
?.messageUrl
.messageUrl
"
placeholder="请输入内容链接"
/>
</a-form-item>
</template> -->
</template>
</template>
</template>
<!-- 微信 -->
@ -456,7 +475,7 @@
<script setup lang="ts">
import { getImage } from '@/utils/comm';
import { Form } from 'ant-design-vue';
import { Form, UploadChangeParam } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { IVariableDefinitions, TemplateFormData } from '../types';
import {
@ -475,6 +494,10 @@ import ToUser from './components/ToUser.vue';
import ToOrg from './components/ToOrg.vue';
import ToTag from './components/ToTag.vue';
import { FILE_UPLOAD } from '@/api/comm';
import { LocalStore } from '@/utils/comm';
import { TOKEN_KEY } from '@/utils/variable';
const router = useRouter();
const route = useRoute();
const useForm = Form.useForm;
@ -537,14 +560,6 @@ watch(
},
);
// computed(() => {
// // console.log('formData.value.type: ', formData.value.type);
// Object.assign(
// formData.value.template,
// TEMPLATE_FIELD_MAP[formData.value.type][formData.value.provider],
// );
// });
// 验证规则
const formRules = ref({
type: [{ required: true, message: '请选择通知方式' }],
@ -637,6 +652,15 @@ const getConfigList = async () => {
};
getConfigList();
/**
* link消息类型 图片链接
*/
const handleChange = (info: UploadChangeParam) => {
if (info.file.status === 'done') {
formData.value.template.link.picUrl = info.file.response?.result;
}
};
/**
* 配置选择改变
*/
@ -672,10 +696,12 @@ getSignsList();
*/
const btnLoading = ref<boolean>(false);
const handleSubmit = () => {
if (formData.value.type === 'email') delete formData.value.configId
if (formData.value.type === 'email') delete formData.value.configId;
if (formData.value.template.messageType === 'markdown') delete formData.value.template.link
if (formData.value.template.messageType === 'link') delete formData.value.template.markdown
// console.log('formData.value: ', formData.value);
validate()
.then(async () => {
// console.log('formData.value: ', formData.value);
formData.value.template.ttsCode =
formData.value.template.templateCode;
btnLoading.value = true;
@ -700,13 +726,13 @@ const handleSubmit = () => {
};
// test
watch(
() => formData.value,
(val) => {
console.log('formData.value: ', val);
},
{ deep: true },
);
// watch(
// () => formData.value,
// (val) => {
// console.log('formData.value: ', val);
// },
// { deep: true },
// );
// test
</script>