smartsearch/vue/src/views/applyform/apply.vue

<template>
  <div class="card-search">
    <a-form
      ref="formRef"
      name="advanced_search"
      class="ant-advanced-search-form"
      :model="formState"
      @finish="onFinish"
    >
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item
            name="studentCode"
            label="申请人"
            :label-col="{span:6}">
            <a-input v-model:value="formState.applyUserName" style="width: 200px"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="申请时间区间" :label-col="{span:8}" name="name">
            <a-range-picker format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']" @change="onRangeChange"/>
          </a-form-item>
        </a-col>
        <a-col :span="6" style="text-align: left">
          <a-button type="primary" html-type="submit" @click="onFinish">查询</a-button>
          <a-button style="margin: 0 8px" @click="() => {formRef.resetFields();loadData()}">重置</a-button>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" style="text-align: right">
        </a-col>
      </a-row>
    </a-form>
    <div class="search-result-list">
      <a-table :columns="columns" :data-source="data" :pagination="pagination"
               :loading="loading"
               :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
               @change="handleTableChange" :row-key="record=>record.applyId"
               bordered>
        <template #bodyCell="{ column,record }">
          <template v-if="column.key === 'operation'">
            <a-button type="link" size="small" @click="showFile(record.applyId)">查看文件
            </a-button>
          </template>
        </template>
      </a-table>
    </div>
    <a-modal style="width:700px;"  :footer="null" v-model:visible="visible" title="查看文件">
      <div style="overflow: auto;height: 500px;">
        <a-list item-layout="horizontal" :data-source="docList">
          <template #renderItem="{ item,index }">
            <a-list-item>
              <template #actions>
                <filePreview :fileName="item.file_name" :filePath="item.storage_path"  :title="item.well_common_name"></filePreview>
                <a-button type="link" @click="downFile(item)" v-if="item.status==2" danger>下载</a-button>
              </template>
              <a-list-item-meta
                :description="item.file_business_type">
                <template #title>
                  {{ item.file_name }}
                </template>
                <template #avatar>
                  <img src="~@/assets/images/file.png"/>
                </template>
              </a-list-item-meta>
              <div>{{item.well_common_name}}</div>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import {reactive, ref, defineComponent, computed} from 'vue';
import type {FormInstance} from 'ant-design-vue';
import type {TableColumnsType, TableProps} from 'ant-design-vue';
import {get} from '@/api/common';
import dayjs from "dayjs";
import {DownOutlined, UpOutlined} from "@ant-design/icons-vue";
import {getPaginationTotalTitle} from "@/utils/common";
import filePreview from '@/components/basic/file-preview/index.vue'
import {download} from "@/utils/downloadFile";

export default defineComponent({
  name: 'applyformList',
  components: {DownOutlined, UpOutlined, filePreview},
  setup() {

    const expand = ref(false);
    const formRef = ref<FormInstance>();
    const selectedRowKeys = ref([]);
    const visible = ref(false);
    const docList = ref([]);

    const formState = reactive({
      page: 1, rows: 10, endDate: '',
      beginDate: '',
      applyUserName: '', total: 0,
    });

    const columns: TableColumnsType = [
      {
        title: '序号',
        width: 80,
        dataIndex: 'index',
        key: 'index',
        align: "center",
        customRender: ({index}) => {
          return `${index + 1}`;
        }
      },
      {title: '申请人', dataIndex: 'applyUserName', width: 100, key: '1',},
      {
        title: '申请时间',
        dataIndex: 'applyDate',
        width: 200,
        align: "center",
        key: 'applyDate',
        customRender: ({record}) => dayjs(record.applyDate).format('YYYY-MM-DD')
      },
      {title: '申请原因', dataIndex: 'reason', key: '1', align: "center"},
      {title: '状态', dataIndex: 'statusName', key: '1', align: "center"},
      {
        title: '操作', key: 'operation', width: 60, align: "center"
      },
    ];
    const onRangeChange = (dateString) => {
      formState.beginDate = dateString ? dateString[0].format("YYYY-MM-DD") : '';
      formState.endDate = dateString ? dateString[1].format("YYYY-MM-DD") : '';
      loadData();
    };
    const data = ref([]);
    const pagination = computed(() => ({
      total: formState.total,
      current: formState.page,
      pageSize: formState.rows,
      showSizeChanger: true,
      showTotal: total => getPaginationTotalTitle(total)
    }));
    const loading = ref(false);

    const handleTableChange: TableProps['onChange'] = (
      pag: { pageSize: number; current: number },
    ) => {
      formState.page = pag.current;
      formState.rows = pag.pageSize;
      loadData();
    };

    const onFinish = () => {
      loadData();
    }

    const loadData = async function () {
      loading.value = true;
      const result: any = await get('applyForm/getApplyFormList', formState);

      data.value = result.list;
      formState.total = result.total;
      loading.value = false;
    }

    const dicModalClosed = (d) => {
      if (d) {
        loadData();
      }
    }
    const showFile = async (applyId) => {
      visible.value = true;
      const result: any = await get('applyForm/getApplyFormFileList', {applyId: applyId});
      docList.value = result;
    };

    const onSelectChange = (keys: any) => {
      selectedRowKeys.value = keys;
    };
    const downFile = (record: any) => {
      download(record.storage_path, record.file_name);
    };
    return {
      formRef,
      expand,
      data,
      loadData, loading, selectedRowKeys,
      onSelectChange, onRangeChange,
      formState,
      columns, visible,
      pagination, docList,
      showFile, dicModalClosed,
      handleTableChange,
      onFinish, downFile
    };
  },
  created() {
    this.loadData();
  }
});
</script>