Cold_putoutstorage_web/src/views/essentialinfo/vaccineName.vue

<!-- 品种 -->
<template>
    <div class="">
        <tables ref="TableRef" :requestApi="productList" :columns="columns" :initParam="data.initParam" :border="true">
            <template #right="{ row }">
                <el-button link type="primary" size="small" @click="showEdit(row)">编辑</el-button>
                <el-button link type="danger" size="small" @click="deleteFy(row)">删除</el-button>
            </template>
        </tables>
    </div>
</template>

<script setup lang="ts">
import tables from "@/components/table.vue";
import { productList, productDel, productedit } from "@/api";
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive,ref} from 'vue'
const TableRef = ref()
// 渲染表格
const columns: any = [
    { type: 'index', label: '编号', width: 80, },
    { prop: 'name', label: '名称', width: 300 },
    { prop: 'operation', label: '操作', fixed: 'right', align: 'left', 'min-width': 200 }
]
const emit:any = defineEmits(['setTable','setBasic'])
//请求参数
const data: any = reactive({
    initParam: {
        "name": ""
    }
})

/**
 * 删除
 * @param data 列数据
 */
 const deleteFy = (data: any) => {
    ElMessageBox.confirm('该字段所有已有数据会一同被删除，且无法恢复', '是否确认删除', {
        confirmButtonText: '立即删除',
        cancelButtonText: '取消',
        type: 'error',
        center: true,
    }).then(async() => {
        const reslut:any = await productDel({id:data.id})
        if(reslut.code==200)ElMessage.success('删除成功');TableRef.value?.getTableList();emit('setBasic', '')
    }).catch(() => {
        ElMessage.info('已取消删除')
    })
}
//编辑
const showEdit = async (row: any) => {
    console.log('编辑',row)
    ElMessageBox.prompt(`编辑规格，请填写正确格式`, '编辑', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        inputValue:row.name,
        inputPattern: /\S/,
        inputErrorMessage: `名称格式不能为空`,
    }).then(async ({ value }) => {
        const reslut: any = await productedit({id:row.id,name:value})
        if (reslut.code == 200 && reslut.msg == '更新成功') {
            ElMessage.success(reslut.msg)
            emit('setTable', '')
        }
    }).catch(() => {
        ElMessage.info('已取消编辑')
    })
}
//暴露方法
defineExpose({
    TableRef
})
</script>
<style lang="scss">
/* @import url(); 引入css类 */
</style>