<template>
|
<div class="landerBox">
|
<div class="landerTopBox">
|
<el-button :icon="Plus" @click="dialogFormVisible = true">新建</el-button>
|
<el-input
|
v-model="input4"
|
style="width: 300px"
|
placeholder="请输入关键字搜索"
|
>
|
<template #suffix>
|
<el-icon class="el-input__icon"><search /></el-icon>
|
</template>
|
</el-input>
|
</div>
|
<div class="landerContentBox">
|
<el-table
|
ref="multipleTableRef"
|
:data="tableData"
|
row-key="id"
|
border
|
style="width: 100%"
|
@selection-change="handleSelectionChange"
|
class="landerTable"
|
>
|
<el-table-column type="selection" width="55" />
|
<el-table-column prop="id" label="序号" width="70" />
|
<el-table-column prop="name" label="模型名称" width="180" />
|
<el-table-column prop="joint" label="关节数据量" width="180" />
|
<el-table-column prop="isSimulate" label="是否可仿真" width="180" />
|
<el-table-column prop="createTime" label="创建时间" width="180" />
|
<el-table-column prop="creator" label="创建人" />
|
</el-table>
|
<div class="lander-pagination-block">
|
<el-pagination
|
style="width: 100%"
|
v-model:current-page="currentPage"
|
:page-size="pageSize"
|
:size="size"
|
:background="background"
|
layout="total, prev, pager, next"
|
:total="100"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
|
<el-dialog v-model="dialogFormVisible" title="Shipping address">
|
<el-form :model="form">
|
<el-form-item label="Promotion name" :label-width="formLabelWidth">
|
<el-input v-model="form.name" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="Zones" :label-width="formLabelWidth">
|
<el-select v-model="form.region" placeholder="Please select a zone">
|
<el-option label="Zone No.1" value="shanghai" />
|
<el-option label="Zone No.2" value="beijing" />
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="dialogFormVisible = false">Cancel</el-button>
|
<el-button type="primary" @click="dialogFormVisible = false">
|
Confirm
|
</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, ref } from "vue";
|
import { Plus } from "@element-plus/icons-vue";
|
import type { ComponentSize, TableInstance } from "element-plus";
|
|
// 搜索
|
const input4 = ref("");
|
|
// 表格
|
const multipleTableRef = ref<TableInstance>();
|
const multipleSelection = ref<any[]>([]);
|
const dialogTableVisible = ref(false);
|
const dialogFormVisible = ref(false);
|
const formLabelWidth = "140px";
|
// 分页
|
const currentPage = ref(4);
|
const pageSize = ref(20);
|
const size = ref<ComponentSize>("default");
|
const background = ref(true);
|
const form = reactive({
|
name: "",
|
region: "",
|
date1: "",
|
date2: "",
|
delivery: false,
|
type: [],
|
resource: "",
|
desc: "",
|
});
|
|
const tableData = [
|
{
|
id: 1,
|
createTime: "2016-05-03",
|
name: "Tom",
|
address: "No. 189, Grove St, Los Angeles",
|
},
|
{
|
id: 2,
|
createTime: "2016-05-02",
|
name: "Tom",
|
address: "No. 189, Grove St, Los Angeles",
|
},
|
{
|
id: 3,
|
createTime: "2016-05-04",
|
name: "Tom",
|
address: "No. 189, Grove St, Los Angeles",
|
},
|
{
|
id: 4,
|
createTime: "2016-05-01",
|
name: "Tom",
|
address: "No. 189, Grove St, Los Angeles",
|
},
|
{
|
id: 5,
|
createTime: "2016-05-08",
|
name: "Tom",
|
address: "No. 189, Grove St, Los Angeles",
|
},
|
{
|
id: 6,
|
createTime: "2016-05-06",
|
name: "Tom",
|
address: "No. 189, Grove St, Los Angeles",
|
},
|
{
|
id: 7,
|
createTime: "2016-05-07",
|
name: "Tom",
|
address: "No. 189, Grove St, Los Angeles",
|
},
|
];
|
|
const handleCurrentChange = (val: number) => {
|
console.log(`current page: ${val}`);
|
};
|
|
const handleSelectionChange = (val: []) => {
|
multipleSelection.value = val;
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.landerBox {
|
width: 100%;
|
height: 100%;
|
|
.landerTopBox {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 50px;
|
padding: 0 10px;
|
box-sizing: border-box;
|
}
|
.landerContentBox {
|
max-height: calc(100% - 120px);
|
padding: 0 10px;
|
box-sizing: border-box;
|
|
.landerTable {
|
height: 750px;
|
}
|
}
|
.lander-pagination-block {
|
height: 60px;
|
display: flex;
|
justify-content: flex-end;
|
padding: 0 20px;
|
background-color: #fff;
|
}
|
}
|
</style>
|
