table

<style scoped lang="scss"></style><template><div><BasicTable @register="registerTable"><template #toolbar><Button type="primary" @click="handleCreatedAdd">添加</Button></template><template #bodyCell="{ record, column }"><template v-if="column.key === 'State'"><Switchv-model:checked="record.State":checkedValue="1":unCheckedValue="2"@change="switchTypes(record)"/></template><template v-if="column.key === 'action'"><TableAction:actions="[{label: '详情',onClick: handleDetails.bind(null, record),},{label: '编辑',onClick: handleEdit.bind(null, record),},{label: '删除',color: 'error',onClick: handleDelete.bind(null, record),},]"/></template></template></BasicTable><addEditModal @register="addEditModalOpen" @success="handleSuccess"></addEditModal></div>
</template><script setup lang="ts">import { createVNode } from 'vue';import { ExclamationCircleOutlined } from '@ant-design/icons-vue';import { BasicTable, useTable, TableAction } from '@/components/Table';import { useModal } from '@/components/Modal';import { Button, Switch, Modal } from 'ant-design-vue';import { useMessage } from '@/hooks/web/useMessage';const { createMessage } = useMessage();// import { getStaticUrl } from '@/common/global';import { columns, searchFormSchema } from './askedQuestions.data';import addEditModal from './components/addEditModal/index.vue';const [registerTable, { reload }] = useTable({title: '常见问题',columns,dataSource: [{Id: 18,QuestionType: 1,QuestionTitle: '如何注册账号？',QuestionContent:'下载元氛之后，打开pc端或手机端软件，选择国家和地区，填写手机号码获取验证码登录即可',State: 1,StaffName: 'YJ',CreateTime: '2024-04-26 14:36:33',UpdateTime: '2024-05-11 13:31:43',},{Id: 22,QuestionType: 1,QuestionTitle: '如何设置密码',QuestionContent: '账号登录之后，点击我的-右上角【≡】-设置-账号与安全，设置登录密码即可。',State: 1,StaffName: 'wxk',CreateTime: '2024-05-09 11:02:55',UpdateTime: '2024-05-09 11:02:55',},{Id: 23,QuestionType: 1,QuestionTitle: '忘记密码如何找回',QuestionContent: '手机/pc端登录页面点击“忘记密码”，通过原绑定的手机号按提示进行密码找回。',State: 1,StaffName: 'wxk',CreateTime: '2024-05-09 11:03:09',UpdateTime: '2024-05-09 11:03:09',},{Id: 24,QuestionType: 1,QuestionTitle: '账号如何进行实名认证',QuestionContent:'账号登录之后，点击我的-右上角【≡】-设置-账号与安全-实名认证，上传身份证正反面，无遮挡，无模糊，无缺角，点击确认即可。',State: 1,StaffName: 'wxk',CreateTime: '2024-05-09 11:03:25',UpdateTime: '2024-05-09 11:03:25',},{Id: 25,QuestionType: 1,QuestionTitle: '实名认证可以变更/取消/解绑吗？',QuestionContent:'根据实名相关规则，防止账号买卖等风险，一个身份信息只能认证一个账号，一旦认证成功，不支持变更/取消/解绑',State: 1,StaffName: 'wxk',CreateTime: '2024-05-09 11:03:40',UpdateTime: '2024-05-09 11:03:40',},{Id: 26,QuestionType: 2,QuestionTitle: '充值未到账',QuestionContent:'充值过后可能或有3-10分钟的延迟，如扣费后没有收到充值的虚拟币，请联系官方运营进行处理。',State: 1,StaffName: 'wxk',CreateTime: '2024-05-09 11:04:55',UpdateTime: '2024-05-09 11:04:55',},{Id: 27,QuestionType: 3,QuestionTitle: '什么是公会？',QuestionContent:'公会是一个主播团体，加入公会可以享受到公会的福利待遇，同时主播也应当履行自己的主播义务。',State: 1,StaffName: 'wxk',CreateTime: '2024-05-09 11:05:30',UpdateTime: '2024-05-09 11:05:30',},{Id: 28,QuestionType: 3,QuestionTitle: '如何加入公会',QuestionContent: '在【我的】页面点击右上角【≡】-【我的公会】，输入公会ID或者昵称加入公会',State: 1,StaffName: 'wxk',CreateTime: '2024-05-09 11:05:43',UpdateTime: '2024-05-09 11:05:43',},{Id: 29,QuestionType: 3,QuestionTitle: '主播如何退出公会',QuestionContent:'正常退会：经过与会长协商，可由会长进行操作退会\n强制退会：与会长沟通无效，主播可以去【我的公会】发起退会申请，7天后自动脱离该公会。',State: 1,StaffName: 'wxk',CreateTime: '2024-05-09 11:05:54',UpdateTime: '2024-05-09 11:05:54',},{Id: 30,QuestionType: 3,QuestionTitle: '如何入驻公会',QuestionContent: '公会入驻可以联系官方运营，提交入驻手续进行审核。',State: 1,StaffName: 'wxk',CreateTime: '2024-05-09 11:06:06',UpdateTime: '2024-05-09 11:06:06',},],formConfig: {// 表单labelWidth: 100,schemas: searchFormSchema,},useSearchForm: true, // 使用搜索表单showTableSetting: true, //刷新按钮bordered: true, //是否显示表格边框showIndexColumn: false, // 是否显示序号rowKey: 'Id', //根据唯一的rowKey 动态删除指定行的数据.可用于不刷新整个表格而局部更新数据actionColumn: {width: 150, // 宽度title: '操作', // 操作名称dataIndex: 'action', //字段fixed: 'right', // 显示到右边},});function switchTypes(record: any) {console.log(record);}const [addEditModalOpen, { openModal }] = useModal();const handleCreatedAdd = () => {openModal(true, { isUpdate: false });};//详情const handleDetails = (record: any) => {};//编辑const handleEdit = (record: any) => {};//删除const handleDelete = (record: any) => {Modal.confirm({title: () => '提示',icon: () => createVNode(ExclamationCircleOutlined),content: () => '此操作将永久删除本条数据, 是否继续?',async onOk() {try {return await new Promise((resolve, reject) => {setTimeout(() => {if (Math.random() > 0.5) {console.log(Math.random());reload();createMessage.success('删除成功');resolve(true);} else {reject();}}, 1000);});} catch {return console.log('Oops errors!');}},// eslint-disable-next-line @typescript-eslint/no-empty-functiononCancel() {},});};const handleSuccess = () => {};
</script>

modal

<style scoped lang="scss"></style><template><div><BasicModal @register="registerModal" v-bind="$attrs" title="添加"></BasicModal></div>
</template><script setup lang="ts">import { ref, unref } from 'vue';import { BasicModal, useModalInner } from '@/components/Modal';// import { Button, Modal, Row, Col, Image, ImagePreviewGroup } from 'ant-design-vue';// import { useMessage } from '@/hooks/web/useMessage';// const { createMessage } = useMessage();// import { getStaticUrl, emptyValueEnum } from '@/common/global';const isUpdate = ref(true);const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data: any) => {setModalProps({ confirmLoading: false });// resetFields();console.log(data.record);isUpdate.value = !!unref(data.isUpdate);if (unref(isUpdate.value)) {// setFieldsValue({//   QuestionType: data.record.QuestionType,//   QuestionDesc: data.record.QuestionDesc,//   state: data.record.State,// });}});
</script>