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

fix: yarn.lock不忽略

This commit is contained in:
100011797 2023-01-10 17:06:53 +08:00
parent e2696b8d3c
commit 26c84eeab6
7 changed files with 194 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -11,7 +11,6 @@ node_modules
dist
dist-ssr
*.local
yarn.lock
components.d.ts
# Editor directories and files

168
src/components/Table/index.vue Normal file
View File

@ -0,0 +1,168 @@
<template>
<div class="jtable-body">
<div class="jtable-body-header">
<div class="jtable-body-header-left">
<slot name="headerTitle"></slot>
</div>
<div class="jtable-body-header-right">
<div class="jtable-setting-item" :class="[ModelEnum.CARD === model ? 'active' : '']" @click="modelChange(ModelEnum.CARD)">
<AppstoreOutlined />
</div>
<div class="jtable-setting-item" :class="[ModelEnum.TABLE === model ? 'active' : '']" @click="modelChange(ModelEnum.TABLE)">
<UnorderedListOutlined />
</div>
</div>
</div>
<div class="jtable-content">
<div v-if="model === ModelEnum.CARD" class="jtable-card">
<div
v-if="dataSource.length"
class="jtable-card-items"
:style="{gridTemplateColumns: `repeat(${column}, 1fr)`}"
>
<div
class="jtable-card-item"
v-for="(item, index) in dataSource"
:key="index"
>
<slot name="cardRender" :item="item" :index="index"></slot>
</div>
</div>
<div v-else>
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
</div>
</div>
<div v-else>
<a-table :columns="columns" :dataSource="dataSource" :pagination="false" />
</div>
</div>
<div class="jtable-pagination" v-if="dataSource.length">
<a-pagination
size="small"
:total="50"
:show-total="total => `第 ${1} - ${1} 条/总共 ${total} 条`"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
import type { TableProps } from 'ant-design-vue/es/table'
import { Empty } from 'ant-design-vue'
enum ModelEnum {
TABLE = 'TABLE',
CARD = 'CARD',
}
export declare type RequestData = {
code: string;
result: {
data: Record<string, any>[] | undefined;
pageIndex: number;
pageSize: number;
total: number;
};
status: number;
} & Record<string, any>;
interface JTableProps extends TableProps{
request: (params: Record<string, any> & {
pageSize: number;
pageIndex: number;
}) => Promise<Partial<RequestData>>;
cardBodyClass?: string;
columns: Record<string, any>[];
params: Record<string, any> & {
pageSize: number;
pageIndex: number;
}
}
// props和emit
const emit = defineEmits(["modelChange"]);
const props = withDefaults(defineProps<JTableProps>(), {
cardBodyClass: '',
request: undefined
})
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
const model = ref<keyof typeof ModelEnum>(ModelEnum.CARD); // 模式切换
const column = ref<number>(4);
const dataSource = ref<Record<string, any>[]>([])
console.log(props)
// 方法
// 切换卡片和表格
const modelChange = (type: keyof typeof ModelEnum) => {
model.value = type
}
// 请求数据
const handleSearch = async (params1?: Record<string, any>) => {
const resp = await props.request({
pageSize: 10,
pageIndex: 1,
...params1
})
if(resp.status === 200){
dataSource.value = resp.result?.data || []
}
}
watchEffect(() => {
handleSearch(props.params)
})
</script>
<style lang="less" scoped>
.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-card {
.jtable-card-items {
display: grid;
grid-gap: 26px;
// grid-template-columns: repeat(4, 1fr);
.jtable-card-item {
display: flex;
}
}
}
}
.jtable-pagination {
margin-top: 20px;
display: flex;
justify-content: flex-end;
// position: absolute;
// right: 24px;
// bottom: 24px;
}
}
</style>

0
src/components/Table/index.module.less → src/components/Table/old/index.module.less
View File

23
src/components/Table/index.tsx → src/components/Table/old/index.tsx
View File

@ -1,7 +1,8 @@
import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
import styles from './index.module.less'
import { Space, Pagination, Table, Empty } from 'ant-design-vue'
import { Pagination, Table, Empty } from 'ant-design-vue'
import type { TableProps } from 'ant-design-vue/es/table'
enum ModelEnum {
TABLE = 'TABLE',
CARD = 'CARD',
@ -17,18 +18,15 @@ export declare type RequestData = {
};
status: number;
} & Record<string, any>;
// interface ColumnType extends
interface JTableProps extends TableProps{
// columns?: ColumnsType<RecordType>;
request: (params: Record<string, any> & {
pageSize?: number;
pageIndex?: number;
pageSize: number;
pageIndex: number;
}) => Promise<Partial<RequestData>>;
cardBodyClass?: string;
cardBodyClass: string;
}
const JTable = defineComponent<JTableProps>({
name: 'JTable',
slots: [
@ -38,10 +36,15 @@ const JTable = defineComponent<JTableProps>({
emits: [
'modelChange', // 切换卡片和表格
],
setup(props: JTableProps, { slots, emit }){
props: {
cardBodyClass: '',
request: undefined,
columns: []
} as any,
setup(props ,{ slots, emit }){
const model = ref<keyof typeof ModelEnum>(ModelEnum.CARD); // 模式切换
const column = ref<number>(3);
console.log(props)
console.log(props.columns, props.request)
const dataSource = ref<any[]>([
{
key: '1',
@ -81,6 +84,8 @@ const JTable = defineComponent<JTableProps>({
},
])
// 请求数据
onMounted(() => {
})

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'
import JTable from './Table/index.vue'
import TitleComponent from "./TitleComponent/index.vue";
import Form from './Form'

2
src/router/menu.ts
View File

@ -38,7 +38,7 @@ export default [
},
{
path: '/table',
component: () => import('@/views/table/index.vue')
component: () => import('@/views/demo/table/index.vue')
},
{
path: '/form',

13
src/views/table/index.vue → src/views/demo/table/index.vue
View File

@ -18,20 +18,27 @@
key: 'address',
}
]"
:request="request"
>
<template #headerTitle>
<a-button type="primary">新增</a-button>
</template>
<template #cardRender="slotProps">
{{slotProps.name}}
<CardBox>
<template #content>
{{slotProps.item.name}}
</template>
</CardBox>
</template>
</JTable>
</div>
</template>
<script setup lang="ts">
import { post } from "@/utils/request";
// :request="post('/device-product/_query', {})"
import server from "@/utils/request";
import CardBox from '@/components/CardBox/index.vue';
const request = (data: any) => server.post(`/device-product/_query`, data)
</script>