yxy/web/src/views/backend/borrow/borrowUseing/index.vue

<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info"
                  show-icon/>

        <!-- 表格顶部菜单 -->
        <TableHeader
            :buttons="['refresh', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('borrow.borrowuseing.username') + '/' + t('borrow.borrowuseing.mobile') })"
        />

        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table>
            <template #status>
                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                <el-table-column  prop="status" :label="t('borrow.borrowuseing.status')" render="tag" width="180">
                    <template #default="scope">
                        <div v-if="scope.row.status == '0'"><el-tag  type="danger">实验室审批</el-tag></div>
                        <div v-else-if="scope.row.status == '1'"><el-tag  type="info">管理员驳回</el-tag></div>
                        <div v-else-if="scope.row.status == '2'"><el-tag  type="warning">待使用</el-tag></div>
                        <div v-else-if="scope.row.status == '3'"><el-tag  type="success">使用中</el-tag></div>
                        <div v-else-if="scope.row.status == '4'"><el-tag  type="success">已归还</el-tag></div>
                        <div v-else-if="scope.row.status == '5'"><el-tag  type="danger">已逾期</el-tag></div>
                        <div v-else-if="scope.row.status == '6'"><el-tag  type="danger">学院审批</el-tag></div>
                        <div v-else-if="scope.row.status == '7'"><el-tag  type="info">学院驳回</el-tag></div>
                        <div v-else><el-tag type="danger">未知状态</el-tag></div>
                    </template>
                </el-table-column>
            </template>
        </Table>
        <!-- 表单 -->
        <PopupForm/>
    </div>
</template>

<script setup lang="ts">
import {onMounted,onUpdated, onBeforeUnmount ,provide} from 'vue'
import {useI18n} from 'vue-i18n'
import TableHeader from "/@/components/table/header/index.vue";
import Table from "/@/components/table/index.vue";
import PopupForm from "./popupForm.vue";
import {useAdminInfo} from "/@/stores/adminInfo";
import {defaultOptButtons} from "/@/components/table/index";
import baTableClass from "/@/utils/baTable";
import {baTableApi} from "/@/api/common";
 defineOptions({
    name: 'borrow/borrowUseing',
})

const {t} = useI18n()
const adminInfo = useAdminInfo()

const optButtons = defaultOptButtons(['delete'])

const baTable = new baTableClass(
    new baTableApi('/admin/borrow.BorrowUseing/'), {
        filter:
          {
              limit: 20,
              order: "id,desc",
          },
        column: [
            {type: 'selection', align: 'center', operator: false},
            {label: t('Id'), prop: 'id', align: 'center', operator: '=', operatorPlaceholder: t('Id'), width: 70},
            {
                label: t('borrow.borrowuseing.username'),
                prop: 'username',
                align: 'center',
                operator: 'LIKE',sortable: 'custom',
                operatorPlaceholder: t('Fuzzy query')
            },
            {
                label: t('borrow.borrowuseing.mobile'),
                prop: 'mobile',
                align: 'center',
                operator: 'LIKE',
                operatorPlaceholder: t('Fuzzy query')
            },
            {
                label: t('borrow.borrowuseing.expected end time'),
                prop: 'expected_end_time',
                align: 'center',
                operator: 'LIKE',sortable: 'custom',
                operatorPlaceholder: t('Fuzzy query')
            },
            {
                label: t('borrow.borrowuseing.remarks'),
                prop: 'remarks',
                align: 'center',
                operator: "LIKE",
                operatorPlaceholder: t('Fuzzy query')
            },
            {
                label: t('borrow.borrowuseing.status'),
                prop: 'status',
                align: 'center',
                render: 'slot',
                slotName: 'status',
                operator: 'eq',sortable: 'custom',
            },
            {
                label: t('borrow.borrowuseing.approval person'),
                prop: 'approval_person',
                align: 'center',
                operator: "LIKE",
                sortable: 'custom',
                operatorPlaceholder: t('Fuzzy query')
            },
            {
                label: t('Create time'),
                prop: 'create_time',
                align: 'center',
                render: 'datetime',
                sortable: 'custom',
                operator: 'RANGE',
                width: 160
            },
            {
                label: t('Operate'),
                align: 'center',
                width: '100',
                render: 'buttons',
                buttons: optButtons,
                operator: false,
            },
        ],
        dblClickNotEditColumn: [undefined, 'status'],
    },
    {
        defaultItems: {
            status: '1',
        }
    },
    {},{
        requestEdit : ()=>{
            // console.log(123)
            for(let i = 0; i < baTable.form.items!.fileList.length ; i++){
                baTable.form.items!.fileList[i]['url'] = 'https://yxy.glut.cc/' + baTable.form.items!.fileList[i]['sign']
            }
        }
    }

)
// const processFileList =  () => {
//     console.log(baTable.form)
//     for(let i = 0; i < baTable.form.items!.fileList.length ; i++){
//         baTable.form.items!.fileList[i]['url'] = 'http://localhost:8000/' + baTable.form.items!.fileList[i]['sign']
//     }
// }

provide('baTable', baTable)

baTable.mount()
baTable.getIndex()
</script>

<style scoped lang="scss">

</style>