Zlpt_Portal/src/views/user/operatorManagement/index.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>