备案管理页

src/main/vue/src/views/RecordList.vue

@@ -1,14 +1,93 @@
 <template>
     <div class="list-view">
         <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
-            <el-select class="filter-item" v-model="districtId" clearable>
-                <el-option v-for="item in district" :key="item.id" :value="item.name" :label="item.name"></el-option>
-            </el-select>
-            <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">查询 </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加 </el-button>
-            <el-button @click="update" type="primary" class="filter-item">一键更新 </el-button>
-            <el-button @click="distribute" type="primary" class="filter-item">一键分发 </el-button>
+            <div>
+                <span class="span-width">
+                    <span class="span-size">考级活动名称</span>
+                    <el-input placeholder="输入考级活动名称" v-model="search" clearable class="filter-item"></el-input>
+                </span>
+                <span class="span-width">
+                    <span class="span-size">考级机构名称</span>
+                    <el-input placeholder="输入考级机构名称" v-model="search" clearable class="filter-item"></el-input>
+                </span>
+                <span class="span-width2">
+                    <label class="span-size">考级活动时间</label>
+                    <el-date-picker
+                        v-model="dateRange"
+                        type="daterange"
+                        value-format="yyyy-MM-dd HH:mm:ss"
+                        start-placeholder="请选择开始时间"
+                        end-placeholder="请选择结束时间"
+                        range-separator="至"
+                        :default-time="['00:00:00', '23:59:59']"
+                        class="filter-item"
+                        @change="getData"
+                    >
+                    </el-date-picker>
+                </span>
+            </div>
+            <div>
+                <span class="span-width">
+                    <span class="span-size">承办单位名称</span>
+                    <el-input placeholder="输入承办单位名称" v-model="search" clearable class="filter-item"></el-input>
+                </span>
+                <span class="span-width">
+                    <label class="span-size">状态</label>
+                    <el-select
+                        class="filter-item"
+                        v-model="status"
+                        clearable
+                        placeholder="请选择状态"
+                        style="width: 200px"
+                    >
+                        <el-option
+                            v-for="item in statusOptions"
+                            :key="item.value"
+                            :value="item.value"
+                            :label="item.label"
+                        ></el-option>
+                    </el-select>
+                </span>
+                <span class="span-width2">
+                    <label class="span-size">备案时间</label>
+                    <el-date-picker
+                        v-model="dateRange"
+                        type="daterange"
+                        value-format="yyyy-MM-dd HH:mm:ss"
+                        start-placeholder="请选择开始时间"
+                        end-placeholder="请选择结束时间"
+                        range-separator="至"
+                        :default-time="['00:00:00', '23:59:59']"
+                        class="filter-item"
+                        @change="getData"
+                    >
+                    </el-date-picker>
+                </span>
+            </div>
+            <!-- <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input> -->
+            <div style="padding-left: 14px">
+                <label class="span-size">考级地点</label>
+                <el-select class="filter-item" v-model="province">
+                    <el-option value="江苏省" label="江苏省"></el-option>
+                </el-select>
+                <el-select class="filter-item" v-model="city">
+                    <el-option value="南京市" label="南京市"></el-option>
+                </el-select>
+                <el-select class="filter-item" v-model="districtId" clearable>
+                    <el-option
+                        v-for="item in district"
+                        :key="item.id"
+                        :value="item.name"
+                        :label="item.name"
+                    ></el-option>
+                </el-select>
+            </div>
+            <div>
+                <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">查询 </el-button>
+                <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加 </el-button>
+                <el-button @click="update" type="primary" class="filter-item">一键更新 </el-button>
+                <el-button @click="distribute" type="primary" class="filter-item">一键分发 </el-button>
+            </div>
             <!-- <el-button
                 @click="download"
                 type="primary"
@@ -97,7 +176,10 @@ export default {
             categoryOptions: [{ label: '承办单位', value: 'ORGANIZER' }],
             statusOptions: [{ label: '正常', value: 'NORMAL' }],
             district: [],
-            districtId: ''
+            districtId: '',
+            province: '江苏省',
+            city: '南京市',
+            status: ''
         };
     },
     computed: {
@@ -219,4 +301,22 @@ export default {
     }
 };
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.span-size {
+    font-size: 14px;
+    color: #565b66;
+    line-height: 15px;
+    padding: 0 10px 0 10px;
+}
+.span-width {
+    width: 330px;
+    display: inline-block;
+    text-align: right;
+}
+.span-width2 {
+    width: 500px;
+    // float: left;
+    text-align: right;
+    display: inline-block;
+}
+</style>