<template> <div> <a-row class="mian" type="flex" justify="space-between"> <a-form :model="state" layout="inline" :label-col="labelCol" :wrapper-col="wrapperCol" style=" 100%" > <a-form-item label="姓名" class="left_box"> <a-input v-model:value="state.screen.studentName" /> </a-form-item> <a-form-item class="right_box" :wrapper-col="{ offset: 120 }"> <a-button type="primary" @click="onSubmit()">查询</a-button> <a-button style="margin-left: 10px">重置</a-button> </a-form-item> </a-form> </a-row> <a-row> <a-table :loading="loading" :columns="columns" :data-source="dataSource" bordered :rowKey="(record) => record.id" :pagination="pagination" > <template v-for="col in [ 'studentId', 'studentName', 'sex', 'birthDay', 'idNumber', 'professionName', 'collegeName', 'className', 'admissionDate', 'graduationDate', ]" #[col]="{ text, record }" :key="col" > <div> <a-input v-if="editableData[record.key]" v-model:value="editableData[record.key][col]" style="margin: -5px 0" /> <template v-else> {{ text }} </template> </div> </template> <template #operation="{ record }"> <div class="editable-row-operations"> <span v-if="editableData[record.key]"> <a @click="save(record)">保存</a> <a-popconfirm title="确认取消?" @confirm="cancel(record.key)"> <a>取消</a> </a-popconfirm> </span> <span v-else> <a @click="edit(record)">编辑</a> </span> </div> </template> <!-- <template #confirmStatus="{ record }"> <span v-if="record.confirmStatus"> 是 </span> <span v-else>否</span> </template> --> </a-table> </a-row> </div> </template>
<script> import { studentList, createOrUpdate } from '@/api/table' import { cloneDeep } from 'lodash-es' import { onMounted, defineComponent, reactive, toRefs, ref } from 'vue' import { useRouter } from 'vue-router' //引入路由 const columns = [ { title: '学号', dataIndex: 'studentId', // '25%', key: 'studentId', slots: { customRender: 'studentId', }, }, { title: '姓名', dataIndex: 'studentName', // '15%', key: 'studentName', slots: { customRender: 'studentName', }, }, { title: '性别', dataIndex: 'sex', // '40%', key: 'sex', slots: { customRender: 'sex', }, }, { title: '出生日期', dataIndex: 'birthDay', key: 'birthDay', slots: { customRender: 'birthDay', }, }, { title: '身份证号码', dataIndex: 'idNumber', key: 'idNumber', slots: { customRender: 'idNumber', }, }, { title: '专业名称', dataIndex: 'professionName', key: 'professionName', slots: { customRender: 'professionName', }, }, { title: '学院名称', dataIndex: 'collegeName', key: 'collegeName', slots: { customRender: 'collegeName', }, }, { title: '班级名称', dataIndex: 'className', key: 'className', slots: { customRender: 'className', }, }, { title: '入学日期', dataIndex: 'admissionDate', key: 'admissionDate', slots: { customRender: 'admissionDate', }, }, { title: '毕业日期', dataIndex: 'graduationDate', key: 'graduationDate', slots: { customRender: 'graduationDate', }, }, { title: '查询次数', dataIndex: 'queryCount', key: 'queryCount', slots: { customRender: 'queryCount', }, }, { title: '是否锁定', dataIndex: 'confirm', key: 'confirm', slots: { customRender: 'confirm', }, }, { title: '修改状态', dataIndex: 'updateStatus', key: 'updateStatus', slots: { customRender: 'updateStatus', }, }, { title: '操作', dataIndex: 'operation', '8%', slots: { customRender: 'operation', }, }, ] // defineComponent对 setup的分装 export default defineComponent({ setup() { // const state=reactive({count:0}) //得到的state类似于vue2.x中date返回的响应式数据对象 // 类似vue2.0中的data状态管理 // 在setup()函数中调用reactive（）函数创建响应式数据对象 const state = reactive({ loading: false, names: '', dataSource: [], pagination: { total: 0, pageSize: 10, //每页中显示10条数据 showSizeChanger: true, current: 1, pageSizeOptions: ['10', '20', '50', '100'], //每页中显示的数据 showTotal: (total) => `共有 ${total} 条数据`, //分页中显示总的数据 }, loadings: false, screen: { verificationId: '', studentName: '', }, }) // 为基本数据类型添加响应式状态 const name = ref('我是声明新变量') //声明新变量 如同vue2.0的 let name='声明新变量' // 为复杂数据类型添加响应式状态 // const state = ref({ // count: 0 // }) // 打印name的值 console.log(name.value) // 打印count的值 // console.log(state.value.count) //路由 const router = useRouter() // console.log(router.currentRoute.value.query.id);//获取参数 // const dataSource = state.dataSource const editableData = reactive({}) const edit = (val) => { console.log(val) editableData[val.key] = cloneDeep( state.dataSource.filter((item) => val.key === item.key)[0] ) } const save = (val) => { Object.assign( state.dataSource.filter((item) => val.key === item.key)[0], editableData[val.key] ) delete editableData[val.key] createOrUpdateList(val) } const createOrUpdateList = (val) => { createOrUpdate(val).then((res) => { if (res.code == 0) { console.log('修改成功') } }) } const cancel = (key) => { delete editableData[key] } const onSubmit = () => { getStudentList(state.pagination.current, state.pagination.pageSize) } const getStudentList = (current, pageSize) => { state.screen.page = current state.screen.pageSize = pageSize state.screen.verificationId = router.currentRoute.value.query.id state.loading = true studentList(state.screen) .then((res) => { if (res.code == '0' && res.data.items.length > 0) { const List = [] res.data.items.map((item) => { return List.push( Object.assign({}, item, { key: item.id.toString(), confirm: item.confirmStatus == 'true' ? '是' : '否', }) ) }) state.dataSource = List state.loading = false } else { state.dataSource = [] state.loading = false } state.pagination.pageSize = res.data.pageSize state.pagination.current = res.data.pageNo state.pagination.total = res.data.count }) .catch(() => { state.dataSource = [] state.loading = false }) } //初始化 onMounted(() => { onSubmit() }) // 暴漏给template return { // state 将响应式数据对象return出去供template使用 state, // es6重新赋值 ...toRefs(state), // 必须使用后toRefs具体自行百度 columns, editingKey: '', editableData, labelCol: { span: 4, }, wrapperCol: { span: 14, }, edit, save, cancel, } }, }) </script>
<style scoped lang="less"> .ant-table-wrapper { width: 100%; zoom: 1; } .editable-row-operations a { margin-right: 8px; } .mian { padding-bottom: 13px; margin-bottom: 20px; overflow: hidden; border-bottom: 1px #ccc solid; .right_box { float: right; // width: 20%; } } </style>