From ba9435fff74e16a9b736a368fe5cfb3cec691e7a Mon Sep 17 00:00:00 2001
From: XCYH <1561381013@qq.com>
Date: Mon, 15 Apr 2024 14:55:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=81=87=E7=95=8C=E9=9D=A2=E5=AF=BC=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |   9 +
 src/components/Breadcrumb/index.vue           |   2 +-
 src/components/Hamburger/index.vue            |   1 +
 src/components/Screenfull/index.vue           |   1 +
 src/views/error-log/index.vue                 | 266 +++++++++++++--
 src/views/tab/index.vue                       | 315 +++++++++++++++---
 .../table/dynamic-table/EngageChildModel.vue  | 137 ++++++++
 .../table/dynamic-table/EngageChildSystem.vue | 202 +++++++++++
 src/views/table/dynamic-table/index.vue       | 137 ++++++--
 src/views/theme/index.vue                     |  13 +-
 10 files changed, 983 insertions(+), 100 deletions(-)
 create mode 100644 src/views/table/dynamic-table/EngageChildModel.vue
 create mode 100644 src/views/table/dynamic-table/EngageChildSystem.vue

diff --git a/components.d.ts b/components.d.ts
index 34bc889..1a0f360 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -13,14 +13,19 @@ 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']
+    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@@ -31,6 +36,7 @@ declare module '@vue/runtime-core' {
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
@@ -67,4 +73,7 @@ declare module '@vue/runtime-core' {
     UploadExcel: typeof import('./src/components/UploadExcel/index.vue')['default']
     VueCountTo: typeof import('./src/components/vue-count-to/vue-countTo.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index 516f2e0..bb5074a 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -3,7 +3,7 @@
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
         <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{
-            item.meta.title
+             item.meta.title
         }}</span>
         <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
       </el-breadcrumb-item>
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 931fd91..0ebc0af 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <!--    顶部缩放侧边栏icon-->
   <div style="padding: 0 15px;" @click="toggleClick">
     <svg :class="{ 'is-active': isActive }" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
       width="64" height="64">
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index c7f173b..71ef95f 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <!--    顶部全屏icon-->
   <div>
     <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="click" />
   </div>
diff --git a/src/views/error-log/index.vue b/src/views/error-log/index.vue
index d694fbf..9715850 100644
--- a/src/views/error-log/index.vue
+++ b/src/views/error-log/index.vue
@@ -1,33 +1,241 @@
 <template>
-  <div class="errPage-container">
-    <ErrorA />
-    <ErrorB />
-    <h3>Please click the bug icon in the upper right corner</h3>
-    <aside>
-      Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.
-      <a target="_blank" class="link-type" href="https://vue3-element-admin-site.midfar.com/guide/advanced/error.html">
-        Document introduction
-      </a>
-    </aside>
-    <a href="#">
-      <img src="https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif">
-    </a>
-  </div>
+  
+  <div style=" width:100%">
+        <el-card style="max-width: 100vw;margin: 1.5vw;">
+          <template #header>
+                <span>消息</span>
+            </template>
+            <div style="display:flex;flex-direction:row;justify-content: space-around ">
+                <div>
+                    时间
+                    <el-date-picker
+                        v-model="value2"
+                        type="daterange"
+                        unlink-panels
+                        range-separator="——"
+                        start-placeholder="开始时间"
+                        end-placeholder="结束时间"
+                        :shortcuts="shortcuts"
+                        :size="large"
+                        style="margin-left:0.5vw"
+                    />
+                </div>
+                <div>
+                    状态
+                    <el-select
+                        v-model="value"
+                        clearable
+                        placeholder="Status"
+                        style="width: 240px;margin-left:0.5vw"
+                    >
+                        <el-option
+                            v-for="item in options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+
+                </div>
+
+                <div>
+                  <el-button type="primary" style="width:80px">查询</el-button>
+                    <el-button style="width:80px">重置</el-button>
+
+                </div>
+            </div>
+        </el-card>
+        <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
+            <div style="display:flex;flex-direction: row;justify-content: space-between">
+                <el-button
+                        text
+                        type=''
+                >历史记录</el-button
+                >
+            </div>
+
+            <div v-for="(row, index) in tableData" :key="index" class="table-row">
+                <div class="table-cell">
+                    <div class="date" style="display:flex;flex-direction: column">
+                        <span style="color:skyblue">{{row.name}}</span>
+                        <span>{{ row.date }}</span>
+                    </div>
+                </div>
+                <div class="table-cell">
+                            <div>address: {{ row.address }}</div>
+                </div>
+                <div class="table-cell table-cell-right">
+                    <el-button size="small" type="danger" @click="handleDelete(index, row)">Delete</el-button>
+                    <el-button size="small" type="danger" @click="handleDelete(index, row);centerDialogVisible = true">Delete</el-button>
+                    <el-dialog v-model="centerDialogVisible" title="删除" width="500"  :modal="false">
+    <span>
+是否确认删除此条信息？
+    </span>
+                        <template #footer>
+                            <div class="dialog-footer">
+                                <el-button @click="centerDialogVisible = false">取消</el-button>
+                                <el-button type="primary" @click="centerDialogVisible = false">
+                                    确认
+                                </el-button>
+                            </div>
+                        </template>
+                    </el-dialog>
+                </div>
+            </div>
+            <el-pagination
+                size="large"
+                background
+                layout="prev, pager, next"
+                :total="50"
+                style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
+            />
+        </el-card>
+
+    </div>
+
 </template>
 
-<script>
-import { defineComponent } from 'vue';
-import ErrorA from './components/ErrorTestA';
-import ErrorB from './components/ErrorTestB';
-
-export default defineComponent({
-  name: 'ErrorLog',
-  components: { ErrorA, ErrorB }
-});
-</script>
-
-<style scoped>
-  .errPage-container {
-    padding: 30px;
+<script lang="ts" setup>
+import { ref } from 'vue';
+// 删除对话框
+const centerDialogVisible = ref(false);
+// 时间选择器
+const value2 = ref('');
+const shortcuts = [
+  {
+    text: 'Last week',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    }
+  },
+  {
+    text: 'Last month',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    }
+  },
+  {
+    text: 'Last 3 months',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    }
   }
-</style>
+];
+
+// 状态选择器
+
+const value = ref('');
+const options = [
+  {
+    value: 'Option1',
+    label: '未开始'
+  },
+  {
+    value: 'Option2',
+    label: '进行中'
+  },
+  {
+    value: 'Option3',
+    label: '暂停'
+  },
+  {
+    value: 'Option4',
+    label: 'Option4'
+  },
+  {
+    value: 'Option5',
+    label: '已完成'
+  }
+];
+
+// 表格
+interface User {
+    date: string
+    name: string
+    address: string
+}
+
+const handleDelete = (index: number, row: User) => {
+  console.log(index, row);
+};
+
+const tableData: User[] = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    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'
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  }
+];
+</script>
+<style>
+.my-autocomplete li {
+    line-height: normal;
+    padding: 7px;
+}
+.my-autocomplete li .name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.my-autocomplete li .addr {
+    font-size: 12px;
+    color: #b4b4b4;
+}
+.my-autocomplete li .highlighted .addr {
+    color: #ddd;
+}
+
+.table-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.table-cell {
+    flex: 1;
+    padding: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.table-cell-right {
+    justify-content: flex-end;
+    margin-right:5vw;
+}
+.date {
+    display: flex;
+    /*align-items: center;*/
+}
+
+.date el-icon {
+    margin-right: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/tab/index.vue b/src/views/tab/index.vue
index 4ae105e..7922be3 100644
--- a/src/views/tab/index.vue
+++ b/src/views/tab/index.vue
@@ -1,58 +1,281 @@
 <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>
+      <div style="display:flex;flex-direction:row;justify-content: space-around ">
+        <div>
+          项目
+          <el-autocomplete 
+              v-model="state"
+               :fetch-suggestions="querySearch"
+               popper-class="my-autocomplete"
+              placeholder="Please input" 
+              @select="handleSelect" 
+               style="margin-left:0.5vw"
+          >
+            <template #suffix>
+              <el-icon class="el-input__icon" @click="handleIconClick">
+                <ArrowDownBold />
+              </el-icon>
+            </template>
+            <template #default="{ item }">
+              <div class="value">{{ item.value }}</div>
+              <span class="link">{{ item.link }}</span>
+            </template>
+          </el-autocomplete>
+        </div>
+        <div>
+          时间
+          <el-date-picker
+             v-model="value2" type="daterange" 
+             unlink-panels 
+             range-separator="——" 
+             start-placeholder="开始时间"
+             end-placeholder="结束时间"
+             :shortcuts="shortcuts" 
+             style="margin-left:0.5vw" 
+            />
+        </div>
+        <div>
+          <el-button type="primary" style="width: 80px">查询</el-button>
+               <el-button style="width: 80px">重置</el-button>
+        </div>
+      </div>
+    </el-card>
+    <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
+      <div style="display:flex;flex-direction: row;justify-content: space-between">
+        <el-button text >历史记录</el-button>
+        <el-button type="primary" @click="AddDialogVisible=true">新建</el-button>
+                    <el-dialog v-model="AddDialogVisible"  width="500" center :modal="false" :show-close="false">
+                        <template #header>
+                         <div style="display:flex;flex-direction: row;justify-content: flex-start;color:red;font-size:large" >新增日报</div>
+                            <el-divider content-position="left" style="background:red"><el-icon><CaretTop /></el-icon></el-divider>
+                        </template>
+
+                        <div>
+                            <div style="margin-top:-4vh ">
+	                                <span style="color:red">项目名称：</span>
+                                <el-input
+                                    v-model="input"
+                                    style="width: 200px"
+                                    placeholder="请输入"
+                                />
+                            </div>
+                            <div style="margin-top:2vh ">
+	                               <span style="color:red"> 工作时间：</span>
+                                <el-date-picker
+                                    v-model="value1"
+                                    type="date"
+                                    placeholder="请选择日期"
+                                    style="width: 200px"
+                                    :default-value="new Date(2010, 9, 1)"
+                                />
+                            </div>
+                            <div style="margin-top:2vh ;display:flex;flex-direction:row;">
+	                                <span style="color: red">日报内容：</span>
+                                <el-input
+                                    v-model="textarea"
+                                    style="width: 300px;"
+                                    :rows="4"
+                                    type="textarea"
+                                    placeholder="请输入"
+                                />
+                            </div>
+                        </div>
+                    <template #footer>
+                        <div class="dialog-footer">
+                            <el-button @click="AddDialogVisible = false" type="info" style="width: 80px">取消  </el-button>
+                            <el-button type="danger" style="width:80px" @click="AddDialogVisible = false">
+                                新增
+                            </el-button>
+                        </div>
+                    </template>
+                </el-dialog>
+      </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-button size="small" text style="color:deepskyblue" @click="EditDialogVisible = true">修改</el-button>
+            <el-dialog v-model="EditDialogVisible" title="删除" width="500"  :modal="false">
+                <template #footer>
+                    <div class="dialog-footer">
+                        <el-button @click="EditDialogVisible = false">取消</el-button>
+                        <el-button type="primary" @click="EditDialogVisible = false">
+                            确认
+                        </el-button>
+                    </div>
+                </template>
+            </el-dialog>
+        </el-table-column>
+      </el-table>
+      <el-pagination 
+          larger 
+          background 
+          layout="prev, pager, next" 
+          :total="50" class="mt-4" 
+          style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
+         />
+    </el-card>
+ 
   </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';
+import { ArrowDownBold, CaretTop } from '@element-plus/icons-vue';
+const value1 = ref('');
+// 修改对话框
+const EditDialogVisible = ref(false);
+// 新建对话框
+const AddDialogVisible = ref(false);
+interface User {
+  date: string
+  name: string
+  address: string
+}
 
-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
-    };
+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'
+  },
+  {
+    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'
+  }
+
+];
+
+// 输入框1
+import { onMounted } from 'vue';
+
+
+interface LinkItem {
+  value: string
+  link: string
+}
+
+const state = ref('');
+const links = ref<LinkItem[]>([]);
+
+const querySearch = (queryString: string, cb) => {
+  const results = queryString
+    ? links.value.filter(createFilter(queryString))
+    : links.value;
+  // call callback function to return suggestion objects
+  cb(results);
+};
+const createFilter = (queryString) => {
+  return (restaurant) => {
+    return (
+      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+    );
+  };
+};
+const loadAll = () => {
+  return [
+    { value: '1' },
+    { value: '2' },
+    { value: '3' },
+    { value: '4' },
+    { value: '5' }
+
+  ];
+};
+const handleSelect = (item: LinkItem) => {
+  console.log(item);
+};
+
+const handleIconClick = (ev: Event) => {
+  console.log(ev);
+};
+
+onMounted(() => {
+  links.value = loadAll();
+});
+
+// 时间选择器
+
+const value2 = ref('');
+
+const shortcuts = [
+  {
+    text: 'Last week',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
     }
   },
