增加详情

src/views/directory/tbgj/data.ts

@@ -422,4 +422,80 @@ export const columnsgjk: BasicColumn[] = [
         title: '推送参数',
         dataIndex: 'requestParam'
     },
-]
\ No newline at end of file
+]
+
+
+export const formSchema: FormSchema[] = [
+    // TODO 主键隐藏字段，目前写死为ID
+    {label: '', field: 'id', component: 'Input', show: false},
+    {
+      label: '污染地块编码',
+      field: 'wrdkbm',
+      component: 'Input',
+      componentProps:{
+        disabled: true
+      },
+    },
+    {
+      label: '推送内容',
+      field: 'node',
+      component: 'Input',
+      componentProps:{
+        disabled: true
+      },
+    },
+    {
+      label: '推送地址',
+      field: 'url',
+      component: 'Input',
+      componentProps:{
+        disabled: true
+      },
+    },
+    {
+      label: '推送参数',
+      field: 'param',
+      component: 'Input',
+      componentProps:{
+        disabled: true
+      },
+    },
+    {
+      label: '推送结果',
+      field: 'rest',
+      component: 'Input',
+      componentProps:{
+        disabled: true
+      },
+    },
+    {
+      label: '状态',
+      field: 'status',
+      component: 'Select',
+      componentProps: () => {
+        return {
+          options: [
+            {
+              label: '成功',
+              value: 1,
+            },
+            {
+              label: '失败',
+              value: 0,
+            },
+          ],
+          disabled: true
+        };
+      },
+    },
+    {
+      label: '推送时间',
+      field: 'tsamp',
+      component: 'DatePicker',
+      componentProps: {
+        showTime: true,
+        valueFormat: 'YYYY-MM-DD hh:mm:ss',
+        disabled: true
+      },
+    },
+  ];
\ No newline at end of file

src/views/directory/tbgj/fileErrorlList.vue

 <template>
   <div>
     <!--引用表格-->
-   <BasicTable @register="registerTable" :searchInfo="{pageSize:10000}">
+   <BasicTable @register="registerTable">
     </BasicTable>
   </div>
 </template>
@@ -23,6 +23,9 @@
         api: fileErrorllist,
         columns: columnsgjk,
         canResize:false,
+        pagination: {
+          pageSize: 10000,
+        },
         formConfig: {
           labelWidth: 120,
           schemas: searchFormSchemagjk,

src/views/directory/tbgj/gjkjlList.vue

 <template>
   <div>
     <!--引用表格-->
-   <BasicTable @register="registerTable" :searchInfo="{pageSize:100}">
+    <BasicTable @register="registerTable">
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
     </BasicTable>
+
+    <!-- 表单区域 -->
+    <PushFileModal @register="registerModal" @success="handleSuccess"></PushFileModal>
   </div>
 </template>
 
 <script lang="ts" name="report-pushLog" setup>
-  import {ref, computed, unref} from 'vue';
-  import {BasicTable, useTable, TableAction} from '/@/components/Table';
-  import {useModal} from '/@/components/Modal';
-  import { useListPage } from '/@/hooks/system/useListPage'
-  import {columnsgjk, searchFormSchemagjk} from './data';
+  import { ref, computed, unref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import PushFileModal from './modules/PushFileModal.vue';
+  import { columnsgjk, searchFormSchemagjk } from './data';
   import { gjkjllist } from './api';
 
   //注册model
-  const [registerModal, {openModal}] = useModal();
+  const [registerModal, { openModal }] = useModal();
   //注册table数据
-  const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
-       tableProps:{
-        title: '国家库记录',
-        api: gjkjllist,
-        columns: columnsgjk,
-        canResize:false,
-        formConfig: {
-          labelWidth: 120,
-          schemas: searchFormSchemagjk,
-          autoSubmitOnEnter:true,
-          showAdvancedButton:true,
-        },
-        showActionColumn: false
+  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+    tableProps: {
+      title: '国家库记录',
+      api: gjkjllist,
+      columns: columnsgjk,
+      canResize: false,
+      pagination: {
+        pageSize: 100,
+      },
+      formConfig: {
+        labelWidth: 120,
+        schemas: searchFormSchemagjk,
+        autoSubmitOnEnter: true,
+        showAdvancedButton: true,
+      },
+      actionColumn: {
+        width: 120,
       },
-   })
+      scroll: { y: 1000 },
+      // showActionColumn: false
+    },
+  });
 
