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:
JiangQiming 2023-01-12 16:50:37 +08:00
parent c05cf5d961 ea151386b9
commit a91b4b6b99
18 changed files with 4236 additions and 3848 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components.d.ts vendored
View File

@ -7,37 +7,6 @@ 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']
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']
ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
ARow: typeof import('ant-design-vue/es')['Row']
ASelect: typeof import('ant-design-vue/es')['Select']
ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
ASpace: typeof import('ant-design-vue/es')['Space']
ASpin: typeof import('ant-design-vue/es')['Spin']
ASwitch: typeof import('ant-design-vue/es')['Switch']
ATable: typeof import('ant-design-vue/es')['Table']
ATextarea: typeof import('ant-design-vue/es')['Textarea']
ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
ATooltip: typeof import('ant-design-vue/es')['Tooltip']
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']

2
config/config.ts
View File

@ -1,6 +1,6 @@
export default {
theme: {
'primary-color': '#00A4FF',
'primary-color': '#1d39c4',
},
logo: '/favicon.ico',
title: 'Jetlinks'

1
package.json
View File

@ -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
src/api/device.ts → src/api/device/instance.ts
View File

3
src/api/device/product.ts Normal file
View File

@ -0,0 +1,3 @@
import server from '@/utils/request'
export const queryNoPagingPost = (data: any) => server.post(`/device-product/_query/no-paging?paging=false`, data)

2
src/components/PermissionButton/index.vue
View File

@ -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';

52
src/components/Table/index.module.less Normal file
View File

@ -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;
}
}
}
}

268
src/components/Table/index.tsx Normal file
View File

@ -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

2
src/components/Table/index.vue
View File

@ -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'

2
src/components/index.ts
View File

@ -1,7 +1,7 @@
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';

2
src/main.ts
View File

@ -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'

0
src/style.css → src/style.less
View File

23
src/utils/request.ts
View File

@ -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可解析类型
})
}

8
src/views/demo/table/index.vue
View File

@ -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>

9
src/views/demo/test.tsx Normal file
View File

@ -0,0 +1,9 @@
import { Button } from 'ant-design-vue'
export default defineComponent({
setup(){
return () => <div>
<Button type='primary'>新增</Button>
</div>
}
})

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

@ -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;
}
}

9
vite.config.ts
View File

@ -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'
@ -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,
}

7617
yarn.lock
View File

File diff suppressed because it is too large Load Diff