From 045357fdf227ac3304db8a70fd133d7c758ff208 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A6=96=E5=A7=90?= <2981176548@qq.com>
Date: Tue, 9 Apr 2024 01:09:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=97=A5=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts         |   4 +
 src/views/tab/index.vue | 192 ++++++++++++++++++++++++++++++----------
 2 files changed, 147 insertions(+), 49 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 58c18c5..0ba1fe8 100644
--- a/components.d.ts
+++ b/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']
diff --git a/src/views/tab/index.vue b/src/views/tab/index.vue
index 4ae105e..58f9274 100644
--- a/src/views/tab/index.vue
+++ b/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>
-    <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>