feature-yaojie #2
1
components.d.ts
vendored
1
components.d.ts
vendored
|
|
@ -26,6 +26,7 @@ declare module '@vue/runtime-core' {
|
||||||
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
||||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||||
|
ElDivider: typeof import('element-plus/es')['ElDivider']
|
||||||
ElDropdown: typeof import('element-plus/es')['ElDropdown']
|
ElDropdown: typeof import('element-plus/es')['ElDropdown']
|
||||||
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
|
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
|
||||||
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
|
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<el-breadcrumb class="app-breadcrumb" separator="/">
|
<el-breadcrumb class="app-breadcrumb" separator="/">
|
||||||
<transition-group name="breadcrumb">
|
<transition-group name="breadcrumb">
|
||||||
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
|
<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">{{
|
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{
|
||||||
item.meta.title
|
item.meta.title
|
||||||
}}</span>
|
}}</span>
|
||||||
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
|
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
|
||||||
</el-breadcrumb-item>
|
</el-breadcrumb-item>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
<!-- 顶部缩放侧边栏icon-->
|
||||||
<div style="padding: 0 15px;" @click="toggleClick">
|
<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"
|
<svg :class="{ 'is-active': isActive }" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
|
||||||
width="64" height="64">
|
width="64" height="64">
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
<!-- 顶部全屏icon-->
|
||||||
<div>
|
<div>
|
||||||
<svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="click" />
|
<svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="click" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="!isItemHidden" class="root-sidebar-item">
|
<div v-if="!isItemHidden" class="root-sidebar-item" >
|
||||||
<template
|
<template
|
||||||
v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !(item.meta && item.meta.alwaysShow)">
|
v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !(item.meta && item.meta.alwaysShow)">
|
||||||
<app-link class="link" :to="resolvePath(onlyOneChild.path)">
|
<app-link class="link" :to="resolvePath(onlyOneChild.path)">
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,9 @@
|
||||||
|
|
||||||
<div style=" width:100%">
|
<div style=" width:100%">
|
||||||
<el-card style="max-width: 100vw;margin: 1.5vw;">
|
<el-card style="max-width: 100vw;margin: 1.5vw;">
|
||||||
<template #header><span>消息</span></template>
|
<template #header>
|
||||||
|
<span>消息</span>
|
||||||
|
</template>
|
||||||
<div style="display:flex;flex-direction:row;justify-content: space-around ">
|
<div style="display:flex;flex-direction:row;justify-content: space-around ">
|
||||||
<div>
|
<div>
|
||||||
时间
|
时间
|
||||||
|
|
@ -11,11 +13,13 @@
|
||||||
v-model="value2"
|
v-model="value2"
|
||||||
type="daterange"
|
type="daterange"
|
||||||
unlink-panels
|
unlink-panels
|
||||||
range-separator="To"
|
range-separator="——"
|
||||||
start-placeholder="开始时间"
|
start-placeholder="开始时间"
|
||||||
end-placeholder="结束时间"
|
end-placeholder="结束时间"
|
||||||
:shortcuts="shortcuts"
|
:shortcuts="shortcuts"
|
||||||
:size="large"
|
:size="large"
|
||||||
|
style="margin-left:0.5vw"
|
||||||
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -23,8 +27,8 @@
|
||||||
<el-select
|
<el-select
|
||||||
v-model="value"
|
v-model="value"
|
||||||
clearable
|
clearable
|
||||||
placeholder="Select"
|
placeholder="Status"
|
||||||
style="width: 240px"
|
style="width: 240px;margin-left:0.5vw"
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in options"
|
v-for="item in options"
|
||||||
|
|
@ -37,13 +41,13 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<el-button type="primary">查询</el-button>
|
<el-button type="primary" style="width:80px">查询</el-button>
|
||||||
<el-button>重置</el-button>
|
<el-button style="width:80px">重置</el-button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-card style="max-width: 100vw;height:50vh;margin:1.3vw">
|
<el-card style="max-width: 100vw;height:60vh;margin:1.3vw">
|
||||||
<div style="display:flex;flex-direction: row;justify-content: space-between">
|
<div style="display:flex;flex-direction: row;justify-content: space-between">
|
||||||
<el-button
|
<el-button
|
||||||
text
|
text
|
||||||
|
|
@ -63,15 +67,28 @@
|
||||||
<div>address: {{ row.address }}</div>
|
<div>address: {{ row.address }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="table-cell table-cell-right">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<el-pagination
|
<el-pagination
|
||||||
|
size="large"
|
||||||
background
|
background
|
||||||
layout="prev, pager, next"
|
layout="prev, pager, next"
|
||||||
:total="50"
|
:total="50"
|
||||||
class="mt-[5vh]"
|
style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
|
||||||
/>
|
/>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
|
||||||
|
|
@ -80,6 +97,8 @@
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
// 删除对话框
|
||||||
|
const centerDialogVisible = ref(false);
|
||||||
// 时间选择器
|
// 时间选择器
|
||||||
|
|
||||||
const value2 = ref('');
|
const value2 = ref('');
|
||||||
|
|
@ -120,23 +139,19 @@ const value = ref('');
|
||||||
const options = [
|
const options = [
|
||||||
{
|
{
|
||||||
value: 'Option1',
|
value: 'Option1',
|
||||||
label: 'Option1'
|
label: '未开始'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'Option2',
|
value: 'Option2',
|
||||||
label: 'Option2'
|
label: '进行中'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'Option3',
|
value: 'Option3',
|
||||||
label: 'Option3'
|
label: '暂停'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'Option4',
|
value: 'Option4',
|
||||||
label: 'Option4'
|
label: '已完成'
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'Option5',
|
|
||||||
label: 'Option5'
|
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
@ -167,6 +182,11 @@ const tableData: User[] = [
|
||||||
name: 'Tom',
|
name: 'Tom',
|
||||||
address: 'No. 189, Grove St, Los Angeles'
|
address: 'No. 189, Grove St, Los Angeles'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
date: '2016-05-01',
|
||||||
|
name: 'Tom',
|
||||||
|
address: 'No. 189, Grove St, Los Angeles'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
date: '2016-05-01',
|
date: '2016-05-01',
|
||||||
name: 'Tom',
|
name: 'Tom',
|
||||||
|
|
|
||||||
|
|
@ -1,62 +1,3 @@
|
||||||
<!--<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>
|
<template>
|
||||||
|
|
||||||
<div style=" width:100%">
|
<div style=" width:100%">
|
||||||
|
|
@ -71,10 +12,11 @@
|
||||||
popper-class="my-autocomplete"
|
popper-class="my-autocomplete"
|
||||||
placeholder="Please input"
|
placeholder="Please input"
|
||||||
@select="handleSelect"
|
@select="handleSelect"
|
||||||
|
style="margin-left:0.5vw"
|
||||||
>
|
>
|
||||||
<template #suffix>
|
<template #suffix>
|
||||||
<el-icon class="el-input__icon" @click="handleIconClick">
|
<el-icon class="el-input__icon" @click="handleIconClick">
|
||||||
<edit />
|
<ArrowDownBold />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
</template>
|
</template>
|
||||||
<template #default="{ item }">
|
<template #default="{ item }">
|
||||||
|
|
@ -89,16 +31,16 @@
|
||||||
v-model="value2"
|
v-model="value2"
|
||||||
type="daterange"
|
type="daterange"
|
||||||
unlink-panels
|
unlink-panels
|
||||||
range-separator="To"
|
range-separator="——"
|
||||||
start-placeholder="开始时间"
|
start-placeholder="开始时间"
|
||||||
end-placeholder="结束时间"
|
end-placeholder="结束时间"
|
||||||
:shortcuts="shortcuts"
|
:shortcuts="shortcuts"
|
||||||
:size="large"
|
style="margin-left:0.5vw"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<el-button type="primary">查询</el-button>
|
<el-button type="primary" style="width: 80px">查询</el-button>
|
||||||
<el-button>重置</el-button>
|
<el-button style="width: 80px">重置</el-button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -107,10 +49,54 @@
|
||||||
<div style="display:flex;flex-direction: row;justify-content: space-between">
|
<div style="display:flex;flex-direction: row;justify-content: space-between">
|
||||||
<el-button
|
<el-button
|
||||||
text
|
text
|
||||||
type=''
|
|
||||||
>历史记录</el-button
|
>历史记录</el-button
|
||||||
>
|
>
|
||||||
<el-button type="primary">新建</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>
|
</div>
|
||||||
<el-table
|
<el-table
|
||||||
ref="multipleTableRef"
|
ref="multipleTableRef"
|
||||||
|
|
@ -128,7 +114,19 @@
|
||||||
<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-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-table>
|
||||||
<el-pagination
|
<el-pagination
|
||||||
larger
|
larger
|
||||||
|
|
@ -136,22 +134,21 @@
|
||||||
layout="prev, pager, next"
|
layout="prev, pager, next"
|
||||||
:total="50"
|
:total="50"
|
||||||
class="mt-4"
|
class="mt-4"
|
||||||
style="margin-top:2vh"
|
style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
|
||||||
/>
|
/>
|
||||||
</el-card>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { ElTable } from 'element-plus';
|
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 {
|
interface User {
|
||||||
date: string
|
date: string
|
||||||
name: string
|
name: string
|
||||||
|
|
@ -191,8 +188,6 @@ const tableData: User[] = [
|
||||||
|
|
||||||
// 输入框1
|
// 输入框1
|
||||||
import { onMounted } from 'vue';
|
import { onMounted } from 'vue';
|
||||||
import { Edit } from '@element-plus/icons-vue';
|
|
||||||
|
|
||||||
interface LinkItem {
|
interface LinkItem {
|
||||||
value: string
|
value: string
|
||||||
link: string
|
link: string
|
||||||
|
|
@ -238,7 +233,6 @@ onMounted(() => {
|
||||||
});
|
});
|
||||||
|
|
||||||
// 时间选择器
|
// 时间选择器
|
||||||
const value1 = ref('');
|
|
||||||
const value2 = ref('');
|
const value2 = ref('');
|
||||||
|
|
||||||
const shortcuts = [
|
const shortcuts = [
|
||||||
|
|
|
||||||
137
src/views/table/dynamic-table/EngageChildModule.vue
Normal file
137
src/views/table/dynamic-table/EngageChildModule.vue
Normal file
|
|
@ -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>
|
||||||
203
src/views/table/dynamic-table/EngageChilldSystem.vue
Normal file
203
src/views/table/dynamic-table/EngageChilldSystem.vue
Normal file
|
|
@ -0,0 +1,203 @@
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
@ -1,46 +1,20 @@
|
||||||
<!--<template>-->
|
|
||||||
<!-- -->
|
|
||||||
<!-- <div class="app-container">-->
|
|
||||||
<!-- <div style="margin:0 0 5px 20px">-->
|
|
||||||
<!-- Fixed header, sorted by header order,-->
|
|
||||||
<!-- </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';-->
|
|
||||||
|
|
||||||
<!--export default defineComponent({-->
|
|
||||||
<!-- name: 'DynamicTable',-->
|
|
||||||
<!-- components: { FixedThead, UnfixedThead }-->
|
|
||||||
<!--});-->
|
|
||||||
<!--</script>-->
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<div style=" width:100%">
|
<div style=" width:100%">
|
||||||
<el-card style="max-width: 100vw;margin: 1.5vw;">
|
<el-card style="max-width: 100vw;margin: 1.5vw;">
|
||||||
<template #header><span>项目1</span></template>
|
<template #header><strong >项目1</strong></template>
|
||||||
<div style="display:flex;flex-direction:row;justify-content: space-around ">
|
<div style="display:flex;flex-direction:row;justify-content: space-around ">
|
||||||
<div>
|
<div>
|
||||||
名称
|
名称
|
||||||
<el-input v-model="input" style="width: 240px" placeholder="Please input" />
|
<el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
状态
|
状态
|
||||||
<el-input v-model="input" style="width: 240px" placeholder="Please input" />
|
<el-input v-model="input" style="width: 240px;margin-left:0.5vw" placeholder="请输入" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<el-button type="primary">查询</el-button>
|
<el-button type="primary" style="width:80px">查询</el-button>
|
||||||
<el-button>重置</el-button>
|
<el-button style="width:80px">重置</el-button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -84,15 +58,9 @@
|
||||||
layout="prev, pager, next"
|
layout="prev, pager, next"
|
||||||
:total="50"
|
:total="50"
|
||||||
class="mt-4"
|
class="mt-4"
|
||||||
style="margin-top:2vh"
|
style="display: flex;flex-direction: row;justify-content: center;margin-top:5vh"
|
||||||
/>
|
/>
|
||||||
</el-card>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -137,87 +105,7 @@ const tableData: User[] = [
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
||||||
// 输入框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);
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
links.value = loadAll();
|
|
||||||
});
|
|
||||||
|
|
||||||
// 时间选择器
|
|
||||||
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>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.my-autocomplete li {
|
.my-autocomplete li {
|
||||||
|
|
|
||||||
|
|
@ -1,227 +1,137 @@
|
||||||
<!--<template>-->
|
|
||||||
<!-- <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">-->
|
|
||||||
<!-- Theme documentation-->
|
|
||||||
<!-- </a>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
<!-- <div class="box-item">-->
|
|
||||||
<!-- <span class="field-label">Change Theme : </span>-->
|
|
||||||
<!-- <el-switch v-model="theme" />-->
|
|
||||||
<!-- <aside style="margin-top:15px;">-->
|
|
||||||
<!-- Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.-->
|
|
||||||
<!-- </aside>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </el-card>-->
|
|
||||||
|
|
||||||
<!-- <div class="block">-->
|
|
||||||
<!-- <el-button type="primary">-->
|
|
||||||
<!-- Primary-->
|
|
||||||
<!-- </el-button>-->
|
|
||||||
<!-- <el-button type="success">-->
|
|
||||||
<!-- Success-->
|
|
||||||
<!-- </el-button>-->
|
|
||||||
<!-- <el-button type="info">-->
|
|
||||||
<!-- Info-->
|
|
||||||
<!-- </el-button>-->
|
|
||||||
<!-- <el-button type="warning">-->
|
|
||||||
<!-- Warning-->
|
|
||||||
<!-- </el-button>-->
|
|
||||||
<!-- <el-button type="danger">-->
|
|
||||||
<!-- Danger-->
|
|
||||||
<!-- </el-button>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
|
|
||||||
<!-- <div class="block">-->
|
|
||||||
<!-- <el-button type="primary" :icon="IconEdit" />-->
|
|
||||||
<!-- <el-button type="primary" :icon="IconShare" />-->
|
|
||||||
<!-- <el-button type="primary" :icon="IconDelete" />-->
|
|
||||||
<!-- <el-button type="primary" :icon="IconSearch">-->
|
|
||||||
<!-- Search-->
|
|
||||||
<!-- </el-button>-->
|
|
||||||
<!-- <el-button type="primary">-->
|
|
||||||
<!-- Upload <el-icon><icon-upload /></el-icon>-->
|
|
||||||
<!-- </el-button>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
|
|
||||||
<!-- <div class="block">-->
|
|
||||||
<!-- <el-tag v-for="tag in tags" :key="tag.type" :type="tag.type" class="tag-item">-->
|
|
||||||
<!-- {{ tag.name }}-->
|
|
||||||
<!-- </el-tag>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
|
|
||||||
<!-- <div class="block">-->
|
|
||||||
<!-- <el-radio-group v-model="radio">-->
|
|
||||||
<!-- <el-radio :label="3">-->
|
|
||||||
<!-- Option A-->
|
|
||||||
<!-- </el-radio>-->
|
|
||||||
<!-- <el-radio :label="6">-->
|
|
||||||
<!-- Option B-->
|
|
||||||
<!-- </el-radio>-->
|
|
||||||
<!-- <el-radio :label="9">-->
|
|
||||||
<!-- Option C-->
|
|
||||||
<!-- </el-radio>-->
|
|
||||||
<!-- </el-radio-group>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
|
|
||||||
<!-- <div class="block">-->
|
|
||||||
<!-- <el-slider v-model="slideValue" />-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!--</template>-->
|
|
||||||
|
|
||||||
<!--<script>-->
|
|
||||||
<!--import { defineComponent, markRaw } from 'vue';-->
|
|
||||||
<!--import {-->
|
|
||||||
<!-- Edit as IconEdit,-->
|
|
||||||
<!-- Share as IconShare,-->
|
|
||||||
<!-- Delete as IconDelete,-->
|
|
||||||
<!-- Search as IconSearch,-->
|
|
||||||
<!-- Upload as IconUpload-->
|
|
||||||
<!--} from '@element-plus/icons-vue';-->
|
|
||||||
|
|
||||||
<!--export default defineComponent({-->
|
|
||||||
<!-- name: 'Theme',-->
|
|
||||||
<!-- components: { IconUpload },-->
|
|
||||||
<!-- data() {-->
|
|
||||||
<!-- return {-->
|
|
||||||
<!-- IconEdit: markRaw(IconEdit),-->
|
|
||||||
<!-- IconShare: markRaw(IconShare),-->
|
|
||||||
<!-- IconDelete: markRaw(IconDelete),-->
|
|
||||||
<!-- IconSearch: markRaw(IconSearch),-->
|
|
||||||
<!-- theme: false,-->
|
|
||||||
<!-- tags: [-->
|
|
||||||
<!-- { name: 'Tag One', type: '' },-->
|
|
||||||
<!-- { name: 'Tag Two', type: 'info' },-->
|
|
||||||
<!-- { name: 'Tag Three', type: 'success' },-->
|
|
||||||
<!-- { name: 'Tag Four', type: 'warning' },-->
|
|
||||||
<!-- { name: 'Tag Five', type: 'danger' }-->
|
|
||||||
<!-- ],-->
|
|
||||||
<!-- slideValue: 50,-->
|
|
||||||
<!-- radio: 3-->
|
|
||||||
<!-- };-->
|
|
||||||
<!-- },-->
|
|
||||||
<!-- watch: {-->
|
|
||||||
<!-- theme() {-->
|
|
||||||
<!-- console.log('watch theme', this.theme);-->
|
|
||||||
<!-- // toggleClass(document.body, 'custom-theme');-->
|
|
||||||
<!-- const htmlTag = document.querySelector('html');-->
|
|
||||||
<!-- if (this.theme) {-->
|
|
||||||
<!-- htmlTag.classList.add('dark');-->
|
|
||||||
<!-- } else {-->
|
|
||||||
<!-- htmlTag.classList.remove('dark');-->
|
|
||||||
<!-- }-->
|
|
||||||
<!-- }-->
|
|
||||||
<!-- }-->
|
|
||||||
<!--});-->
|
|
||||||
<!--</script>-->
|
|
||||||
|
|
||||||
<!--<style scoped>-->
|
|
||||||
<!--.field-label{-->
|
|
||||||
<!-- vertical-align: middle;-->
|
|
||||||
<!--}-->
|
|
||||||
<!--.box-card {-->
|
|
||||||
<!-- width: 400px;-->
|
|
||||||
<!-- max-width: 100%;-->
|
|
||||||
<!-- margin: 20px auto;-->
|
|
||||||
<!--}-->
|
|
||||||
|
|
||||||
<!--.block {-->
|
|
||||||
<!-- padding: 30px 24px;-->
|
|
||||||
<!--}-->
|
|
||||||
|
|
||||||
<!--.tag-item {-->
|
|
||||||
<!-- margin-right: 15px;-->
|
|
||||||
<!--}-->
|
|
||||||
<!--</style>-->
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="app-container">
|
||||||
<div v-for="(row, index) in tableData" :key="index" class="table-row">
|
<el-card class="box-card">
|
||||||
<div class="table-cell">
|
<template #header>
|
||||||
<div class="date">
|
<a class="link-type link-title" target="_blank" href="https://vue3-element-admin-site.midfar.com/guide/advanced/theme.html">
|
||||||
<el-icon><timer /></el-icon>
|
Theme documentation
|
||||||
<span>{{ row.date }}</span>
|
</a>
|
||||||
</div>
|
</template>
|
||||||
</div>
|
<div class="box-item">
|
||||||
<div class="table-cell">
|
<span class="field-label">Change Theme : </span>
|
||||||
<el-popover effect="light" trigger="hover" placement="top" width="auto">
|
<el-switch v-model="theme" />
|
||||||
<template #default>
|
<aside style="margin-top:15px;">
|
||||||
<div>name: {{ row.name }}</div>
|
Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.
|
||||||
<div>address: {{ row.address }}</div>
|
</aside>
|
||||||
</template>
|
</div>
|
||||||
<template #reference>
|
</el-card>
|
||||||
<el-tag>{{ row.name }}</el-tag>
|
|
||||||
</template>
|
<div class="block">
|
||||||
</el-popover>
|
<el-button type="primary">
|
||||||
</div>
|
Primary
|
||||||
<div class="table-cell">
|
</el-button>
|
||||||
<el-button size="small" @click="handleEdit(index, row)">Edit</el-button>
|
<el-button type="success">
|
||||||
<el-button size="small" type="danger" @click="handleDelete(index, row)">Delete</el-button>
|
Success
|
||||||
</div>
|
</el-button>
|
||||||
</div>
|
<el-button type="info">
|
||||||
|
Info
|
||||||
|
</el-button>
|
||||||
|
<el-button type="warning">
|
||||||
|
Warning
|
||||||
|
</el-button>
|
||||||
|
<el-button type="danger">
|
||||||
|
Danger
|
||||||
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="block">
|
||||||
|
<el-button type="primary" :icon="IconEdit" />
|
||||||
|
<el-button type="primary" :icon="IconShare" />
|
||||||
|
<el-button type="primary" :icon="IconDelete" />
|
||||||
|
<el-button type="primary" :icon="IconSearch">
|
||||||
|
Search
|
||||||
|
</el-button>
|
||||||
|
<el-button type="primary">
|
||||||
|
Upload <el-icon><icon-upload /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="block">
|
||||||
|
<el-tag v-for="tag in tags" :key="tag.type" :type="tag.type" class="tag-item">
|
||||||
|
{{ tag.name }}
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="block">
|
||||||
|
<el-radio-group v-model="radio">
|
||||||
|
<el-radio :label="3">
|
||||||
|
Option A
|
||||||
|
</el-radio>
|
||||||
|
<el-radio :label="6">
|
||||||
|
Option B
|
||||||
|
</el-radio>
|
||||||
|
<el-radio :label="9">
|
||||||
|
Option C
|
||||||
|
</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="block">
|
||||||
|
<el-slider v-model="slideValue" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { defineComponent, markRaw } from 'vue';
|
||||||
|
import {
|
||||||
|
Edit as IconEdit,
|
||||||
|
Share as IconShare,
|
||||||
|
Delete as IconDelete,
|
||||||
|
Search as IconSearch,
|
||||||
|
Upload as IconUpload
|
||||||
|
} from '@element-plus/icons-vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'Theme',
|
||||||
|
components: { IconUpload },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
IconEdit: markRaw(IconEdit),
|
||||||
|
IconShare: markRaw(IconShare),
|
||||||
|
IconDelete: markRaw(IconDelete),
|
||||||
|
IconSearch: markRaw(IconSearch),
|
||||||
|
theme: false,
|
||||||
|
tags: [
|
||||||
|
{ name: 'Tag One', type: '' },
|
||||||
|
{ name: 'Tag Two', type: 'info' },
|
||||||
|
{ name: 'Tag Three', type: 'success' },
|
||||||
|
{ name: 'Tag Four', type: 'warning' },
|
||||||
|
{ name: 'Tag Five', type: 'danger' }
|
||||||
|
],
|
||||||
|
slideValue: 50,
|
||||||
|
radio: 3
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
theme() {
|
||||||
|
console.log('watch theme', this.theme);
|
||||||
|
// toggleClass(document.body, 'custom-theme');
|
||||||
|
const htmlTag = document.querySelector('html');
|
||||||
|
if (this.theme) {
|
||||||
|
htmlTag.classList.add('dark');
|
||||||
|
} else {
|
||||||
|
htmlTag.classList.remove('dark');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.table-row {
|
.field-label{
|
||||||
display: flex;
|
vertical-align: middle;
|
||||||
align-items: center;
|
}
|
||||||
margin-bottom: 10px;
|
.box-card {
|
||||||
|
width: 400px;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 20px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-cell {
|
.block {
|
||||||
flex: 1;
|
padding: 30px 24px;
|
||||||
padding: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.date {
|
.tag-item {
|
||||||
display: flex;
|
margin-right: 15px;
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date el-icon {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { Timer } from '@element-plus/icons-vue'
|
|
||||||
|
|
||||||
interface User {
|
|
||||||
date: string
|
|
||||||
name: string
|
|
||||||
address: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleEdit = (index: number, row: User) => {
|
|
||||||
console.log(index, row)
|
|
||||||
}
|
|
||||||
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',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
</script>
|
|
||||||
Loading…
Reference in New Issue
Block a user