Zlpt_Portal/src/views/user/goodsUpdown/index.vue

<script setup lang="ts">
    import { ref } from 'vue'
    const queryParams = ref({})

    import TableComponent from 'components/TableComponent/index.vue'
    import FormComponent from 'components/FormComponent/index.vue'
    import PagingComponent from 'components/PagingComponent/index.vue'
    import { getEquipmentListApi } from 'http/api/usercenter/goodsmang'
    import { goodsUpApi, goodsDownApi, goodsDeleteApi } from 'http/api/usercenter/goodsupdown'
    import { ElMessage } from 'element-plus'
    const pageSize = 20
    const pageNumber = 1
    const total: any = ref(0)

    // 上架参数
    const groundingParams: any = ref([])
    // 获取数据列表
    const getList = async () => {
        const res: any = await getEquipmentListApi({})
        console.log('获取数据列表***', res)

        tableData.value = res.rows.filter((item: any) => item !== null)

        total.value = tableData.value.length
    }

    getList()

    // 选择复选框时获取的数据源
    const getRowId = (val: any) => {
        val.forEach((item: any, index: any) => {
            groundingParams.value[index] = {
                /* 设备id */
                maId: item.maId,
                /* 申请时间 */
                applyTime: '',
                /* 申请人 */
                applyUser: '',
                /* 申请企业*/
                applyCompany: '',
                /* 1为上架 2为下架 */
                type: 1
            }
        })
    }

    // 批量上架按钮
    const handleGrounding = async () => {
        const res: any = await goodsUpApi(groundingParams.value)
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '批量上架申请成功'
            })
            getList()
            groundingParams.value = []
        }
    }

    // 批量下架按钮
    const handleOffshelf = async () => {
        groundingParams.value.forEach((item: any) => {
            item.type = 2
        })
        const res: any = await goodsDownApi(groundingParams.value)
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '批量下架申请成功'
            })
            getList()
            groundingParams.value = []
        }
    }
    // 编辑按钮
    const editRowInfo = (row: any) => {
        console.log(row, '编辑当前数据')
    }
    // 删除按钮
    const deleteRowInfo = async (row: any) => {
        const res: any = await goodsDeleteApi([row.upId])
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '删除成功'
            })
            getList()
        }
    }
    // 上架按钮
    const groundingBtn = async (row: any) => {
        groundingParams.value[0] = {
            /* 设备id */
            maId: row.maId,
            /* 申请时间 */
            applyTime: '',
            /* 申请人 */
            applyUser: '',
            /* 申请企业*/
            applyCompany: '',
            /* 1为上架 2为下架 */
            type: 1
        }
        const res: any = await goodsUpApi(groundingParams.value)
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '上架申请成功'
            })
            getList()
            groundingParams.value = []
        }
    }

    // 下架按钮
    const offShelfBtn = async (row: any) => {
        groundingParams.value[0] = {
            /* 设备id */
            maId: row.maId,
            /* 申请时间 */
            applyTime: '',
            /* 申请人 */
            applyUser: '',
            /* 申请企业*/
            applyCompany: '',
            /* 1为上架 2为下架 */
            type: 2
        }
        console.log('下架设备')
        const res: any = await goodsDownApi(groundingParams.value)
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '下架申请成功'
            })
            getList()
            groundingParams.value = []
        }
    }

    const tableProps: any = ref([
        { v_label: '编码', v_props: 'code', v_slot: '', width: '' },
        { v_label: '租赁范围', v_props: 'leaseScope', v_slot: '', width: '' },
        { v_label: '装备类型', v_props: 'modelName', v_slot: '', width: '' },
        { v_label: '装备名称', v_props: 'v_equipment_name', v_slot: '', width: '' },
        { v_label: '租金', v_props: 'monthLeasePrice', v_slot: '', width: '' },
        { v_label: '状态', v_props: 'maStatus', v_slot: 'v_type', width: '' },
        { v_label: '操作', v_props: 'v_operate', v_slot: 'operate', width: '260px' }
    ])

    const tableData: any = ref([])

    // 表单 lable 数据
    const formItemList: any = ref([
        { v_label: '编码', v_typ: 'ipt' },
        { v_label: '状态', v_typ: 'ipt' },
        { v_label: '租赁范围', v_typ: 'sel' },
        { v_label: '装备类型', v_typ: 'sel' },
        { v_label: '装备名称', v_typ: 'ipt' }
    ])
</script>

<template>
    <!-- 订单管理 -->

    <FormComponent :formItemList="formItemList">
        <el-form-item>
            <el-button type="primary" @click="handleGrounding">批量上架</el-button>
            <el-button type="warning" @click="handleOffshelf">批量下架</el-button>
        </el-form-item>
    </FormComponent>

    <!-- 表格 -->

    <TableComponent :tableProps="tableProps" :tableData="tableData" @getRowId="getRowId">
        <template v-slot:v_type="{ row }">
            <el-tag v-if="row.maStatus === '15'" size="small" type="info">待上架审批</el-tag>
            <el-tag v-if="row.maStatus === '16'" size="small" type="warning">待租</el-tag>
            <el-tag v-if="row.maStatus === '17'" size="small" type="success">在租</el-tag>
            <el-tag v-if="row.maStatus === '18'" size="small" type="danger">下架</el-tag>
        </template>
        <template v-slot:operate="{ row }">
            <el-button size="small" type="success" @click="groundingBtn(row)">上架</el-button>
            <el-button size="small" type="warning" @click="offShelfBtn(row)">下架</el-button>
            <el-button size="small" type="primary" @click="editRowInfo(row)">编辑</el-button>
            <!-- <el-button size="small" type="danger" @click="deleteRowInfo(row)">删除</el-button> -->
        </template>
    </TableComponent>

    <PagingComponent
        @getList="getList"
        :pageSize="pageSize"
        :pageNumber="pageNumber"
        :total="total" />
</template>

<style>
    .el-form {
        margin: 15px 0;
    }
</style>