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

This commit is contained in:
easy 2023-03-14 17:34:48 +08:00
commit 9dff4d7a95
25 changed files with 302 additions and 202 deletions

View File

@ -1 +1,2 @@
ENV=develop
VITE_APP_BASE_API=/api

View File

@ -1 +1,2 @@
ENV=production
VITE_APP_BASE_API=/api

49
plugin/optimize.ts Normal file
View File

@ -0,0 +1,49 @@
import fs from 'fs'
import path from 'path'
const rootPath = path.resolve(__dirname, '../')
function optimizeAntdComponents(moduleName: string): string[] {
const moduleESPath = `${moduleName}/es`
const nodeModulePath = `./node_modules/${moduleESPath}`
const includes: string[] = [moduleESPath]
const folders = fs.readdirSync(
path.resolve(rootPath, nodeModulePath)
)
folders.map(name => {
const folderName = path.resolve(
rootPath,
nodeModulePath,
name
)
let stat = fs.lstatSync(folderName)
if (stat.isDirectory()) {
let styleFolder = path.resolve(folderName, 'style')
if (fs.existsSync((styleFolder))) {
let _stat = fs.lstatSync(styleFolder)
if (_stat.isDirectory()) {
includes.push(`${moduleESPath}/${name}/style`)
}
}
}
})
return includes
}
export function optimizeDeps() {
return {
name: "optimizeDeps",
configResolved: async (config) => {
const components = [
...optimizeAntdComponents('ant-design-vue'),
...optimizeAntdComponents('jetlinks-ui-components')
]
let concat = config.optimizeDeps.include.concat(components)
config.optimizeDeps.include = Array.from(new Set(concat))
console.log(config.optimizeDeps.include)
}
}
}

View File

@ -1,8 +1,13 @@
<template>
<router-view />
<ConfigProvider :locale='zhCN'>
<router-view />
</ConfigProvider>
</template>
<script setup lang="ts">
import { ConfigProvider } from 'jetlinks-ui-components'
import zhCN from 'jetlinks-ui-components/es/locale/zh_CN';
</script>
<style scoped>

View File

@ -0,0 +1,17 @@
const color = {
'processing': '64, 169, 255',
'error': '247, 79, 70',
'success': '74, 234, 220',
'warning': '250, 178, 71',
'default': '63, 73, 96'
}
export const getHexColor = (code: string, pe: number = 0.3) => {
const _color = color[code] || color.default
if (code === 'default') {
pe = 0.1
}
return `rgba(${_color}, ${pe})`
}
export default color

View File

