|
|
@@ -1,5 +1,176 @@
|
|
|
<template>
|
|
|
- <div> 工地装修 </div>
|
|
|
+ <div class="p-4">
|
|
|
+ <BasicTable @register="registerTable">
|
|
|
+ <template #toolbar> </template>
|
|
|
+ <template #action>
|
|
|
+ <TableAction
|
|
|
+ :actions="[
|
|
|
+ {
|
|
|
+ icon: 'clarity:note-edit-line',
|
|
|
+ label: '编辑',
|
|
|
+ onClick: () => {
|
|
|
+ createMessage.info(`暂未接入`);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'ant-design:delete-outlined',
|
|
|
+ color: 'error',
|
|
|
+ label: '删除',
|
|
|
+ popConfirm: {
|
|
|
+ title: '是否确认删除',
|
|
|
+ confirm: () => {
|
|
|
+ createMessage.info(`暂未接入`);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </BasicTable>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
+<script lang="ts">
|
|
|
+ import { defineComponent } from 'vue';
|
|
|
+ import { BasicTable, useTable, BasicColumn, FormProps, TableAction } from '/@/components/Table';
|
|
|
+ import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
+ // import { Tag } from 'ant-design-vue';
|
|
|
+ import { h } from 'vue';
|
|
|
+ import { Switch } from 'ant-design-vue';
|
|
|
+ import { RentListApi } from '/@/api/bulletin/rent';
|
|
|
+ // param type 0
|
|
|
+ export default defineComponent({
|
|
|
+ components: { BasicTable, TableAction },
|
|
|
+ setup() {
|
|
|
+ const { createMessage } = useMessage();
|
|
|
+ const columns: BasicColumn[] = [
|
|
|
+ {
|
|
|
+ title: 'ID',
|
|
|
+ dataIndex: 'id',
|
|
|
+ fixed: 'left',
|
|
|
+ width: 100,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '发布时间',
|
|
|
+ dataIndex: 'name',
|
|
|
+ width: 230,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '信息标题',
|
|
|
+ dataIndex: 'title',
|
|
|
+ width: 230,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '发布账号',
|
|
|
+ dataIndex: 'phone',
|
|
|
+ width: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ dataIndex: 'state',
|
|
|
+ width: 180,
|
|
|
+ customRender: ({ record }) => {
|
|
|
+ if (!Reflect.has(record, 'pendingStatus')) {
|
|
|
+ record.pendingStatus = false;
|
|
|
+ }
|
|
|
+ return h(Switch, {
|
|
|
+ checked: record.state === '1',
|
|
|
+ checkedChildren: '已启用',
|
|
|
+ unCheckedChildren: '已禁用',
|
|
|
+ loading: false,
|
|
|
+ onChange(checked: boolean) {
|
|
|
+ record.pendingStatus = true;
|
|
|
+ const newStatus = checked ? '1' : '0';
|
|
|
+ const { createMessage } = useMessage();
|
|
|
+ createMessage.info(`暂未接入` + newStatus);
|
|
|
+ // setRoleStatus(record.id, newStatus)
|
|
|
+ // .then(() => {
|
|
|
+ // record.status = newStatus;
|
|
|
+ // createMessage.success(`已成功修改角色状态`);
|
|
|
+ // })
|
|
|
+ // .catch(() => {
|
|
|
+ // createMessage.error('修改角色状态失败');
|
|
|
+ // })
|
|
|
+ // .finally(() => {
|
|
|
+ // record.pendingStatus = false;
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: '',
|
|
|
+ slots: { customRender: 'action' },
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ ];
|
|
|
|
|
|
-<script lang="ts" setup></script>
|
|
|
+ const searchForm: Partial<FormProps> = {
|
|
|
+ labelWidth: 100,
|
|
|
+ schemas: [
|
|
|
+ {
|
|
|
+ field: 'part',
|
|
|
+ component: 'Select',
|
|
|
+ label: '选择',
|
|
|
+ defaultValue: '1',
|
|
|
+ colProps: {
|
|
|
+ span: 4,
|
|
|
+ },
|
|
|
+ componentProps: {
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ label: '全部',
|
|
|
+ value: '1',
|
|
|
+ key: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '正常',
|
|
|
+ value: '2',
|
|
|
+ key: '2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '已关闭',
|
|
|
+ value: '2',
|
|
|
+ key: '2',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'phone',
|
|
|
+ label: '手机号',
|
|
|
+ component: 'Input',
|
|
|
+ colProps: {
|
|
|
+ span: 6,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'fieldTime',
|
|
|
+ component: 'RangePicker',
|
|
|
+ label: '时间字段',
|
|
|
+ colProps: {
|
|
|
+ span: 8,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ // { getForm }
|
|
|
+ const [registerTable] = useTable({
|
|
|
+ title: '工地装修',
|
|
|
+ api: RentListApi,
|
|
|
+ columns: columns,
|
|
|
+ useSearchForm: true,
|
|
|
+ formConfig: searchForm,
|
|
|
+ showTableSetting: true,
|
|
|
+ tableSetting: { fullScreen: true },
|
|
|
+ showIndexColumn: false,
|
|
|
+ rowKey: 'id',
|
|
|
+ });
|
|
|
+ // pagination.value = { pageSize: 20 };
|
|
|
+ return {
|
|
|
+ registerTable,
|
|
|
+ createMessage,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ });
|
|
|
+</script>
|
gemercheung