-   const [registerTable] = tableContext
+  /**
+   * 详情
+   */
+  function handleDetail(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+      showFooter: false,
+    });
+  }
 
-</script>
-<style scoped>
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '详情',
+        onClick: handleDetail.bind(null, record),
+      },
+    ];
+  }
 
-</style>
+  const [registerTable] = tableContext;
+</script>
+<style scoped></style>

src/views/directory/tbgj/modules/PushFileModal.vue

+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit" width="40%">
+         <BasicForm @register="registerForm"/>
+     </BasicModal>
+</template>
+
+<script lang="ts" setup>
+    import {ref, computed, unref} from 'vue';
+    import {BasicModal, useModalInner} from '/@/components/Modal';
+    import {BasicForm, useForm} from '/@/components/Form/index';
+    import {formSchema} from '../data';
+    // Emits声明
+    const emit = defineEmits(['register','success']);
+    const isUpdate = ref(true);
+    //表单配置
+    const [registerForm, {resetFields, setFieldsValue, validate}] = useForm({
+        labelWidth: 150,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+    });
+    //表单赋值
+    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
+        //重置表单
+        await resetFields();
+        setModalProps({confirmLoading: false,showCancelBtn:data?.showFooter,showOkBtn:data?.showFooter});
+        isUpdate.value = !!data?.isUpdate;
+        if (unref(isUpdate)) {
+            //表单赋值
+            await setFieldsValue({
+                ...data.record,
+            });
+        }
+    });
+    //设置标题
+    const title = computed(() => (!unref(isUpdate) ? '详情' : '详情'));
+    //表单提交事件
+    async function handleSubmit(v) {
+        try {
+            setModalProps({confirmLoading: true});
+           
+            //关闭弹窗
+            closeModal();
+            
+        } finally {
+            setModalProps({confirmLoading: false});
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file

src/views/directory/tbgj/zjkjlList.vue

 <template>
   <div>
     <!--引用表格-->
-   <BasicTable @register="registerTable" :searchInfo="{pageSize:100}">
+    <BasicTable @register="registerTable">
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
     </BasicTable>
+
+    <!-- 表单区域 -->
+    <PushFileModal @register="registerModal" @success="handleSuccess"></PushFileModal>
   </div>
 </template>
 
 <script lang="ts" name="report-pushLog" setup>
-  import {ref, computed, unref} from 'vue';
-  import {BasicTable, useTable, TableAction} from '/@/components/Table';
-  import {useModal} from '/@/components/Modal';
-  import { useListPage } from '/@/hooks/system/useListPage'
-  import {columnsgjk, searchFormSchemagjk} from './data';
+  import { ref, computed, unref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import PushFileModal from './modules/PushFileModal.vue';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { columnsgjk, searchFormSchemagjk } from './data';
   import { zjkjllist } from './api';
 
   //注册model
-  const [registerModal, {openModal}] = useModal();
+  const [registerModal, { openModal }] = useModal();
   //注册table数据
-  const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
-       tableProps:{
-        title: '中间库记录',
-        api: zjkjllist,
-        columns: columnsgjk,
-        canResize:false,
-        formConfig: {
-          labelWidth: 120,
-          schemas: searchFormSchemagjk,
-          autoSubmitOnEnter:true,
-          showAdvancedButton:true,
-        },
-        showActionColumn: false
+  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+    tableProps: {
+      title: '中间库记录',
+      api: zjkjllist,
+      columns: columnsgjk,
+      canResize: false,
+      pagination: {
+        pageSize: 100,
+      },
+      formConfig: {
+        labelWidth: 120,
+        schemas: searchFormSchemagjk,
+        autoSubmitOnEnter: true,
+        showAdvancedButton: true,
+      },
+      actionColumn: {
+        width: 120,
       },
-   })
+      scroll: { y: 1000 },
+    },
+  });
 
-   const [registerTable] = tableContext
+  /**
+   * 详情
+   */
+  function handleDetail(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+      showFooter: false,
+    });
+  }
 
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    return [
+      {
+        label: '详情',
+        onClick: handleDetail.bind(null, record),
+      },
+    ];
+  }
+  const [registerTable] = tableContext;
 </script>
-<style scoped>
-
-</style>
+<style scoped></style>