test-web/src/views/dengmingcong/cardFillDo/cardFillDo.vue

<template>
    <!-- 卡签补办 -->
    <crud-template ref="crudRef" :homeData="datas">
        <!-- 自定义搜索 -->
        <template #search="{ searchCondition }">
            <!-- 搜索 监听回车 @keyup.enter.native="search"-->
            <el-input v-model="searchCondition.fileTwo" clearable placeholder="车牌号码"
                style="width: 200px;margin: 0 10px 0 10px;" />
            <el-select v-model="searchCondition.fileThree" placeholder="--请输入车牌颜色--" style="margin-right: 10px;">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </template>

        <!-- 自定义编辑提交按钮 -->
        <template #operation="{ scope, tableFrom }">
            <el-button size="small" @click="reissue(scope, tableFrom)">补卡</el-button>
        </template>
        <!-- 自定义弹框内容 -->
        <template #dialog="{ form }">
            <el-form :model="form">
                <el-form-item>
                    <div class="as-layout-horizontal">
                        <el-input v-model="form.crud" type="input" placeholder="读新卡信息" />
                        <el-button type="primary" icon="CreditCard" style="margin-left: 10px;">读卡</el-button>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.crud" disabled type="input" :placeholder="form.four" />
                </el-form-item>
            </el-form>

        </template>
        <!-- 弹窗页脚 -->
        <template #footer>
            <span>
                <el-button @click="crudRef.dialogFormVisible = false">取消</el-button>
                <el-button type="primary">提交</el-button>
            </span>
        </template>
    </crud-template>
</template>
<script setup lang="ts">
// @ts-ignore crudFrom模板
import CrudTemplate from "@/crud/index.vue"
import {
    Data
} from '@/data/cardAfter/cardFillDo' //表单配置
import {
    tableData
} from "@/data/tableData" //表单数据
import {
    ref,
    reactive
} from 'vue'
import axios from 'axios';

import {
    getCurrentInstance
} from 'vue'
const {
    proxy
}: any = getCurrentInstance();

proxy.$request.get('api/user', {}, {
    baseURL: 'http://localhost:8080'
}).then((res: {}) => {
    console.log(res);
}).catch((err: {}) => {
    console.log(err);
})

const datas = reactive(Data);
const crudRef = ref()
const reissue = (scope: any, tableFrom: any) => {
    crudRef.value.dialogFormVisible = true
    crudRef.value.title = '补卡信息'
}

const options = [{
    value: 'Option1',
    label: '蓝色',
},
{
    value: 'Option2',
    label: '黄色',
},
{
    value: 'Option3',
    label: '黑色',
},
{
    value: 'Option4',
    label: '白色',
},
{
    value: 'Option5',
    label: '渐变绿色',
},
{
    value: 'Option6',
    label: '黄绿双拼色',
},
{
    value: 'Option7',
    label: '蓝白渐变色',
},
{
    value: 'Option8',
    label: '未确定',
},
{
    value: 'Option9',
    label: '绿色',
},
{
    value: 'Option10',
    label: '红色',
},
]
</script>
<style lang="scss" scoped>
</style>