日志

components.d.ts

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

src/views/tab/index.vue

@@ -1,58 +1,152 @@
+<!--<template>-->
+<!--  <div class="tab-container">-->
+<!--&lt;!&ndash;    <el-tag>mounted times ：{{ createdTimes }}</el-tag>&ndash;&gt;-->
+<!--&lt;!&ndash;    <el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" />&ndash;&gt;-->
+<!--    <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>
+    <div style=" width:100%">
-    <el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" />
+        <el-card style="max-width: 100vw;margin: 1.5vw">
-    <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
+            <template #header><span>日报</span></template>
-      <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
+
-        <keep-alive>
+        </el-card>
-          <tab-pane  v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" />
+        <el-card style="max-width: 100vw;height:70vh;margin:1.3vw">
-        </keep-alive>
+            <div style="display:flex;flex-direction: row;justify-content: space-between">
-      </el-tab-pane>
+                <el-button
-    </el-tabs>
+                    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>
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { ref } from 'vue';
-import TabPane from './components/TabPane';
+import { ElTable } from 'element-plus';
 
-export default defineComponent({
+interface User {
-  name: 'Tab',
+    date: string
-  components: { TabPane },
+    name: string
-  data() {
+    address: string
-    return {
+}
-      tabMapOptions: [
+
-        { label: 'China', key: 'CN' },
+const multipleTableRef = ref<InstanceType<typeof ElTable>>();
-        { label: 'USA', key: 'US' },
+const multipleSelection = ref<User[]>([]);
-        { label: 'Japan', key: 'JP' },
+
-        { label: 'Eurozone', key: 'EU' }
+const handleSelectionChange = (val: User[]) => {
-      ],
+  multipleSelection.value = val;
-      activeName: 'CN',
+};
-      createdTimes: 0
+
-    };
+const tableData: User[] = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
   },
-  // watch: {
+  {
-  //   activeName(val) { // url变化会导致渲染异常。因此这里注释掉了
+    date: '2016-05-02',
-  //     this.$router.push(`${this.$route.path}?tab=${val}`);
+    name: 'Tom',
-  //   }
+    address: 'No. 189, Grove St, Los Angeles'
-  // },
-  created() {
-    // init the default selected tab
-    const tab = this.$route.query.tab;
-    if (tab) {
-      this.activeName = tab;
-    }
   },
-  methods: {
+  {
-    showCreatedTimes() {
+    date: '2016-05-04',
-      this.createdTimes = this.createdTimes + 1;
+    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>