CaiYuanYiTiHua/src/views/demo/tiankongdi/segmentation/index.vue

<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <BasicTable class="w-4/4 xl:w-5/5" @register="registerTable">
      <template #toolbar>
        <!-- <a-button type="primary" @click="preview">预览</a-button> -->
        <!-- <a-button type="primary" @click="showProgress">导入进度查询</a-button> -->
        <!-- <a-button type="primary" @click="downloadTemplate">模板下载</a-button> -->
        <a-upload :accept="'.zip'" :showUploadList="false" :custom-request="customRequest">
          <a-button type="primary">导入</a-button>
        </a-upload>
        <a-button type="primary" @click="downloadSHP">SHP导出</a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                // icon: 'ant-design:ellipsis-outlined',
                label: '删除',
                onClick: deleteOperation.bind(null, record),
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref, h } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { PageWrapper } from '@/components/Page';
  import { uploadFile } from '@/api/formrender/index';
  import {
    loadCaseInfoCXJG,
    importCaseInfoCXJGShpData,
    deleteCaseInfoCXJG,
  } from '@/api/audit/index';
  import { getAppEnvConfig } from '@/utils/env';
  import { Tag } from 'ant-design-vue';
  import axios from 'axios';
  import { useMessage } from '@/hooks/web/useMessage';

  const { VITE_GLOB_API_URL } = getAppEnvConfig();
  const { createConfirm, createMessage } = useMessage();

  const picihao = ref();
  const columns = [
    {
      title: '线索编号',
      dataIndex: 'case_no',
      width: 200,
    },
    {
      title: '线索来源',
      dataIndex: 'tubanlaiyuan',
    },
    {
      title: '县',
      dataIndex: 'countyname',
    },
    {
      title: '镇',
      dataIndex: 'streetname',
    },
    {
      title: '村',
      dataIndex: 'communityname',
    },
    {
      title: '持续监管',
      dataIndex: 'chixujianguan',
      customRender: ({ record }) => {
        const { chixujianguan } = record;
        if (chixujianguan == 1) {
          return h(Tag, { color: 'green' }, () => '是');
        } else {
          return h(Tag, { color: 'yellow' }, () => '否');
        }
        return h(Tag, {}, () => chixujianguan);
      },
    },
  ];
  const [registerTable, { reload, expandAll, getForm }] = useTable({
    title: '',
    api: loadCaseInfoCXJG,
    columns,
    rowKey: 'id',
    // 序号列
    showIndexColumn: false,
    // 使用搜索表单
    useSearchForm: true,
    // 显示表格设置工具
    showTableSetting: true,
    bordered: true,
    formConfig: {
      labelWidth: 120,
      schemas: [
        {
          field: 'caseno',
          label: '线索编号',
          component: 'Input',
          colProps: { span: 8 },
        },
      ],
    },
    // 搜索
    handleSearchInfoFn(info) {
      return info;
    },
    actionColumn: {
      width: 80,
      title: '操作',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
      fixed: undefined,
    },
    pagination: {
      defaultPageSize: 15,
    },
  });
  const customRequest = (file) => {
    console.log('handleCustomRequest', file);
    const formData = new FormData();
    formData.append('files', file.file);
    uploadFile(formData).then((res) => {
      importCaseInfoCXJGShpData({
        zipFilePath: res[0].filePath.replace(/\\/g, '/'),
        srid: '4326',
      }).then((resultRes) => {
        console.log('resultRes', resultRes);
        picihao.value = resultRes;
        reload();
      });
    });
  };
  const deleteOperation = (record) => {
    console.log('deleteOperation', record);
    createConfirm({
      iconType: 'info',
      title: '删除',
      content: '确定要删除当前线索吗',
      onOk: async () => {
        deleteCaseInfoCXJG(record.id).then((res) => {
          if (res) {
            createMessage.success('删除成功');
            reload();
          } else {
            createMessage.error('删除失败');
          }
        });
      },
    });
  };
  const downloadSHP = () => {
    axios({
      method: 'post',
      url: VITE_GLOB_API_URL + '/api/DroneCaseInfoSingle/ExportCaseInfoCXJGsqShapefile',
      headers: {
        'X-Token': localStorage.getItem('X-Token'),
      },
      responseType: 'blob',
    }).then((res) => {
      const elink = document.createElement('a');
      elink.download = '图斑分割矢量数据' + new Date().getTime() + '.zip';
      elink.style.display = 'none';
      elink.href = URL.createObjectURL(res.data);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href);
      document.body.removeChild(elink);
    });
  };
</script>
<style lang="scss">
  .reSubmitInput {
    border: 1px solid;
    width: 100%;
    height: 35px;
    border-radius: 5px;
    padding: 0px 10px;
    border-color: #000;
    transition: 0.2s;
    &:focus {
      border-color: #6db8ff;
    }
  }
</style>