-  methods: {
-    showCreatedTimes() {
-      this.createdTimes = this.createdTimes + 1;
+  {
+    text: 'Last month',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    }
+  },
+  {
+    text: 'Last 3 months',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
     }
   }
-});
+];
 </script>
 
-<style scoped>
-  .tab-container {
-    margin: 30px;
-  }
-</style>
+<style>
+.my-autocomplete li {
+  line-height: normal;
+  padding: 7px;
+}
+
+.my-autocomplete li .name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.my-autocomplete li .addr {
+  font-size: 12px;
+  color: #b4b4b4;
+}
+
+.my-autocomplete li .highlighted .addr {
+  color: #ddd;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/table/dynamic-table/EngageChildModel.vue b/src/views/table/dynamic-table/EngageChildModel.vue
new file mode 100644
index 0000000..2b87f49
--- /dev/null
+++ b/src/views/table/dynamic-table/EngageChildModel.vue
@@ -0,0 +1,137 @@
+
+<template>
+    <div style=" width:100%">
+        <el-card style="max-width: 100vw;margin: 1.5vw;max-height:100vh;height:80vh ">
+            <template #header>
+                <strong>子模块1</strong>
+            </template>
+
+            <!--            <div  style=" display: flex;flex-direction: column;justify-content: center">-->
+            <div class="ModuleData" style="margin-left: 30vw;width: 24vw;height: 55vh;display: flex;flex-direction: column;justify-content: space-around;
+">
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>01.模块名称 </strong>
+                    <span  style="width: 250px">子模块1</span>
+                </div>
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>02.模块周期</strong>
+                    <span  style="width: 250px">13天</span>
+                </div>
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>03.工作量 </strong>
+                    <span  style="width: 250px">子模块1</span>
+                </div>
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>04.负责人 </strong>
+                    <span  style="width: 250px">子模块1</span>
+                </div>
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>05.状态 </strong>
+                    <el-autocomplete
+                            v-model="state"
+                            :fetch-suggestions="querySearch"
+                            popper-class="my-autocomplete"
+                            placeholder="Please input"
+                            @select="handleSelect"
+                            style="width: 250px"
+                    >
+                        <template #suffix>
+                            <el-icon class="el-input__icon" @click="handleIconClick">
+                                <edit />
+                            </el-icon>
+                        </template>
+                        <template #default="{ item }">
+                            <div class="value">{{ item.value }}</div>
+                            <span class="link">{{ item.link }}</span>
+                        </template>
+                    </el-autocomplete>
+                </div>
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>06.截止时间 </strong>
+                    <span  style="width: 250px">子模块1</span>
+                </div>
+                <div style="display: flex;flex-direction: row;justify-content: space-between">
+                    <strong>07.简介 </strong>
+                    <el-input
+                            v-model="textarea2"
+                            style="width: 250px"
+                            :autosize="{ minRows: 4, maxRows: 6 }"
+                            type="textarea"
+                            placeholder="Please input"
+                            :row="4"
+                    />
+                </div>
+            </div>
+            <!--            </div>-->
+        </el-card>
+
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { Edit } from '@element-plus/icons-vue';
+
+interface LinkItem {
+    value: string
+    link: string
+}
+
+const state = ref('');
+const links = ref<LinkItem[]>([]);
+
+const querySearch = (queryString: string, cb) => {
+    const results = queryString
+        ? links.value.filter(createFilter(queryString))
+        : links.value;
+    // call callback function to return suggestion objects
+    cb(results);
+};
+const createFilter = (queryString) => {
+    return (restaurant) => {
+        return (
+            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+        );
+    };
+};
+const loadAll = () => {
+    return [
+        { value: 'vue', link: 'https://github.com/vuejs/vue' },
+        { value: 'element', link: 'https://github.com/ElemeFE/element' },
+        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+        { value: 'babel', link: 'https://github.com/babel/babel' }
+    ];
+};
+const handleSelect = (item: LinkItem) => {
+    console.log(item);
+};
+
+const handleIconClick = (ev: Event) => {
+    console.log(ev);
+};
+
+onMounted(() => {
+    links.value = loadAll();
+});
+</script>
+
+<style>
+.my-autocomplete li {
+    line-height: normal;
+    padding: 7px;
+}
+.my-autocomplete li .name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.my-autocomplete li .addr {
+    font-size: 12px;
+    color: #b4b4b4;
+}
+.my-autocomplete li .highlighted .addr {
+    color: #ddd;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/table/dynamic-table/EngageChildSystem.vue b/src/views/table/dynamic-table/EngageChildSystem.vue
new file mode 100644
index 0000000..f62feac
--- /dev/null
+++ b/src/views/table/dynamic-table/EngageChildSystem.vue
@@ -0,0 +1,202 @@
+<template>
+
+    <div style=" width:100%">
+        <el-card style="max-width: 100vw;margin: 1.5vw;">
+            <template #header><strong >子系统1</strong></template>
+            <div style="display:flex;flex-direction:row;justify-content: space-around ">
+                <div>
+                    名称
+                    <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+                </div>
+                <div>
+                    状态
+                    <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+                </div>
+                <div>
+                    <el-button type="primary" style="width:80px">查询</el-button>
+                    <el-button style="width:80px">重置</el-button>
+
+                </div>
+            </div>
+        </el-card>
+        <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
+            <div style="display:flex;flex-direction: row;justify-content: space-between">
+                <el-button
+                        text
+                        type=''
+                >子模块列表</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-column property="address" label="操作"  >
+                    <el-button
+                            link
+                            style="color:deepskyblue"
+                    >查看详情</el-button
+                    >
+                </el-table-column>
+            </el-table>
+            <el-pagination
+                    larger
+                    background
+                    layout="prev, pager, next"
+                    :total="50"
+                    class="mt-4"
+                    style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
+            />
+        </el-card>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElTable } from 'element-plus';
+
+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'
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    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'
+  }
+
+];
+
+// 输入框1
+import { onMounted } from 'vue';
+import { Edit } from '@element-plus/icons-vue';
+
+interface LinkItem {
+    value: string
+    link: string
+}
+
+const state = ref('');
+const links = ref<LinkItem[]>([]);
+
+const querySearch = (queryString: string, cb) => {
+  const results = queryString
+    ? links.value.filter(createFilter(queryString))
+    : links.value;
+    // call callback function to return suggestion objects
+  cb(results);
+};
+const createFilter = (queryString) => {
+  return (restaurant) => {
+    return (
+      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+    );
+  };
+};
+const loadAll = () => {
+  return [
+    { value: '1' },
+    { value: '2' },
+    { value: '3' },
+    { value: '4' },
+    { value: '5' }
+
+  ];
+};
+const handleSelect = (item: LinkItem) => {
+  console.log(item);
+};
+
+const handleIconClick = (ev: Event) => {
+  console.log(ev);
+};
+
+// 时间选择器
+const value1 = ref('');
+const value2 = ref('');
+
+const shortcuts = [
+  {
+    text: 'Last week',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    }
+  },
+  {
+    text: 'Last month',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    }
+  },
+  {
+    text: 'Last 3 months',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    }
+  }
+];
+</script>
+<style>
+.my-autocomplete li {
+    line-height: normal;
+    padding: 7px;
+}
+.my-autocomplete li .name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.my-autocomplete li .addr {
+    font-size: 12px;
+    color: #b4b4b4;
+}
+.my-autocomplete li .highlighted .addr {
+    color: #ddd;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/table/dynamic-table/index.vue b/src/views/table/dynamic-table/index.vue
index d77b5e0..7f4dbce 100644
--- a/src/views/table/dynamic-table/index.vue
+++ b/src/views/table/dynamic-table/index.vue
@@ -1,25 +1,124 @@
 <template>
-  <div class="app-container">
-    <div style="margin:0 0 5px 20px">
-      Fixed header, sorted by header order,
+  <div style=" width:100%">
+      <el-card style="max-width: 100vw;margin: 1.5vw;">
+        <template #header><strong >项目1</strong></template>
+          <div style="display:flex;flex-direction:row;justify-content: space-around ">
+              <div>
+                  名称
+                  <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+              </div>
+              <div>
+                  状态
+                  <el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
+              </div>
+              <div>
+                <el-button type="primary" style="width:80px">查询</el-button>
+                    <el-button style="width:80px">重置</el-button>
+              </div>
+          </div>
+      </el-card>
+      <el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
+          <div style="display:flex;flex-direction: row;justify-content: space-between">
+              <el-button
+                      text
+                      type=''
+              >子系统列表</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-column property="address" label="操作"  >
+                  <el-button
+                          link
+                          style="color:deepskyblue"
+                  >查看详情</el-button
+                  >
+              </el-table-column>
+          </el-table>
+          <el-pagination
+                  larger
+                  background
+                  layout="prev, pager, next"
+                  :total="50"
+                  class="mt-4"
+                  style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
+          />
+      </el-card>
+   
     </div>
-    <fixed-thead />
-
-    <div style="margin:30px 0 5px 20px">
-      Not fixed header, sorted by click order
-    </div>
-    <unfixed-thead />
-  </div>
 </template>
 
-<script>
-import { defineComponent } from 'vue';
-import FixedThead from './components/FixedThead';
-import UnfixedThead from './components/UnfixedThead';
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElTable } from 'element-plus';
+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'
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    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'
+  }
+
+];
+
 
