Web/src/pages/list/query.vue

@@ -0,0 +1,146 @@
+<template>
+  <container>
+    <br />
+    <a-card :bordered="false">
+      <div class="yo-query-bar">
+        <a-form-model :model="query" layout="inline">
+          <a-form-model-item label="区域">
+            <a-select :style="{ width: '100px' }" v-model="query.area">
+              <a-select-option value="宁波市">宁波市</a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item label="年份">
+            <a-select :style="{ width: '100px' }" v-model="query.year">
+              <a-select-option value="2020">2020</a-select-option>
+              <a-select-option value="2021">2021</a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-button html-type="submit" type="primary">查询</a-button>
+          </a-form-model-item>
+        </a-form-model>
+      </div>
+
+      <a-table
+        :bordered="true"
+        :columns="columns"
+        :data-source="data"
+        :pagination="{ pageSize: 20}"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+      >
+        <div class="yo-action-bar" slot="title">
+          <div class="yo-action-bar--actions">
+            <a-button>Button</a-button>
+            <a-button>Button</a-button>
+            <a-button :disabled="true">Button</a-button>
+            <a-button>Button</a-button>
+            <a-button-group>
+              <a-button>Button</a-button>
+              <a-button>Button</a-button>
+              <a-button>Button</a-button>
+            </a-button-group>
+            <a-dropdown>
+              <a-menu slot="overlay">
+                <a-menu-item key="1">1st item</a-menu-item>
+                <a-menu-item key="2">2nd item</a-menu-item>
+                <a-menu-item key="3">3rd item</a-menu-item>
+              </a-menu>
+              <a-button>
+                Actions
+                <a-icon type="down" />
+              </a-button>
+            </a-dropdown>
+            <a-dropdown-button>
+              Dropdown
+              <a-menu slot="overlay">
+                <a-menu-item key="1">
+                  <a-icon type="user" />1st menu item
+                </a-menu-item>
+                <a-menu-item key="2">
+                  <a-icon type="user" />2nd menu item
+                </a-menu-item>
+                <a-menu-item key="3">
+                  <a-icon type="user" />3rd item
+                </a-menu-item>
+              </a-menu>
+            </a-dropdown-button>
+          </div>
+        </div>
+      </a-table>
+    </a-card>
+    <br />
+  </container>
+</template>
+<script>
+const _data = [
+  {
+    area: '海曙区',
+    title: '曙光电影院地块',
+    count: 13,
+    date: '2021-01-01',
+  },
+  {
+    area: '江北区',
+    title: '大庆新村地块旧城区改建项目',
+    count: 322,
+    date: '2021-01-01',
+  },
+  {
+    area: '宁海县',
+    title: '桥头胡街道旧城区改造华驰文教地块',
+    count: 1,
+    date: '2021-01-01',
+  },
+  {
+    area: '慈溪市',
+    title: '七二三南延道路工程',
+    count: 1,
+    date: '2021-01-01',
+  },
+  {
+    area: '北仑区',
+    title: '原粮食局宿舍楼1号、2号楼（太河路北延工程）',
+    count: 32,
+    date: '2021-01-01',
+  },
+];
+
+const data = Object.assign([], _data, _data, _data);
+data.map((p, i) => (p.key = 'abcdefghijklmnopqrstuvwxyz'[i]));
+
+export default {
+  data() {
+    return {
+      query: {
+        area: '宁波市',
+        year: '2021',
+      },
+      columns: [
+        {
+          title: '区域',
+          dataIndex: 'area',
+        },
+        {
+          title: '项目名称',
+          dataIndex: 'title',
+        },
+        {
+          title: '户数',
+          dataIndex: 'count',
+        },
+        {
+          title: '时间',
+          dataIndex: 'date',
+        },
+      ],
+      data,
+      selectedRowKeys: [],
+    };
+  },
+  methods: {
+    onSelectChange(selectedRowKeys) {
+      this.selectedRowKeys = selectedRowKeys;
+    },
+  },
+};
+</script>