ccongli
/
YX-SCM
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

手写前端列表

Browse Source
pull/1/head
ccongli 1 year ago
parent 1fc227d2d2
commit 0925e21828
1 changed files with 429 additions and 0 deletions
Show Stats Download Patch File Download Diff File

429
yunxi-ui-admin-vben/src/views/xxjj/contract/index.vue
Unescape View File

@ -0,0 +1,429 @@
<template>
<div class="container">
<div class="title">
<a-typography-title :level="3">合同列表管理</a-typography-title>
</div>
<div class="content">
<a-spin tip="Loading..." :spinning="loading">
<div class="form">
<a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState"
:labelCol="{ span: 5 }" :wrapperCol="{ span: 18 }"
@finish="onFinish">
<a-row :gutter="24">
<template v-for="(item, index) in formItems" :key="index">
<a-col v-show="itemExpand || index <= state.expandLimit" :span="8">
<a-form-item :name="item.name" :label="item.label">
<!-- 动态组件 -->
<component :is="item.type" v-model:value="formState[item.name]"
:options="item.options" :placeholder="item.placeholder" :show-time="true">
</component>
<!-- <a-input v-model:value="formState[`field-${i}`]"
placeholder="placeholder"></a-input> -->
</a-form-item>
</a-col>
</template>
<a-col :span="8" :offset="1">
<a-button type="primary" html-type="submit">查询</a-button>
<a-button style="margin: 0 8px" @click="() => formRef?.resetFields()">重置</a-button>
<a style="font-size: 12px" @click="itemExpand = !itemExpand" v-if="formItems.length > state.expandLimit">
<template v-if="itemExpand">
收起
<UpOutlined />
</template>
<template v-else>
展开
<DownOutlined />
</template>
</a>
</a-col>
</a-row>
</a-form>
</div>
<div class="table">
<div class="options">
<div class="curd">
<a-space wrap>
<a-button type="primary" block>
<PlusCircleOutlined /> 新增
</a-button>
<a-button type="primary" block danger>
<DeleteOutlined />删除
</a-button>
<a-button block>
<ImportOutlined />导入
</a-button>
<a-button block>
<ExportOutlined /> 导出
</a-button>
</a-space>
</div>
<div class="extend">
<a-tooltip placement="top">
<template #title>
<span>刷新</span>
</template>
<a-button type="link" size="small" @click="reloadData">
<ReloadOutlined :style="{ fontSize: '16px', color: '#333' }" />
</a-button>
</a-tooltip>
<a-divider type="vertical" />
<a-tooltip placement="top">
<template #title>
<span>筛选栏</span>
</template>
<a-button type="link" size="small">
<SearchOutlined :style="{ fontSize: '16px', color: '#333' }" />
</a-button>
</a-tooltip>
<a-divider type="vertical" />
<a-tooltip placement="top">
<template #title>
<span>行高</span>
</template>
<a-dropdown>
<!-- v-model:selectedKeys="selectedKeys"表示传了两个属性，一个叫value，一个叫selecteKeys -->
<template #overlay>
<a-menu v-model:selectedKeys="state.selectedKeys" @click="handleRowSizeClick">
<a-menu-item key="large">默认</a-menu-item>
<a-menu-item key="middle">中等</a-menu-item>
<a-menu-item key="small">紧凑</a-menu-item>
</a-menu>
</template>
<a-button type="link" size="small">
<ColumnHeightOutlined :style="{ fontSize: '16px', color: '#333' }" />
</a-button>
</a-dropdown>
</a-tooltip>
<a-divider type="vertical" />
<a-tooltip placement="top">
<template #title>
<span>列设置</span>
</template>
<a-button type="link" size="small">
<SettingOutlined :style="{ fontSize: '16px', color: '#333' }" />
</a-button>
</a-tooltip>
</div>
</div>
<div class="data">
<a-table :columns="columns" :data-source="data" :scroll="{ x: 1500 }" :size="rowSize" bordered
@change="onChange">
<template #bodyCell="{ column }">
<template v-if="column.key === 'operation'">
<a-space :size="4">
<a-button type="link" size="small">
<EditOutlined /> 详情
</a-button>
<a-dropdown>
<template #overlay>
<a-menu @click="handleMenuClick">
<a-menu-item key="m1">编辑</a-menu-item>
<a-menu-item key="m2">提交</a-menu-item>
<a-menu-item key="m3">关闭</a-menu-item>
</a-menu>
</template>
<a-button type="link" size="small">
更多
<DownOutlined />
</a-button>
</a-dropdown>
</a-space>
</template>
</template>
</a-table>
</div>
</div>
</a-spin>
</div>
</div>
</template>
<script lang="ts" setup>
import {
ImportOutlined,
ExportOutlined,
PlusCircleOutlined,
DeleteOutlined,
EditOutlined,
DownOutlined,
UpOutlined,
SearchOutlined,
ReloadOutlined,
ColumnHeightOutlined,
SettingOutlined
} from '@ant-design/icons-vue';
import type { TableColumnsType, MenuProps, FormInstance } from 'ant-design-vue';
import { Input, Select, DatePicker } from 'ant-design-vue';
import { onMounted, reactive, ref, toRefs, computed } from 'vue';
//使用reactive方法创建响应式数据
const state = reactive({
// 计算属性
selectedKeys: computed(() => {
return [rowSize.value]
}),
expandLimit: 6
// 单独将某个属性变成响应式的
// allTime: ref(store.getters.allTime)
})
// 筛选项展开状态
const itemExpand = ref<boolean>(false);
// 表单dom实例
const formRef = ref<FormInstance>();
// 表单数据
const formState = reactive({
contractName: '',
contractNumber: undefined,
declarationTime: undefined,
contractStatus: 1,
});
// // 表单验证规则
// const rules = {
// name: [
// {
// required: true,
// message: 'Please input Activity name',
// trigger: 'change',
// },
// {
// min: 3,
// max: 5,
// message: 'Length should be 3 to 5',
// trigger: 'blur',
// },
// ],
// region: [
// {
// required: true,
// message: 'Please select Activity zone',
// trigger: 'change',
// },
// ],
// date1: [
// {
// required: true,
// message: 'Please pick a date',
// trigger: 'change',
// type: 'object',
// },
// ],
// type: [
// {
// type: 'array',
// required: true,
// message: 'Please select at least one activity type',
// trigger: 'change',
// },
// ],
// resource: [
// {
// required: true,
// message: 'Please select activity resource',
// trigger: 'change',
// },
// ],
// desc: [
// {
// required: true,
// message: 'Please input activity form',
// trigger: 'blur',
// },
// ],
// };
interface FormItem {
label: string,
name: string,
type: 'a-input' | 'a-select' | 'a-date-picker' | 'a-range-picker',
options?: object[],
placeholder?: string
}
// 表单项
const formItems = reactive<FormItem[]>([
{
label: '合同名称',
name: 'contractName',
type: 'a-input',
},
{
label: '合同编号',
name: 'contractNumber',
type: 'a-input',
placeholder: '合同编号模糊查询',
},
{
label: '合同状态',
name: 'contractStatus',
type: 'a-select',
options: [
{
value: 1,
label: '待提交',
},
{
value: 2,
label: '待审核',
},
{
value: 3,
label: '审核中',
},
],
},
{
label: '申报时间',
name: 'declarationTime',
type: 'a-range-picker',
},
]);
// 提交表单且数据验证成功后回调事件
const onFinish = (values: any) => {
console.log('Received values of form: ', values);
console.log('formState: ', formState);
};
// 加载状态
const loading = ref<boolean>(false);
// 表格行高尺寸
const rowSize = ref<string>("large");
// 定义列属性
const columns: TableColumnsType = [
{
title: 'ID',
// width: 100,
dataIndex: 'id',
key: 'id',
fixed: 'left'
},
{
title: '合同名称',
dataIndex: 'contractName',
key: 'contractName',
fixed: 'left'
},
{
title: '合同编号',
dataIndex: 'contractNnumber',
key: 'contractNnumber',
fixed: 'left',
defaultSortOrder: 'ascend',
sorter: true, // 开启排序功能
},
{
title: '部门ID',
dataIndex: 'deptId',
key: 'deptId',
sortDirections: ['ascend', 'descend'],
},
{
title: '签订地点',
dataIndex: 'contractSigned',
key: 'contractSigned',
},
{
title: '签订时间',
dataIndex: 'contractSignedTime',
key: 'contractSignedTime',
},
{
title: '操作',
key: 'operation',
fixed: 'right',
},
];
// 定义数据
interface DataItem {
id: number;
deptId: number;
contractName: string;
contractNnumber: number;
contractSigned: string,
contractSignedTime: string;
}
const data: DataItem[] = [];
for (let i = 0; i < 100; i++) {
data.push({
id: i,
deptId: Math.ceil(Math.random() * 10),
contractName: `云息合同 - ${i}`,
contractNnumber: 1000 + i,
contractSigned: '勋业路376号',
contractSignedTime: '2023-10-12 12:18:51',
});
}
// 刷新数据
function reloadData() {
loading.value = true;
// 模拟服务器请求
setTimeout(() => loading.value = false, 3000);
console.log("数据刷新中。。。");
}
// 列尺寸变更
const handleRowSizeClick: MenuProps['onClick'] = e => {
rowSize.value = String(e.key);
}
// 分页、排序、筛选变化时触发
function onChange(pagination, filters, sorter, extra) {
console.log('params', pagination, filters, sorter, extra);
}
// 点击更多操作
const handleMenuClick: MenuProps['onClick'] = e => {
console.log('click', e);
};
</script>
<style lang="less" scoped>
.container {
padding: 20px;
max-width: 100%;
.content {
background: #fff;
height: auto;
padding: 20px;
clear: both;
width: 100%;
overflow: hidden;
.form {
margin-bottom: 10px;
}
.table {
width: 100%; // 必须设置，铺满宽度
.options {
height: 40px;
margin-bottom: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
// 覆盖日期组件样式
:deep(.ant-picker-range) {
width: 100%;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save