@ -1,12 +1,13 @@
<template>
<j-badge
:status="statusNames ? statusNames[status] : 'default'"
:color="_color"
:text="text"
></j-badge>
</template>
<script setup lang="ts">
// import { StatusColorEnum } from '@/utils/consts.ts';
import { getHexColor } from './color'
const props = defineProps({
text: {
type: String,
@ -26,6 +27,18 @@ const props = defineProps({
* 0: 'error'
* }
*/
statusNames: { type: Object },
statusNames: {
type: Object,
default: () => ({
'success': 'success',
'warning': 'warning',
'error': 'error',
'default': 'default',
})
},
});
const _color = computed(() => {
return getHexColor(props.statusNames[props.status], 1)
})
</script>

View File

@ -29,7 +29,9 @@
<div
v-if="showStatus"
class="card-state"
:class="statusNames ? statusNames[status] : ''"
:style='{
backgroundColor: getHexColor(statusNames[status])
}'
>
<div class="card-state-content">
<BadgeStatus
@ -68,9 +70,10 @@
</div>
</template>
<script setup lang="ts">
<script setup lang="ts" name='CardBox'>
import BadgeStatus from '@/components/BadgeStatus/index.vue';
import type { ActionsType } from '@/components/Table/index.vue';
import { getHexColor } from '../BadgeStatus/color'
import type { ActionsType } from '@/components/Table';
import { PropType } from 'vue';
type EmitProps = {

View File

@ -5,6 +5,7 @@
:request='saveSearchHistory'
:historyRequest='getSearchHistory'
:columns='columns'
:class='props.class'
@search='searchSubmit'
/>
</template>

View File

@ -54,7 +54,7 @@
</div>
</template>
<script lang="ts" setup>
<script lang="ts" setup name='JProUpload'>
import { message, UploadChangeParam, UploadProps } from 'ant-design-vue';
import { FILE_UPLOAD } from '@/api/comm';
import { TOKEN_KEY } from '@/utils/variable';

View File

@ -1,6 +1,6 @@
<!-- 参数类型输入组件 -->
<template>
<div class="wrapper">
<div class="value-item-warp">
<j-select
v-if="typeMap.get(itemType) === 'select'"
v-model:value="myValue"
@ -92,7 +92,7 @@
</div>
</template>
<script setup lang="ts">
<script setup lang="ts" name='ValueItem'>
import { PropType } from 'vue';
import { UploadChangeParam, UploadFile } from 'ant-design-vue';
import { DefaultOptionType } from 'ant-design-vue/lib/select';
@ -102,6 +102,7 @@ import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
import { LocalStore } from '@/utils/comm';
import { ItemData, ITypes } from './types';
import { FILE_UPLOAD } from '@/api/comm';
import { Upload } from 'jetlinks-ui-components'
type Emits = {
(e: 'update:modelValue', data: string | number | boolean): void;

View File

@ -8,7 +8,7 @@ import CardBox from './CardBox/index.vue';
import Search from './Search'
import NormalUpload from './NormalUpload/index.vue'
import FileFormat from './FileFormat/index.vue'
import JProUpload from './JUpload/index.vue'
import JProUpload from './Upload/index.vue'
import { BasicLayoutPage, BlankLayoutPage } from './Layout'
import { PageContainer, AIcon } from 'jetlinks-ui-components'
import Ellipsis from './Ellipsis/index.vue'

View File

@ -4,13 +4,14 @@ import store from './store'
import components from './components'
import router from './router'
import './style.less'
// import jComponents from 'jetlinks-ui-components'
// import 'jetlinks-ui-components/es/style.js'
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
const app = createApp(App)
app.use(store)
.use(router)
.use(components)
// .use(jComponents)
.mount('#app')

View File

@ -178,6 +178,8 @@ const handleClick = async () => {
_emits('save');
}
}
} else {
message.error('暂无对应属性的映射');
}
}
}

View File

