日志
This commit is contained in:
parent
4b1f6ea87a
commit
045357fdf2
4
components.d.ts
vendored
4
components.d.ts
vendored
@ -13,6 +13,7 @@ declare module '@vue/runtime-core' {
|
||||
DropdownMenu: typeof import('./src/components/Share/DropdownMenu.vue')['default']
|
||||
Dropzone: typeof import('./src/components/Dropzone/index.vue')['default']
|
||||
EditorImage: typeof import('./src/components/Tinymce/components/EditorImage.vue')['default']
|
||||
ElAlert: typeof import('element-plus/es')['ElAlert']
|
||||
ElBadge: typeof import('element-plus/es')['ElBadge']
|
||||
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
|
||||
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
|
||||
@ -36,10 +37,13 @@ declare module '@vue/runtime-core' {
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||
ElRadio: typeof import('element-plus/es')['ElRadio']
|
||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||
ElRate: typeof import('element-plus/es')['ElRate']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElSlider: typeof import('element-plus/es')['ElSlider']
|
||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
|
||||
@ -1,58 +1,152 @@
|
||||
<!--<template>-->
|
||||
<!-- <div class="tab-container">-->
|
||||
<!--<!– <el-tag>mounted times ：{{ createdTimes }}</el-tag>–>-->
|
||||
<!--<!– <el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" />–>-->
|
||||
<!-- <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">-->
|
||||
<!-- <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">-->
|
||||
<!-- <keep-alive>-->
|
||||
<!-- <tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" />-->
|
||||
<!-- </keep-alive>-->
|
||||
<!-- </el-tab-pane>-->
|
||||
<!-- </el-tabs>-->
|
||||
<!-- </div>-->
|
||||
<!--</template>-->
|
||||
|
||||
<!--<script>-->
|
||||
<!--import { defineComponent } from 'vue';-->
|
||||
<!--import TabPane from './components/TabPane';-->
|
||||
|
||||
<!--export default defineComponent({-->
|
||||
<!-- name: 'Tab',-->
|
||||
<!-- components: { TabPane },-->
|
||||
<!-- data() {-->
|
||||
<!-- return {-->
|
||||
<!-- tabMapOptions: [-->
|
||||
<!-- { label: 'China', key: 'CN' },-->
|
||||
<!-- { label: 'USA', key: 'US' },-->
|
||||
<!-- { label: 'Japan', key: 'JP' },-->
|
||||
<!-- { label: 'Eurozone', key: 'EU' }-->
|
||||
<!-- ],-->
|
||||
<!-- activeName: 'CN',-->
|
||||
<!-- createdTimes: 0-->
|
||||
<!-- };-->
|
||||
<!-- },-->
|
||||
<!-- // watch: {-->
|
||||
<!-- // activeName(val) { // url变化会导致渲染异常。因此这里注释掉了-->
|
||||
<!-- // this.$router.push(`${this.$route.path}?tab=${val}`);-->
|
||||
<!-- // }-->
|
||||
<!-- // },-->
|
||||
<!-- created() {-->
|
||||
<!-- // init the default selected tab-->
|
||||
<!-- const tab = this.$route.query.tab;-->
|
||||
<!-- if (tab) {-->
|
||||
<!-- this.activeName = tab;-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- methods: {-->
|
||||
<!-- showCreatedTimes() {-->
|
||||
<!-- this.createdTimes = this.createdTimes + 1;-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!--});-->
|
||||
<!--</script>-->
|
||||
|
||||
<!--<style scoped>-->
|
||||
<!-- .tab-container {-->
|
||||
<!-- margin: 30px;-->
|
||||
<!-- }-->
|
||||
<!--</style>-->
|
||||
|
||||
<template>
|
||||
<div class="tab-container">
|
||||
<el-tag>mounted times ：{{ createdTimes }}</el-tag>
|
||||
<el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" />
|
||||
<el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
|
||||
<el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
|
||||
<keep-alive>
|
||||
<tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" />
|
||||
</keep-alive>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<div style=" width:100%">
|
||||
<el-card style="max-width: 100vw;margin: 1.5vw">
|
||||
<template #header><span>日报</span></template>
|
||||
|
||||
</el-card>
|
||||
<el-card style="max-width: 100vw;height:70vh;margin:1.3vw">
|
||||
<div style="display:flex;flex-direction: row;justify-content: space-between">
|
||||
<el-button
|
||||
text
|
||||
type=''
|
||||
>历史记录</el-button
|
||||
>
|
||||
<el-button type="primary">新建</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
ref="multipleTableRef"
|
||||
:data="tableData"
|
||||
style="max-width: 100vw;"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="序号" width="120">
|
||||
<template #default="scope">{{ scope.row.date }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="name" label="项目名称" width="120" />
|
||||
<el-table-column property="address" label="项目负责人" show-overflow-tooltip />
|
||||
<el-table-column property="address" label="日报" />
|
||||
<el-table-column property="address" label="日报填写者" />
|
||||
<el-table-column property="address" label="填写时间" />
|
||||
<el-table-column property="address" label="工作时间" />
|
||||
<el-table-column property="address" label="操作" />
|
||||
</el-table>
|
||||
<el-pagination
|
||||
larger
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="50"
|
||||
class="mt-4"
|
||||
style="margin-top:2vh"
|
||||
/>
|
||||
</el-card>
|
||||
<!-- <div style="margin-top: 20px">-->
|
||||
<!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])"-->
|
||||
<!-- >Toggle selection status of second and third rows</el-button-->
|
||||
<!-- >-->
|
||||
<!-- <el-button @click="toggleSelection()">Clear selection</el-button>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
import TabPane from './components/TabPane';
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { ElTable } from 'element-plus';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Tab',
|
||||
components: { TabPane },
|
||||
data() {
|
||||
return {
|
||||
tabMapOptions: [
|
||||
{ label: 'China', key: 'CN' },
|
||||
{ label: 'USA', key: 'US' },
|
||||
{ label: 'Japan', key: 'JP' },
|
||||
{ label: 'Eurozone', key: 'EU' }
|
||||
],
|
||||
activeName: 'CN',
|
||||
createdTimes: 0
|
||||
};
|
||||
interface User {
|
||||
date: string
|
||||
name: string
|
||||
address: string
|
||||
}
|
||||
|
||||
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
|
||||
const multipleSelection = ref<User[]>([]);
|
||||
|
||||
const handleSelectionChange = (val: User[]) => {
|
||||
multipleSelection.value = val;
|
||||
};
|
||||
|
||||
const tableData: User[] = [
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
// watch: {
|
||||
// activeName(val) { // url变化会导致渲染异常。因此这里注释掉了
|
||||
// this.$router.push(`${this.$route.path}?tab=${val}`);
|
||||
// }
|
||||
// },
|
||||
created() {
|
||||
// init the default selected tab
|
||||
const tab = this.$route.query.tab;
|
||||
if (tab) {
|
||||
this.activeName = tab;
|
||||
}
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
methods: {
|
||||
showCreatedTimes() {
|
||||
this.createdTimes = this.createdTimes + 1;
|
||||
}
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
}
|
||||
});
|
||||
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tab-container {
|
||||
margin: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user