提交文件管理前端页面代码

This commit is contained in:
Sh1yu
2023-10-11 15:59:26 +08:00
parent 8a8cd1b295
commit b25e0cd03b

View File

@@ -1,5 +1,108 @@
<template>
<div >
文件管
<span class="up-query-param-span">
<a-form :model="queryParam" :label-col="2" :wrapper-col="3">
<a-row :gutter="16">
<a-col :span="5">
<a-form-item label="文件名">
<a-input v-model:value="queryParam.name" placeholder="Basic usage" />
</a-form-item>
</a-col>
<a-col :span="5">
<a-form-item label="文件状态">
<a-select ref="select" v-model:value="queryParam.status">
<a-select-option value="0">全部</a-select-option>
<a-select-option value="1">未删除</a-select-option>
<a-select-option value="2">已删除</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="5">
<a-form-item label="文档状态">
<a-select ref="select" v-model:value="queryParam.file">
<a-select-option value="0">全部</a-select-option>
<a-select-option value="1">未删除</a-select-option>
<a-select-option value="2">已删除</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="5">
<a-form-item label="文件类型">
<a-select
ref="select"
v-model:value="queryParam.type"
>
<a-select-option value="0">全部</a-select-option>
<a-select-option value="1">附件</a-select-option>
<a-select-option value="2">文档内含附件</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="4">
<a-button type="primary" @click="onSubmit">查询</a-button>
</a-col>
</a-row>
</a-form>
</span>
<a-divider />
<a-table :columns="columns" :data-source="table" :pagination="{ pageSize: 10 }" :scroll="{ x: 1200, y: 'calc(100vh - 280px)' }">
<template v-slot:bodyCell="{ column, record ,index}">
<span v-if="column.key === 'action'">
<a-button @click="showDoc(record)">
<template #icon><AimOutlined /></template>
关联文档
</a-button>
</span>
</template>
</a-table>
</div>
</template>
<script setup>
import {AimOutlined} from '@ant-design/icons-vue';
import {ref} from "vue";
let visible = ref(false)
let queryParam = ref({
name:'',
status:'0',
file:'0',
type:'0'
})
let table = ref([
{key: 321, name: 'Edward Kingsssssssssssssssssssssssssssssssssssss ', age: 32, address: 'London, Park Lane no. ',},
{key: 321, name: 'Edward Kingsssssssssssssssssssssssssssssssssssss ', age: 32, address: 'London, Park Lane no. ',},
{key: 321, name: 'Edward Kingsssssssssssssssssssssssssssssssssssss ', age: 32, address: 'London, Park Lane no. ',},
{key: 321, name: 'Edward Kingsssssssssssssssssssssssssssssssssssss ', age: 32, address: 'London, Park Lane no. ',},
{key: 321, name: 'Edward Kingsssssssssssssssssssssssssssssssssssss ', age: 32, address: 'London, Park Lane no. ',},
{key: 321, name: 'Edward Kingsssssssssssssssssssssssssssssssssssss ', age: 32, address: 'London, Park Lane no. ',},
{key: 321, name: 'Edward Kingsssssssssssssssssssssssssssssssssssss ', age: 32, address: 'London, Park Lane no. ',},
{key: 321, name: 'Edward Kingsssssssssssssssssssssssssssssssssssss ', age: 32, address: 'London, Park Lane no. ',},
{key: 321, name: 'Edward Kingsssssssssssssssssssssssssssssssssssss ', age: 32, address: 'London, Park Lane no. ',},
{key: 321, name: 'Edward Kingsssssssssssssssssssssssssssssssssssss ', age: 32, address: 'London, Park Lane no. ',},
{key: 321, name: 'Edward Kingsssssssssssssssssssssssssssssssssssss ', age: 32, address: 'London, Park Lane no. ',},
{key: 321, name: 'Edward Kingsssssssssssssssssssssssssssssssssssss ', age: 32, address: 'London, Park Lane no. ',},
{key: 321, name: 'Edward Kingsssssssssssssssssssssssssssssssssssss ', age: 32, address: 'London, Park Lane no. ',},
{key: 321, name: 'Edward Kingsssssssssssssssssssssssssssssssssssss ', age: 32, address: 'London, Park Lane no. ',},
{key: 321, name: 'Edward Kingsssssssssssssssssssssssssssssssssssss ', age: 32, address: 'London, Park Lane no. ',},
{key: 321, name: 'Edward Kingsssssssssssssssssssssssssssssssssssss ', age: 32, address: 'London, Park Lane no. ',}
]);
let columns = ref([
{title: '文件名称', dataIndex: 'name', width: '500' ,},
{title: '文件大小', dataIndex: 'age', width: '100',},
{title: '文件状态', dataIndex: 'address', width: '100',},
{title: '文档状态', dataIndex: 'address', width: '100',},
{title: '上传者', dataIndex: 'address', width: '150',},
{title: '上传时间', dataIndex: 'address', width: '150',},
{ title: '详情查看', key: 'action', fixed: 'right',width: '150',},
])
const onSubmit = () => {
}
const showDoc = (record) => {
}
</script>
<style scoped>
.up-query-param-span{
}
</style>