<template>
<el-row :gutter="50" id="main">
<el-col :span="10" class="box-table">
<div class="default-main ba-table-box">
<el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />
<TableHeader
:buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
:quick-search-placeholder="t('quick Search Placeholder', { fields: t('plan.quick Search Fields') })"
/>
<Table ref="tableRef" />
<PopupForm />
</div>
</el-col>
<el-col :span="8" class="box-plan">
<el-timeline class="plan">
<el-timeline-item v-for="(activity, index) in list" :key="index" :icon="activity.icon"
:type="activity.type" :color="activity.color" :size="activity.size" :hollow="activity.hollow"
:timestamp="activity.timestamp">
{{ activity.content }}
</el-timeline-item>
</el-timeline>
</el-col>
<el-col :span="6" class="box-link">
<el-card>
<template #header>
<div class="card-header">
<span>常用链接</span>
</div>
</template>
<el-link type="primary" href="http://www.jdsim.com.cn/" target="_blank">1.系统登录账号</el-link>
<div>账号: admin</div><br>
</el-card>
</el-col>
</el-row>
</template>
<script setup lang="ts">
import { ref, provide, onMounted } from 'vue'
import baTableClass from '/@/utils/baTable'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
const { t } = useI18n()
const tableRef = ref()
const optButtons = defaultOptButtons(['edit', 'delete'])
const baTable = new baTableClass(
new baTableApi('/admin/Plan/'),
{
pk: 'id',
column: [
{ type: 'selection', align: 'center', operator: false },
{ label: t('plan.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },
{ label: t('operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },
],
dblClickNotEditColumn: [undefined],
},
{
defaultItems: { name: null, content: null, time: null, created_at: null, updated_at: null },
}
)
provide('baTable', baTable)
onMounted(() => {
baTable.table.ref = tableRef.value
baTable.mount()
baTable.getIndex()?.then(() => {
baTable.initSort()
baTable.dragSort()
})
})
const list = [{
content: '启动项目',
timestamp: '2023-04-19 20:15',
size: 'large',
color: 'green',
},
{
content: '搭建项目开发环境',
timestamp: '2023-04-19 20:35',
color: 'green',
}
]
</script>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'plan',
})
</script>
<style scoped lang="scss">
.ba-table-box {
width: 100%;
}
#main {
margin-top: 50px;
.box-link,.box-table,.box-plan {
text-align: center;
}
.plan {
width: 80%;
margin: 0 auto;
}
}
</style>
