143 lines
4.9 KiB
Vue
143 lines
4.9 KiB
Vue
<script setup lang="ts">
|
|
import PagingComponent from 'components/PagingComponent/index.vue'
|
|
import uploadComponent from 'components/uploadComponent/index.vue'
|
|
const queryParams = ref({})
|
|
const pageSize = 20
|
|
const pageNumber = 1
|
|
const total: any = 20
|
|
const addMachinistVisible = ref(false)
|
|
// 获取数据列表
|
|
const getList = () => {
|
|
console.log('获取数据列表***')
|
|
}
|
|
// 新增机手管理
|
|
const handlerMachinistInfo = () => {
|
|
console.log('新增机手管理')
|
|
addMachinistVisible.value = true
|
|
}
|
|
const tableData = [
|
|
{
|
|
date: '2016-05-02',
|
|
name: '123xxx',
|
|
address: '合肥市蜀山区'
|
|
},
|
|
{
|
|
date: '2016-05-02',
|
|
name: '123xxx',
|
|
address: '合肥市蜀山区'
|
|
},
|
|
{
|
|
date: '2016-05-04',
|
|
name: '123xxx',
|
|
address: '合肥市蜀山区'
|
|
},
|
|
{
|
|
date: '2016-05-01',
|
|
name: '123xxx',
|
|
address: '合肥市蜀山区'
|
|
}
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 机手管理 -->
|
|
|
|
<el-form :model="queryParams" :inline="true" label-width="auto" size="small">
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handlerMachinistInfo">新增</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<!-- 表格 -->
|
|
<el-table
|
|
:data="tableData"
|
|
style="width: 100%"
|
|
:header-cell-style="{
|
|
background: '#3E98FF',
|
|
color: '#fff'
|
|
}"
|
|
max-height="400">
|
|
<el-table-column align="center" prop="name" label="机手姓名" />
|
|
<el-table-column align="center" prop="name" label="机手电话" />
|
|
<el-table-column align="center" prop="date" label="年龄" />
|
|
<el-table-column align="center" prop="name" label="性别" />
|
|
<el-table-column align="center" prop="name" label="身份证号" />
|
|
<el-table-column align="center" prop="name" label="操作" width="180">
|
|
<template #default="scope">
|
|
<el-button size="small" type="primary">编辑</el-button>
|
|
<el-button size="small" type="danger">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<PagingComponent
|
|
@getList="getList"
|
|
:pageSize="pageSize"
|
|
:pageNumber="pageNumber"
|
|
:total="total" />
|
|
|
|
<!-- 新增机手管理弹框 -->
|
|
<el-dialog v-model="addMachinistVisible" title="新增机手信息" align-center width="40%">
|
|
<el-form label-width="120px">
|
|
<el-form-item label="机手管理">
|
|
<el-input autocomplete="off" style="width: 290px" />
|
|
</el-form-item>
|
|
<el-form-item label="机手电话">
|
|
<el-input autocomplete="off" placeholder="请输入新手机号码" style="width: 290px" />
|
|
</el-form-item>
|
|
<el-form-item label="年龄">
|
|
<el-input autocomplete="off" placeholder="请输入新手机号码" style="width: 290px" />
|
|
</el-form-item>
|
|
<el-form-item label="性别">
|
|
<el-input autocomplete="off" placeholder="请输入新手机号码" style="width: 290px" />
|
|
</el-form-item>
|
|
<el-form-item label="身份证号">
|
|
<el-input autocomplete="off" placeholder="请输入新手机号码" style="width: 290px" />
|
|
</el-form-item>
|
|
<el-form-item label="身份证照片">
|
|
<uploadComponent
|
|
:maxLimit="1"
|
|
listType="picture-card"
|
|
:acceptTypeList="['.jpg', '.jpeg', '.png']"
|
|
height="120px"
|
|
width="150px">
|
|
<template v-slot:textContent>+ 上传头像面</template>
|
|
</uploadComponent>
|
|
<uploadComponent
|
|
:maxLimit="1"
|
|
listType="picture-card"
|
|
:acceptTypeList="['.jpg', '.jpeg', '.png']"
|
|
height="120px"
|
|
width="150px">
|
|
<template v-slot:textContent>+ 上传国徽面</template>
|
|
</uploadComponent>
|
|
</el-form-item>
|
|
<el-form-item label="持证信息">
|
|
<uploadComponent
|
|
:maxLimit="1"
|
|
listType="picture-card"
|
|
:acceptTypeList="['.jpg', '.jpeg', '.png']"
|
|
height="120px"
|
|
width="150px">
|
|
<template v-slot:textContent>+ 上传证件信息</template>
|
|
</uploadComponent>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="success">保 存</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<style>
|
|
.el-form {
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.el-upload {
|
|
border: 1px solid #333;
|
|
margin: 0 5px;
|
|
padding: 15px;
|
|
}
|
|
</style>
|