|
@@ -0,0 +1,211 @@
|
|
|
+<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="applyUserName"
|
|
|
+ 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="approve(record)" v-if="record.status==1">处理
|
|
|
+ </a-button>
|
|
|
+ </template>
|
|
|
+ <template v-if="column.key === 'files'">
|
|
|
+ <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"></filePreview>
|
|
|
+ <a-button type="link" @click="downFile(item)" 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>
|
|
|
+ <approveModal ref="modalRef" :loadData="loadData"></approveModal>
|
|
|
+ </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 approveModal from './approve.vue';
|
|
|
+import {DownOutlined, UpOutlined} from "@ant-design/icons-vue";
|
|
|
+import {getPaginationTotalTitle} from "@/utils/common";
|
|
|
+import {download} from "@/utils/downloadFile";
|
|
|
+import filePreview from '@/components/basic/file-preview/index.vue'
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'reviewerList',
|
|
|
+ components: {DownOutlined, UpOutlined, approveModal,filePreview},
|
|
|
+ setup() {
|
|
|
+
|
|
|
+ const expand = ref(false);
|
|
|
+ const formRef = ref<FormInstance>();
|
|
|
+ const selectedRowKeys = ref([]);
|
|
|
+ const modalRef = 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.startTime).format('YYYY-MM-DD')
|
|
|
+ },
|
|
|
+ {title: '申请原因', dataIndex: 'reason', key: '1', align: "center"},
|
|
|
+ {title: '状态', dataIndex: 'statusName', key: '1', align: "center"},
|
|
|
+ {title: '申请文件', key: 'files', width: 80, 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/getReviewerFormList', formState);
|
|
|
+
|
|
|
+ data.value = result.list;
|
|
|
+ formState.total = result.total;
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ const dicModalClosed = (d) => {
|
|
|
+ if (d) {
|
|
|
+ loadData();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const approve = (record) => {
|
|
|
+ modalRef.value.show(record.applyId);
|
|
|
+ };
|
|
|
+
|
|
|
+ const onSelectChange = (keys: any) => {
|
|
|
+ selectedRowKeys.value = keys;
|
|
|
+ };
|
|
|
+ const showFile = async (applyId) => {
|
|
|
+ visible.value = true;
|
|
|
+ const result: any = await get('applyForm/getApplyFormFileList', {applyId: applyId});
|
|
|
+ docList.value = result;
|
|
|
+ };
|
|
|
+ const downFile = (record: any) => {
|
|
|
+ download(record.storage_path, record.file_name);
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ formRef,
|
|
|
+ expand,
|
|
|
+ data,
|
|
|
+ loadData, loading, selectedRowKeys,
|
|
|
+ onSelectChange, onRangeChange,
|
|
|
+ formState,
|
|
|
+ columns,
|
|
|
+ pagination, modalRef,
|
|
|
+ approve, dicModalClosed,docList,visible,
|
|
|
+ handleTableChange,showFile,downFile,
|
|
|
+ onFinish,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.loadData();
|
|
|
+ }
|
|
|
+});
|
|
|
+</script>
|