mallBackend/src/views/enterpriseEquipmentManage/iotEquipmentManagement/index.vue

<template>
    <headerTop @search="searchFn" @reset="resetFn"   @add="addFn" @export="exportFn" ></headerTop>
    <addCom ref="addComRef"></addCom>
    <el-card shadow="always" class="content_body_row">
        <el-table :data="tableListInfo.list" border style="width: 100%" show-overflow-tooltip
            :max-height="'calc(100vh - 72px - 48px - 65px - 12px - 60px - 88px)'"
            :height="'calc(100vh - 72px - 48px - 65px - 12px - 60px  - 88px)'">
            <el-table-column type="index" width="72" label="序号" />
            <el-table-column prop="v_company" label="企业名称" min-width="150" />
            <el-table-column prop="v_code" label="编码" min-width="220">
            </el-table-column>
            <el-table-column prop="v_mnoney" label="租赁范围" min-width="220">
            </el-table-column>
            <el-table-column prop="v_equipmentType" label="装备类型" min-width="220">
            </el-table-column>
            <el-table-column prop="v_equipmentCount" label="装备数量" min-width="220">
            </el-table-column>
            <el-table-column prop="v_equipmentName" label="装备名称" min-width="220">
            </el-table-column>
            <el-table-column prop="v_money" label="租金" min-width="220">
            </el-table-column>
            <el-table-column   label="状态" min-width="220">
                <template #default="scope">
                    <div class="todo_status_c" v-if="scope.row.v_status=='1'">
                        待审批
                    </div>
                    <div class="pass_status_c" v-else-if="scope.row.v_status=='2'">
                        已通过
                    </div>
                    <div class="reject_status_c" v-else-if="scope.row.v_status=='3'">
                        已驳回
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200">

                <template #default="scope">
                    <el-button type="primary" size="small" @click.prevent="auditFn(scope.row)">
                        审批
                    </el-button>
                    <el-button type="primary" size="small" @click.prevent="showFn(scope.row)">
                        查看
                    </el-button>
                    <el-button type="danger" size="small" @click.prevent="deleteRowFn(scope.row)">
                        下架
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="paination_out">
            <Pagination :currentPage="paginationInfo.currentPage" :pageSize="paginationInfo.pageSize" @sendPage="getPageFn">
            </Pagination>
        </div>
    </el-card>
</template>

<script lang="ts" setup>
import headerTop from "./com/headerTop.vue"
import addCom from "./com/addCom.vue"
import { ElConfirmBeforeOpert } from "utils/elementCom"
const addComRef = ref()
const paginationInfo = reactive({
    currentPage: 1,
    pageSize: 15
})
const tableData = [
    {
        v_id: '1',
        v_company: '2016-05-03',
        v_code: 'Tom',
        v_mnoney: 'California',
        v_equipmentType: 'Los Angeles',
        v_equipmentCount: 'No. 189, Grove St, Los Angeles',
        v_equipmentName: 'CA 90036',
        v_money:'255',
        v_status: '1',
    },
    {
        v_id: '2',
        v_company: '2016-05-03',
        v_code: 'Tom',
        v_mnoney: 'California',
        v_equipmentType: 'Los Angeles',
        v_equipmentCount: 'No. 189, Grove St, LosNo. 189, Grove St, Los Angeles Angeles',
        v_equipmentName: 'CA 90036',
        v_money:'255',
        v_status: '1',
    },
    {
        v_id: '3',
        v_company: '2016-05-03',
        v_code: 'Tom',
        v_mnoney: 'California',
        v_equipmentType: 'Los Angeles',
        v_equipmentCount: 'No. 189, Grove St, Los Angeles',
        v_equipmentName: 'CA 90036',
        v_money:'255',
        v_status: '1',
    },
    {
        v_id: '4',
        v_company: '2016-05-03',
        v_code: 'Tom',
        v_mnoney: 'California',
        v_equipmentType: 'Los Angeles',
        v_equipmentCount: 'No. 189, Grove St, Los Angeles',
        v_equipmentName: 'CA 90036',
        v_money:'255',
        v_status: '1',

    },
    {
        v_id: '5',
        v_company: '2016-05-03',
        v_code: 'Tom',
        v_mnoney: 'California',
        v_equipmentType: 'Los Angeles',
        v_equipmentCount: 'No. 189, Grove St, Los Angeles',
        v_equipmentName: 'CA 90036',
        v_money:'255',
        v_status: '2',
    },

]

let tableListInfo = reactive({
    list: tableData
})


const addFn = (row: any) => {
    addComRef.value.open()

}

 

const deleteItem = (row: any) => {
    const itemID = row.v_id
    console.log("ITEMid", row)
}

const deleteRowFn = (row: any) => {
    ElConfirmBeforeOpert(
        '操作确认',
        '是否确定下架？',
        deleteItem,
        '确定',
        '取消',
        row
    )

}

const searchFn = (val:any) => {

}

const resetFn = (val:any) => {

}

const exportFn = (val:any) => {

}
const auditFn = (row: any) => {
    addComRef.value.edit({
        title:'666'
    })
}
const showFn = (row: any) => {
    addComRef.value.show({
        title:'666'
    })

}
 



const getPageFn = (val: any) => {
    paginationInfo.currentPage = val.currentPage
    paginationInfo.pageSize = val.pageSize
    initTableList()
}

const initTableList = () => {

}

</script>

<style scoped lang="scss"></style>