-export default defineComponent({
-  name: 'DynamicTable',
-  components: { FixedThead, UnfixedThead }
-});
 </script>
-
+<style>
+.my-autocomplete li {
+    line-height: normal;
+    padding: 7px;
+}
+.my-autocomplete li .name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.my-autocomplete li .addr {
+    font-size: 12px;
+    color: #b4b4b4;
+}
+.my-autocomplete li .highlighted .addr {
+    color: #ddd;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/theme/index.vue b/src/views/theme/index.vue
index 3701da8..2886787 100644
--- a/src/views/theme/index.vue
+++ b/src/views/theme/index.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="app-container">
+   <div>
+    <div class="app-container">
     <el-card class="box-card">
       <template #header>
         <a class="link-type link-title" target="_blank" href="https://vue3-element-admin-site.midfar.com/guide/advanced/theme.html">
@@ -32,7 +33,6 @@
         Danger
       </el-button>
     </div>
-
     <div class="block">
       <el-button type="primary" :icon="IconEdit" />
       <el-button type="primary" :icon="IconShare" />
@@ -68,8 +68,10 @@
     <div class="block">
       <el-slider v-model="slideValue" />
     </div>
+   </div>
+
   </div>
-</template>
+  </template>
 
 <script>
 import { defineComponent, markRaw } from 'vue';
@@ -117,6 +119,8 @@ export default defineComponent({
 });
 </script>
 
+
+
 <style scoped>
 .field-label{
   vertical-align: middle;
@@ -126,12 +130,11 @@ export default defineComponent({
   max-width: 100%;
   margin: 20px auto;
 }
-
 .block {
   padding: 30px 24px;
 }
-
 .tag-item {
   margin-right: 15px;
 }
 </style>
+