99ditui-admin-ui/src/views/admin/projectlink/components/linktest.vue

<template>
    <div>
        <el-dialog v-model="state.showDialog" destroy-on-close :title="title" draggable :close-on-click-modal="false"
            :close-on-press-escape="false" width="1000px">
                <div>            
                    <el-card class="mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
                        <el-form :inline="true" @submit.stop.prevent>                            
                            <el-form-item label="推广码来源">
                            <el-input v-model="state.filter.keywords" placeholder="请输入推广码来源" />
                            </el-form-item>
                            <el-form-item>
                            <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>          
                            </el-form-item>
                        </el-form>
                    </el-card>
                    <el-card class="my-fill mt8" shadow="never">
                    <el-table v-loading="state.loading" :data="state.projectLinkListData" row-key="id" height="'100%'" style="width: 100%; height: 100%">
                        <el-table-column label="推广码来源" prop="company" min-width="120" show-overflow-tooltip/>
                        <el-table-column label="所属平台" prop="orgName" min-width="120" show-overflow-tooltip/>
                        <el-table-column label="编号" prop="num" min-width="120" show-overflow-tooltip/>
                        <el-table-column label="二维码" prop="qrcodeUrl" min-width="120" show-overflow-tooltip/>
                        <el-table-column label="短链" prop="shortUrl" min-width="120" show-overflow-tooltip/>
                        <el-table-column label="查单码" prop="queryUrl" min-width="120" show-overflow-tooltip/>
                        <el-table-column label="口令" prop="shareCommand" min-width="120" show-overflow-tooltip/>
                        <el-table-column label="申请时间" min-width="120" show-overflow-tooltip>
                            <template #default="{ row }">                                
                                {{row.isUse===1? row.useTime:'' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="姓名" prop="salesman" min-width="120" show-overflow-tooltip/>
                        <el-table-column label="手机号" prop="salesmanPhone" min-width="120" show-overflow-tooltip/>
                        <el-table-column label="备注" prop="salesmanRemark" min-width="120" show-overflow-tooltip/>                        
                    </el-table>                    
                    <div class="my-flex my-flex-end" style="margin-top: 20px">
                        <el-pagination v-model:currentPage="state.pageInput.currentPage"
                            v-model:page-size="state.pageInput.pageSize" :total="state.total" :page-sizes="[10, 20, 50, 100]" small
                            background @size-change="onSizeChange" @current-change="onCurrentChange"
                            layout="total, sizes, prev, pager, next, jumper" />
                    </div>
                </el-card>                
            </div>        
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="admin/tenant/form">
import { reactive, toRefs, getCurrentInstance, ref } from 'vue'
import { PageInputProjectLinkGetPageDto, ProjectLinkListOutput } from '/@/api/admin/data-contracts'
import { ProjectLinkApi } from '/@/api/admin/ProjectLink'

import eventBus from '/@/utils/mitt'

import QRCode from 'qrcodejs2-fixes'
// 定义变量内容
const qrcodeRef = ref()

defineProps({
    title: {
        type: String,
        default: '',
    },
})

// const { proxy } = getCurrentInstance() as any

// const formRef = ref()
const state = reactive({
    showDialog: false,
    sureLoading: false, 
    loading: false, 
    filter: {
        projectId: 0,
        isUse: -1,
        tenantId: 0,
        keywords: ''
    }, pageInput: {
        currentPage: 1,
        pageSize: 10,
    } as PageInputProjectLinkGetPageDto,
    total: 0, 
    projectLinkListData: [] as Array<ProjectLinkListOutput>,
})
// const { form } = toRefs(state)



// 打开对话框
const open = async (row: any = {}) => {    
    state.filter.projectId = row.projectId;
    onQuery();
    state.showDialog = true
}

//查询
const onQuery = async () => {
    state.loading = true

    state.pageInput.filter = state.filter
    const res = await new ProjectLinkApi().getPage(state.pageInput).catch(() => {
        state.loading = false
    })
    state.projectLinkListData = res?.data?.list ?? []
    state.total = res?.data?.total ?? 0
    state.loading = false
}
// 初始化生成二维码
const initQrcode = (text:string) => {
    new QRCode(qrcodeRef.value, {
        text: text,
        width: 125,
        height: 125,
        colorDark: '#000000',
        colorLight: '#ffffff',
    })
}
const onSizeChange = (val: number) => {
    state.pageInput.pageSize = val
    onQuery()
}

const onCurrentChange = (val: number) => {
    state.pageInput.currentPage = val
    onQuery()
}

defineExpose({
    open,
})
</script>