@ -1,5 +1,5 @@
<template>
<a-spin :spinning="loading" v-if="_metadata">
<a-spin :spinning="loading" v-if="_metadata.length">
<a-card :bordered="false">
<template #title>
<TitleComponent data="点位映射"></TitleComponent>
@ -7,7 +7,7 @@
<template #extra>
<a-space>
<a-button @click="showModal">批量映射</a-button>
<a-button type="primary" @click="onSave">保存</a-button>
<a-button type="primary" @click="onSave">保存并应用</a-button>
</a-space>
</template>
<a-form ref="formRef" :model="modelRef">
@ -114,7 +114,7 @@
/>
</a-spin>
<a-card v-else>
<JEmpty description="暂无数据,请配置物模型" style="margin: 10% 0" />
<JEmpty description="暂无数据,请配置物模型" style="margin: 10% 0" />
</a-card>
</template>
@ -174,7 +174,7 @@ const form = ref();
const filterOption = (input: string, option: any) => {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const props = defineProps(['productList']);
const props = defineProps(['productList']);
const _emit = defineEmits(['close']);
const instanceStore = useInstanceStore();
let _metadata = ref();
@ -203,31 +203,33 @@ const getChannel = async () => {
const handleSearch = async () => {
loading.value = true;
modelRef.dataSource = _metadata;
getChannel();
if (_metadata && _metadata.length) {
const resp: any = await getEdgeMap(instanceStore.current?.orgId || '', {
deviceId: instanceStore.current.id,
query: {},
}).catch(() => {
modelRef.dataSource = _metadata;
loading.value = false;
});
if (resp.status === 200) {
const array = resp.result?.[0].reduce((x: any, y: any) => {
const metadataId = _metadata.find(
(item: any) => item.metadataId === y.metadataId,
);
if (metadataId) {
Object.assign(metadataId, y);
} else {
x.push(y);
}
return x;
}, _metadata);
modelRef.dataSource = array;
}
}
modelRef.dataSource = _metadata.value;
console.log(modelRef.dataSource);
// if (_metadata.value && _metadata.value.length) {
// console.log(1234);
// const resp: any = await getEdgeMap(instanceStore.current?.orgId || '', {
// deviceId: instanceStore.current.id,
// query: {},
// }).catch(() => {
// modelRef.dataSource = _metadata;
// loading.value = false;
// });
// if (resp.status === 200) {
// const array = resp.result?.[0].reduce((x: any, y: any) => {
// const metadataId = _metadata.find(
// (item: any) => item.metadataId === y.metadataId,
// );
// if (metadataId) {
// Object.assign(metadataId, y);
// } else {
// x.push(y);
// }
// return x;
// }, _metadata);
// modelRef.dataSource = array;
// }
// }
loading.value = false;
};
@ -251,17 +253,13 @@ const onPatchBind = () => {
visible.value = false;
_emit('close');
};
onMounted(() => {
handleSearch();
});
watchEffect(() => {
if (instanceStore.current?.metadata) {
_metadata.value = instanceStore.current?.metadata;
} else {
_metadata.value = {};
}
handleSearch();
});
const onSave = async () => {
form.value = await validate();

View File

@ -70,9 +70,61 @@ const getProductList = async () => {
});
if (res.status === 200) {
productList.value = res.result;
if (props.childData?.id) {
current.value.parentId = props.childData.id;
form.name = props.childData?.name;
form.productId = props.childData?.productId;
selectChange(form.productId);
if (current.value.metadata) {
const metadata = current.value.metadata;
if (metadata && metadata.length !== 0) {
getEdgeMap(current.value.id, {
deviceId: props.childData.id,
query: {},
}).then((res) => {
if (res.status === 200) {
// console.log(res.result)
//
const array = res.result[0]?.reduce(
(x: any, y: any) => {
const metadataId = metadata.find(
(item: any) =>
item.metadataId === y.metadataId,
);
if (metadataId) {
Object.assign(metadataId, y);
} else {
x.push(y);
}
return x;
},
metadata,
);
//
const items = array.filter(
(item: any) => item.metadataName,
);
current.value.metadata = items;
const delList = array
.filter((a: any) => !a.metadataName)
.map((b: any) => b.id);
//
if (delList && delList.length !== 0) {
removeEdgeMap(current.value.id, {
deviceId: props.childData.id,
idList: [...delList],
});
}
}
});
}
}
visible.value = true;
} else {
current.value.parentId = '';
}
}
};
getProductList();
const selectChange = (e: any) => {
if (e) {
visible.value = true;
@ -88,64 +140,8 @@ const selectChange = (e: any) => {
);
current.value.metadata = array;
};
watchEffect(() => {
if (props.childData?.id) {
current.value.parentId = props.childData.id;
form.name = props.childData?.name;
form.productId = props.childData?.productId;
if (props.childData.deriveMetadata) {
const metadata = JSON.parse(
props.childData?.deriveMetadata || {},
)?.properties?.map((item: any) => ({
metadataId: item.id,
metadataName: `${item.name}(${item.id})`,
metadataType: 'property',
name: item.name,
}));
if (metadata && metadata.length !== 0) {
getEdgeMap(current.value.id, {
deviceId: props.childData.id,
query: {},
}).then((res) => {
if (res.status === 200) {
// console.log(res.result)
//
const array = res.result[0]?.reduce(
(x: any, y: any) => {
const metadataId = metadata.find(
(item: any) =>
item.metadataId === y.metadataId,
);
if (metadataId) {
Object.assign(metadataId, y);
} else {
x.push(y);
}
return x;
},
metadata,
);
//
const items = array.filter(
(item: any) => item.metadataName,
);
current.value.metadata = items;
const delList = array
.filter((a: any) => !a.metadataName)
.map((b: any) => b.id);
//
if (delList && delList.length !== 0) {
removeEdgeMap(current.value.id, {
deviceId: props.childData.id,
idList: [...delList],
});
}
}
});
}
}
visible.value = true;
}
onMounted(() => {
getProductList();
});
const validate = async () => {

View File

@ -3,7 +3,7 @@
<SaveChild
v-if="childVisible"
@close-child-save="closeChildSave"
:childData="current"
:childData="_current"
/>
<div v-else>
<Search
@ -43,7 +43,7 @@
"
hasPermission="device/Instance:update"
@click="
current = {};
_current = {};
childVisible = true;
"
>新增并绑定</PermissionButton
@ -123,7 +123,7 @@ import { usePermissionStore } from '@/store/permission';
import SaveChild from './SaveChild/index.vue';
const instanceStore = useInstanceStore();
const { detail } = storeToRefs(instanceStore);
const { detail } = storeToRefs(instanceStore);
const router = useRouter();
const childVisible = ref(false);
const permissionStore = usePermissionStore();
@ -139,7 +139,7 @@ const childDeviceRef = ref<Record<string, any>>({});
const params = ref<Record<string, any>>({});
const _selectedRowKeys = ref<string[]>([]);
const visible = ref<boolean>(false);
const current = ref({});
const _current = ref({});
const columns = [
{
@ -252,7 +252,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
},
icon: 'EditOutlined',
onClick: () => {
current.value = data;
_current.value = data;
childVisible.value = true;
},
},

View File

@ -202,6 +202,7 @@ const handleSearch = async () => {
metadataType: 'property',
name: item.name,
}));
console.log(metadata);
if (_metadata && _metadata.length) {
const resp: any = await getEdgeMap(instanceStore.current?.parentId || '', {
deviceId: instanceStore.current.id,

View File

@ -34,65 +34,72 @@
<j-empty v-if="!deptTreeData.length" />
</j-col>
<j-col :span="20">
<JProTable
<j-button type="primary" @click="handleAutoBind">
自动绑定
</j-button>
<JTable
ref="tableRef"
:columns="columns"
:dataSource="dataSource"
:loading="tableLoading"
model="table"
noPagination
:pagination="{
total: dataSource.length,
current: current,
pageSize: pageSize,
pageSizeOptions: ['12', '24', '48', '96'],
showSizeChanger: true,
showTotal: (total: number, range: number) => `${range[0]} - ${range[1]} 条/总共 ${total}`,
}"
@change="handleTableChange"
>
<template #headerTitle>
<j-button type="primary" @click="handleAutoBind">
自动绑定
</j-button>
</template>
<template #status="slotProps">
<j-space>
<j-badge
:status="slotProps.status.value"
:text="slotProps.status.text"
></j-badge>
</j-space>
</template>
<template #action="slotProps">
<j-space :size="16">
<j-tooltip
v-for="i in getActions(slotProps, 'table')"
:key="i.key"
v-bind="i.tooltip"
>
<j-popconfirm
v-if="i.popConfirm"
v-bind="i.popConfirm"
:disabled="i.disabled"
<template #bodyCell="{ column, record, index }">
<template v-if="column.dataIndex === 'status'">
<j-space>
<j-badge
:status="record.status.value"
:text="record.status.text"
></j-badge>
</j-space>
</template>
<template v-if="column.dataIndex === 'action'">
<j-space :size="16">
<j-tooltip
v-for="i in getActions(record, 'table')"
:key="i.key"
v-bind="i.tooltip"
>
<j-button
<j-popconfirm
v-if="i.popConfirm"
v-bind="i.popConfirm"
:disabled="i.disabled"
>
<j-button
:disabled="i.disabled"
style="padding: 0"
type="link"
><AIcon :type="i.icon"
/></j-button>
</j-popconfirm>
<j-button
style="padding: 0"
type="link"
><AIcon :type="i.icon"
/></j-button>
</j-popconfirm>
<j-button
style="padding: 0"
type="link"
v-else
@click="
i.onClick && i.onClick(slotProps)
"
>
<j-button
:disabled="i.disabled"
style="padding: 0"
type="link"
><AIcon :type="i.icon"
/></j-button>
</j-button>
</j-tooltip>
</j-space>
v-else
@click="
i.onClick && i.onClick(record)
"
>
<j-button
:disabled="i.disabled"
style="padding: 0"
type="link"
><AIcon :type="i.icon"
/></j-button>
</j-button>
</j-tooltip>
</j-space>
</template>
</template>
</JProTable>
</JTable>
</j-col>
</j-row>
</j-modal>
@ -184,23 +191,10 @@ const getDepartment = async () => {
);
}
// deptTreeData.value = arrayToTree(_result, _result[0]?.parentId);
deptTreeData.value = _result;
deptId.value = _result[0]?.id;
};
/**
* 扁平数据转树形结构
*/
// const arrayToTree = (arr: any, pid: string | number) => {
// return arr
// .filter((item: any) => item.parentId === pid)
// .map((item: any) => ({
// ...item,
// children: arrayToTree(arr, item.id),
// }));
// };
/**
* 部门点击
*/
@ -230,6 +224,7 @@ const columns = [
},
{
title: '操作',
dataIndex: 'action',
key: 'action',
scopedSlots: true,
},
@ -285,7 +280,7 @@ const handleAutoBind = () => {
thirdPartyUserId: i.thirdPartyUserId,
};
});
// console.log('arr: ', arr);
configApi.dingTalkBindUser(arr, props.data.id).then(() => {
message.success('操作成功');
getTableData();
@ -346,8 +341,8 @@ const dataSource = ref<any>([]);
const tableLoading = ref(false);
const getTableData = () => {
tableLoading.value = true;
Promise.all<any>([getDeptUsers(), getBindUsers(), getAllUsers()]).then(
(res) => {
Promise.all<any>([getDeptUsers(), getBindUsers(), getAllUsers()])
.then((res) => {
dataSource.value = [];
const [deptUsers, bindUsers, unBindUsers] = res;
(deptUsers || []).forEach((deptUser: any) => {
@ -379,9 +374,20 @@ const getTableData = () => {
});
});
// console.log('dataSource.value: ', dataSource.value);
},
);
tableLoading.value = false;
})
.finally(() => {
tableLoading.value = false;
});
};
/**
* 前端分页
*/
const current = ref(1);
const pageSize = ref(12);
const handleTableChange = (pagination: any) => {
current.value = pagination.current;
pageSize.value = pagination.pageSize;
};
watch(
@ -475,5 +481,8 @@ const handleCancel = () => {
.model-body {
height: 600px;
overflow-y: auto;
&:deep(.ant-pagination-item) {
display: none;
}
}
</style>

View File

@ -80,10 +80,6 @@
</template>
<template #actions="item">
<PermissionButton
v-if="
item.key != 'tigger' ||
slotProps.sceneTriggerType == 'manual'
"
:disabled="item.disabled"
:popConfirm="item.popConfirm"
:tooltip="{ ...item.tootip }"
@ -146,10 +142,6 @@
:key="i.key"
>
<PermissionButton
v-if="
i.key != 'tigger' ||
slotProps.sceneTriggerType == 'manual'
"
:disabled="i.disabled"
:popConfirm="i.popConfirm"
:tooltip="{
@ -439,7 +431,9 @@ const getActions = (
icon: 'DeleteOutlined',
},
];
return actions;
return actions.filter((item)=>
item.key != 'tigger' || data.sceneTriggerType == 'manual'
);
};
const add = () => {
menuStory.jumpPage('rule-engine/Alarm/Configuration/Save');

View File

@ -1,12 +1,11 @@
<template>
<div class='dropdown-time-picker'>
<j-time-picker
v-if='type === "time"'
v-if='!_type'
open
class='manual-time-picker'
v-model:value='myValue'
class='manual-time-picker'
:format='myFormat'
:valueFormat='myFormat'
:getPopupContainer='getPopupContainer'
popupClassName='manual-time-picker-popup'
@change='change'
@ -17,7 +16,6 @@
class='manual-time-picker'
v-model:value='myValue'
:format='myFormat'
:valueFormat='myFormat'
:getPopupContainer='getPopupContainer'
popupClassName='manual-time-picker-popup'
@change='change'
@ -26,7 +24,7 @@
</template>
<script setup lang='ts' name='DropdownTime'>
import dayjs from 'dayjs'
import dayjs, { Dayjs } from 'dayjs'
type Emit = {
(e: 'update:value', value: string) : void
@ -44,23 +42,26 @@ const props = defineProps({
},
format: {
type: String,
default: ''
default: undefined
}
})
const emit = defineEmits<Emit>()
const myFormat = props.format || ( props.type === 'time' ? 'HH:mm:ss' : 'YYYY-MM-DD HH:mm:ss')
const myValue = ref(props.value || dayjs(new Date()).format(myFormat))
const myValue = ref<Dayjs>(dayjs(props.value || new Date(), myFormat))
const getPopupContainer = (trigger: HTMLElement) => {
return trigger?.parentNode || document.body
}
const change = (e: string) => {
myValue.value = e
emit('update:value', e)
emit('change', e)
const change = (e: Dayjs) => {
emit('update:value', e.format(myFormat))
emit('change', e.format(myFormat))
}
const _type = computed(() => {
return props.value?.includes('-')
})
</script>
<style lang='less'>

View File

@ -11,7 +11,7 @@ export const getComponent = (type: string): string => {
case 'long':
case 'float':
case 'double':
return 'number'
return type
case 'metric':
case 'enum':
case 'boolean':

View File

@ -28,7 +28,7 @@
@change='timeChange'
/>
<DropdownMenus
v-if='["select","enum", "boolean"].includes(item.component)'
v-else-if='["select","enum", "boolean"].includes(item.component)'
:options='["metric", "upper"].includes(item.key) ? metricOption : options'
@click='onSelect'
/>
@ -54,7 +54,7 @@
<ValueItem
v-else
v-model:modelValue='myValue'
:itemType='getComponent(item.component)'
:itemType='item.component'
:options='item.key === "upper" ? metricOption : options'
@change='valueItemChange'
/>

1
src/vite-env.d.ts vendored
View File

@ -1,6 +1,7 @@
interface ImportMetaEnv {
readonly VITE_APP_BASE_API: string;
readonly VITE_APP_WS_URL: string;
readonly MODE: string;
}
interface ImportMeta {

View File

@ -21,6 +21,7 @@
"layouts/*": ["./src/layouts/*"],
"store/*": ["./src/store/*"],
"style/*": ["./src/style/*"],
"jetlinks-ui-components/es": ["./node_modules/jetlinks-ui-components/es/*"]
},
"types": ["ant-design-vue/typings/global", "vite/client"],
"suppressImplicitAnyIndexErrors": true

View File

@ -12,12 +12,13 @@ import * as path from 'path'
import monacoEditorPlugin from 'vite-plugin-monaco-editor';
// import { JetlinksVueResolver } from 'jetlinks-ui-components/lib/plugin/resolve'
import { JetlinksVueResolver } from './plugin/jetlinks'
import { optimizeDeps } from './plugin/optimize'
import copy from 'rollup-plugin-copy';
// https://vitejs.dev/config/
export default defineConfig(({ mode}) => {
const env: Partial<ImportMetaEnv> = loadEnv(mode, process.cwd());
return {
base: './',
resolve: {
@ -53,6 +54,7 @@ export default defineConfig(({ mode}) => {
vue(),
monacoEditorPlugin({}),
vueJsx(),
optimizeDeps(),
Components({
resolvers: [JetlinksVueResolver({ importStyle: 'less' }), VueAmapResolver()],
directoryAsNamespace: true
@ -110,6 +112,9 @@ export default defineConfig(({ mode}) => {
javascriptEnabled: true,
}
}
},
optimizeDeps: {
include: ['pinia', 'vue-router', 'axios', 'lodash-es', '@vueuse/core', 'echarts', 'dayjs'],
}
}
})