devicesmgt/sgzb-ui/src/views/warehouseManage/pushAndAccept/pushAndAcceptDetail.vue

<template>
    <div class="app-container">
        <!-- 表单 -->
        <el-form
            :inline="true"
            :model="queryForm"
            ref="queryForm"
            label-width="68px"
            size="small"
            v-show="showSearch"
        >
            <el-form-item label="关键字" prop="keyWord">
                <el-input
                    v-model.trim="queryForm.keyWord"
                    clearable
                    placeholder="请输入关键字"
                    maxlength="20"
                />
            </el-form-item>
            <!-- 物品种类下拉 -->
            <el-form-item label="物品种类" prop="machineName">
                <!-- <el-select
                    v-model="queryForm.machineName"
                    placeholder="请选择物品种类"
                    filterable
                    clearable
                >
                    <el-option label="物品种类1" value="1"></el-option>
                    <el-option label="物品种类2" value="2"></el-option>
                </el-select> -->
                <el-input
                    v-model.trim="queryForm.machineName"
                    clearable
                    placeholder="请输入物品种类"
                />
            </el-form-item>
            <!-- 设备类型下拉 -->
            <el-form-item label="设备类型" prop="typeName">
                <!-- <el-select
                    v-model="queryForm.typeName"
                    placeholder="请选择设备类型"
                    filterable
                    clearable
                >
                    <el-option label="设备类型1" value="1"></el-option>
                    <el-option label="设备类型2" value="2"></el-option>
                </el-select> -->
                <el-input
                    v-model.trim="queryForm.typeName"
                    clearable
                    placeholder="请输入设备类型"
                    maxlength="20"
                />
            </el-form-item>
            <!-- 规格型号下拉 -->
            <el-form-item label="规格型号" prop="modelName">
                <!-- <el-select
                    v-model="queryForm.modelName"
                    placeholder="请选择规格型号"
                    filterable
                    clearable
                >
                    <el-option label="规格型号1" value="1"></el-option>
                    <el-option label="规格型号2" value="2"></el-option>
                </el-select> -->
                <el-input
                    v-model.trim="queryForm.modelName"
                    clearable
                    placeholder="请输入设备类型"
                    maxlength="20"
                />
            </el-form-item>
            <el-form-item>
                <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="handleQuery"
                    >搜索</el-button
                >
                <el-button icon="el-icon-refresh" plain @click="resetQueryForm"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-button
                class="el-icon-back"
                type="success"
                @click="goBackPushAndAccept"
                size="mini"
                >&nbsp;推送接收</el-button
            >
            <el-button
                type="primary"
                @click="accept"
                size="mini"
                :loading="loading"
                v-if="!isDetail"
                >接收</el-button
            >
            <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
            />
        </el-row>

        <!-- 列表 -->
        <el-table
            :data="tableData"
            style="width: 100%"
            @selection-change="selection"
        >
            <el-table-column
                v-if="!isDetail"
                type="selection"
                width="55"
                align="center"
                :selectable="(row) => row.status == 0"
            />
            <el-table-column
                type="index"
                label="序号"
                align="center"
                width="50"
                :index="
                    indexContinuation(queryParams.pageNum, queryParams.pageSize)
                "
            />
            <el-table-column
                prop="maCode"
                label="机具编号"
                align="center"
                show-overflow-tooltip
            />
            <el-table-column
                prop="machineName"
                label="机具名称"
                align="center"
                show-overflow-tooltip
            />
            <el-table-column
                prop="typeName"
                label="机具类型"
                align="center"
                show-overflow-tooltip
            />
            <el-table-column
                prop="modelName"
                label="规格型号"
                align="center"
                show-overflow-tooltip
            />
            <el-table-column
                prop="rentTime"
                label="租赁日期"
                align="center"
                show-overflow-tooltip
            />
            <el-table-column
                prop="rentPrice"
                label="租赁价格"
                align="center"
                show-overflow-tooltip
            />
            <el-table-column
                prop="unitId"
                label="所属单位"
                align="center"
                show-overflow-tooltip
            />
            <el-table-column
                prop="supplier"
                label="生产厂家"
                align="center"
                show-overflow-tooltip
            />
            <el-table-column
                prop="checkDate"
                label="出厂日期"
                align="center"
                show-overflow-tooltip
            />
            <el-table-column
                prop="isNew"
                label="是否是新装备"
                align="center"
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <el-tag
                        v-if="scope.row.isNew == 0"
                        type="success"
                        size="mini"
                        >是</el-tag
                    >
                    <el-tag
                        v-else-if="scope.row.status == 1"
                        type="danger"
                        size="mini"
                        >否</el-tag
                    >
                </template>
            </el-table-column>
            <el-table-column
                prop="checkCode"
                label="检验证编号"
                align="center"
                show-overflow-tooltip
            />
            <el-table-column
                prop="checkUnit"
                label="检验单位"
                align="center"
                show-overflow-tooltip
            />
            <el-table-column
                prop="checkDate"
                label="检验日期"
                align="center"
                show-overflow-tooltip
            />
            <el-table-column
                prop="nextCheckDate"
                label="下次检验日期"
                align="center"
                show-overflow-tooltip
            />
            <el-table-column
                prop="maUserName"
                label="机手姓名"
                align="center"
                show-overflow-tooltip
                v-if="!isDetail"
            >
                <template slot-scope="scope">
                    <el-button
                        v-if="scope.row.maUserName"
                        type="text"
                        size="mini"
                        @click="getMachinistDetail(scope.row)"
                    >
                        {{ scope.row.maUserName }}
                    </el-button>
                    <span v-else>无</span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
                <template slot-scope="scope">
                    <el-tag
                        v-if="scope.row.status == 0"
                        type="danger"
                        size="mini"
                        >未接收</el-tag
                    >
                    <el-tag
                        v-else-if="scope.row.status == 1"
                        type="success"
                        size="mini"
                        >已接收</el-tag
                    >
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 机手详情Dialog -->
        <el-dialog title="机手详情" :visible.sync="dialogVisible" width="50%">
            <el-card>
                <div class="wrapper">
                    <div class="idCardContainer">
                        <el-image
                            class="idCard"
                            :src="src.IDCardFront"
                            :preview-src-list="src.IDCardFrontList"
                        ></el-image>
                        <el-image
                            class="idCard"
                            :src="src.IDCardBack"
                            :preview-src-list="src.IDCardBackList"
                        ></el-image>
                    </div>
                    <div class="information">
                        <el-row>
                            <el-col :span="10" class="item"
                                >姓名: {{ information.name }}</el-col
                            >
                            <el-col :span="14" class="item"
                                >身份证号: {{ information.IDCard }}</el-col
                            >
                        </el-row>
                        <el-row>
                            <el-col :span="12" class="item"
                                >性别: {{ information.gender }}</el-col
                            >
                        </el-row>
                        <el-row>
                            <el-col :span="10" class="item"
                                >年龄: {{ information.age }}</el-col
                            >
                            <el-col :span="14" class="item"
                                >电话: {{ information.phone }}</el-col
                            >
                        </el-row>
                    </div>
                </div>
            </el-card>
            <!-- 持证信息 -->
            <el-card header="持证信息">
                <div class="certificate">
                    <div
                        class="certificateItem"
                        v-for="(item, index) in certificateList"
                        :key="index"
                    >
                        <el-image
                            class="itemImg"
                            :src="item.src"
                            :preview-src-list="item.previewList"
                        ></el-image>
                        <span class="itemName">{{ item.name }}</span>
                    </div>
                </div>
            </el-card>
            <!-- 关闭按钮 -->
            <el-button
                type="primary"
                slot="footer"
                @click="dialogVisible = false"
                >关闭</el-button
            >
        </el-dialog>
    </div>
