From 0925e2182862aaaf4419a8c372e041cd3ef230b7 Mon Sep 17 00:00:00 2001
From: ccongli <1441652193@qq.com>
Date: Fri, 13 Oct 2023 08:50:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=8B=E5=86=99=E5=89=8D=E7=AB=AF=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/xxjj/contract/index.vue         | 429 ++++++++++++++++++
 1 file changed, 429 insertions(+)
 create mode 100644 yunxi-ui-admin-vben/src/views/xxjj/contract/index.vue

diff --git a/yunxi-ui-admin-vben/src/views/xxjj/contract/index.vue b/yunxi-ui-admin-vben/src/views/xxjj/contract/index.vue
new file mode 100644
index 00000000..78ab93c3
--- /dev/null
+++ b/yunxi-ui-admin-vben/src/views/xxjj/contract/index.vue
@@ -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>
+  
+  
\ No newline at end of file