hldy_vue/src/views/iot/tplink/project/ProjectInfoList.vue

<template>
  <a-spin :spinning="syncoading">
    <div class="p-2">
      <!--引用表格-->
      <BasicTable @register="registerTable">
        <!--插槽:table标题-->
        <template #tableTitle>
          <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>
          <a-button preIcon="ant-design:sync-outlined" @click="handleSync"> 同步</a-button>
        </template>
        <!--操作栏-->
        <template #action="{ record }">
          <TableAction :actions="getTableAction(record)"/>
        </template>
        <template v-slot:bodyCell="{ column, record, index, text }">
        </template>
      </BasicTable>
      <!-- 表单区域 -->
      <ProjectInfoDrawer @register="registerDrawer" @success="handleSuccess" />
    </div>
  </a-spin>
</template>

<script lang="ts" name="iot-nuIotCameraInfo" setup>
  import {ref, reactive, createVNode, h} from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { columns,searchFormSchema } from './ProjectInfo.data';
  import { list, sync, deletePrject } from './ProjectInfo.api';
  import { useUserStore } from '/@/store/modules/user';
  import { useRouter } from 'vue-router';
  import { useDrawer } from "@/components/Drawer";
  import ProjectInfoDrawer from './components/ProjectInfoDrawer.vue';
  import {Modal} from "ant-design-vue";
  import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
  //注册drawer
  const [registerDrawer, { openDrawer }] = useDrawer();
  let router = useRouter();
  const formRef = ref();
  const syncoading = ref<boolean>(false);
  const queryParam = reactive<any>({});
  const userStore = useUserStore();
  //注册table数据
  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      title: '护理单元-物联管理-机构信息',
      api: list,
      columns,
      canResize:false,
      formConfig: {
        // labelWidth: 200,
        schemas: searchFormSchema,
      },
      actionColumn: {
        width: 120,
        fixed: 'right',
      },
      beforeFetch: async (params) => {
        return Object.assign(params, queryParam);
      },
    },
  });
  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
  const labelCol = reactive({
    xs:24,
    sm:4,
    xl:6,
    xxl:4
  });
  const wrapperCol = reactive({
    xs: 24,
    sm: 20,
  });

  /**
   * 新增
   */
  function handleCreate() {
    openDrawer(true, {
      isUpdate: false,
      showFooter: true,
      tenantSaas: false,
    });
  }

  /**
   * 编辑
   */
  function handleEdit(record: Recordable) {
    openDrawer(true, {
      record,
      isUpdate: true,
      showFooter: true,
      tenantSaas: false,
    });
  }

  /**
   * 删除
   */
  function handleDelete(record: Recordable) {
    Modal.confirm({
      title: '删除项目',
      width: '500px',
      icon: createVNode(ExclamationCircleOutlined),
      content: createVNode('div', { style: 'color:red;' }, '项目删除后，与之相关信息将失效，确定要删除该项目吗？'),
      okText: '确定',
      onOk() {
        deletePrject(record, reload);
      },
      onCancel() {
      },
      class: 'test',
    });
  }

  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '编辑',
        onClick: handleEdit.bind(null, record),
      },
      {
        label: '删除',
        onClick: handleDelete.bind(null, record),
      },
    ];
  }

  /**
   * 成功回调
   */
  function handleSuccess() {
    reload();
  }

  /**
   * 查询
   */
  function searchQuery() {
    reload();
  }

  /**
   * 重置
   */
  function searchReset() {
    formRef.value.resetFields();
    selectedRowKeys.value = [];
    //刷新数据
    reload();
  }

  /**
   * 信息同步
   */
  function handleSync(){
    syncoading.value = true;
    sync({}).then(res=>{
      syncoading.value = false;
      //刷新数据
      reload();
    }).catch(res=>{
      syncoading.value = false;
    });
  }

</script>

<style lang="less" scoped>
  .jeecg-basic-table-form-container {
    padding: 0;
    .table-page-search-submitButtons {
      display: block;
      margin-bottom: 24px;
      white-space: nowrap;
    }
    .query-group-cust{
      min-width: 100px !important;
    }
    .query-group-split-cust{
      width: 30px;
      display: inline-block;
      text-align: center
    }
    .ant-form-item:not(.ant-form-item-with-help){
      margin-bottom: 16px;
      height: 32px;
    }
    :deep(.ant-picker),:deep(.ant-input-number){
      width: 100%;
    }
  }
</style>