</template>

<script>
import { receiveNotificationsDetailsApi } from '@/api/dataPush/index.js'
export default {
    name: 'pushAndAcceptDetail',
    data() {
        return {
            loading: false,
            showSearch: true,
            queryForm: {
                keyWord: '',
                machineName: '',
                typeName: '',
                modelName: '',
            },
            tableData: [
                {
                    machineryNum: '001',
                    machineryName: '机具名称1',
                    machineryType: '机具类型1',
                    specificationModel: '规格型号1',
                    rentalDate: '2021-01-01',
                    rentalPrice: '1000',
                    unit: '所属单位1',
                    manufacturer: '生产厂家1',
                    productionDate: '2021-01-01',
                    isNewEquipment: '是',
                    verificationNum: '检验证编号1',
                    inspectionUnit: '检验单位1',
                    inspectionDate: '2021-01-01',
                    nextInspectionDate: '2021-01-01',
                    machinistName: '机手姓名1',
                    status: 0,
                },
                {
                    machineryNum: '002',
                    machineryName: '机具名称2',
                    machineryType: '机具类型2',
                    specificationModel: '规格型号2',
                    rentalDate: '2021-01-02',
                    rentalPrice: '2000',
                    unit: '所属单位2',
                    manufacturer: '生产厂家2',
                    productionDate: '2021-01-02',
                    isNewEquipment: '否',
                    verificationNum: '检验证编号2',
                    inspectionUnit: '检验单位2',
                    inspectionDate: '2021-01-02',
                    nextInspectionDate: '2021-01-02',
                    machinistName: '',
                    status: 1,
                },
            ],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            total: 0,
            isDetail: false, // 是否详情页
            dialogVisible: false,
            // 机手身份证
            src: {
                IDCardFront:
                    'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                IDCardBack:
                    'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                IDCardFrontList: [
                    'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                ],
                IDCardBackList: [
                    'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                ],
            },
            // 机手信息
            information: {
                name: '张三',
                IDCard: '123456789012345678',
                gender: '男',
                age: '18',
                phone: '12345678901',
            },
            // 持证信息
            certificateList: [
                {
                    name: 'xx范德萨范德萨范德萨范德萨发大水范德萨发大水x证',
                    src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                    previewList: [
                        'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                    ],
                },
                {
                    name: 'xx范德萨范范德萨范德萨发大水范德萨德萨发大水x证',
                    src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    previewList: [
                        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    ],
                },
                {
                    name: 'xx范德萨范德萨发大水x证',
                    src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                    previewList: [
                        'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                    ],
                },
                {
                    name: 'xx范德萨范德萨发大水x证',
                    src: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                    previewList: [
                        'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                    ],
                },
            ],
        }
    },
    created() {
        this.isDetail = this.$route.query.isDetail == 'true' ? true : false
        this.getList()
        this.getGoodsTypeList()
        this.getDeviceTypeList()
        this.getSpecificationModelList()
    },
    methods: {
        // 搜索
        handleQuery() {
            console.log('🚀 ~ handleQuery ~ 搜索:')
            this.getList()
        },
        // 重置
        resetQueryForm() {
            console.log('🚀 ~ resetQueryForm ~ 重置:')
            this.$refs.queryForm.resetFields()
            this.getList()
        },
        // 获取列表
        async getList() {
            const params = {
                receiveId: this.$route.query.id,
                ...this.queryForm,
            }
            const res = await receiveNotificationsDetailsApi(params)
            console.log(res, '接收的数据')

            this.tableData = res.rows
            this.total = res.total
            // console.log('🚀 ~ getList ~ 获取列表:', params)
        },
        // 获取物品种类
        getGoodsTypeList() {
            console.log('🚀 ~ getGoodsTypeList ~ 获取物品种类下拉:')
        },
        // 获取设备类型
        getDeviceTypeList() {
            console.log('🚀 ~ getDeviceTypeList ~ 获取设备类型下拉:')
        },
        // 获取规格型号
        getSpecificationModelList() {
            console.log('🚀 ~ getSpecificationModelList ~ 获取规格型号下拉:')
        },
        // 返回推送接收
        goBackPushAndAccept() {
            this.$router.push({ path: 'pushAndAccept' })
        },
        // 接收
        accept() {
            console.log('🚀 ~ accept ~ 接收:')
            // this.loading = true
            // 接口().then(res => {
            //   this.getList()
            // }).catch(err => {
            //   console.log('🚀 ~ accept ~ err:', err)
            // }).finally(() => {
            //   this.loading = false
            // })
        },
        // 选择
        selection(val) {
            console.log('🚀 ~ selection ~ 选择:', val)
        },
        // 机手详情 - 弹框
        getMachinistDetail(row) {
            console.log('🚀 ~ getMachinistDetail ~ 机手详情:', row)
            this.dialogVisible = true
        },
    },
}
</script>

<style lang="scss" scoped>
.el-row {
    margin-left: 0px !important;
}
.wrapper {
    display: flex;
    .idCardContainer {
        display: flex;
        flex-direction: column;
        .idCard {
            margin-bottom: 10px;
            width: 172px;
            height: 115px;
        }
    }
    .information {
        padding: 0 20px 0 80px;
        width: 100%;
        .item {
            margin-top: 10px;
            margin-bottom: 30px;
        }
    }
}
.certificate {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .certificateItem {
        width: 25%;
        display: flex;
        flex-direction: column;
        margin: 15px 0;
        .itemImg {
            // 居中展示图片
            margin: 5px auto;
            width: 100px;
            height: 120px;
        }
        .itemName {
            margin: 0 5px;
            display: block;
            text-align: center;
        }
    }
}
</style>