From 99f97b11a334ce482db9aa91fca86dadbaffd716 Mon Sep 17 00:00:00 2001
From: luobisheng <727299681@qq.com>
Date: 星期四, 17 十一月 2022 17:40:43 +0800
Subject: [PATCH] 我的代办修改

---
 src/views/operate/lawEnforcement/index.vue |  243 ++++++++++++++++++++++++++++++++++--------------
 1 files changed, 172 insertions(+), 71 deletions(-)

diff --git a/src/views/operate/lawEnforcement/index.vue b/src/views/operate/lawEnforcement/index.vue
index 7ae0911..0ad9323 100644
--- a/src/views/operate/lawEnforcement/index.vue
+++ b/src/views/operate/lawEnforcement/index.vue
@@ -1,97 +1,198 @@
 <template>
-    <div class="law-enforcement">
-        <MyTable :tableData="list" :tableOption="tableOption" @openDialog="changeDialog">
-        </MyTable>
-        <!-- 缁勪欢鍖� -->
-        <div class="dialog">
-            <el-dialog v-if="visible" :visible.async="visible" title="闂鐧昏" width="60%" :before-close="handleClose">
-                <checkIn></checkIn>
-            </el-dialog>
-        </div>
+    <div class="user-list">
+        <header>
+            <div class="header-title">杩愯惀绠$悊 >> 宸℃煡鎵ф硶</div>
+        </header>
+        <nav>
+            <el-tabs v-model="tabActiveName" @tab-click="tabChange">
+                <el-tab-pane label="缁熻鎶ヨ〃" name="first"></el-tab-pane>
+                <el-tab-pane label="鏁版嵁鍙嶆煡" name="second"></el-tab-pane>
+            </el-tabs>
+        </nav>
+        <main>
+            <div>
+                <el-radio v-model="searchModel" label="document">褰掓。鏌ヨ</el-radio>
+                <el-radio v-model="searchModel" label="timely">瀹炴椂鏌ヨ</el-radio>
+                <label for="searchInput">
+                    <span slot="prepend">缁熻绫诲瀷锛�</span>
+                    <el-input style="width: 200px" v-model="statisticalType" id="searchInput" placeholder="宸℃煡闃熷憳缁熻"></el-input>
+                </label>
+            </div>
+            <div class="search">
+                <label for="inputDate">
+                    <span slot="prepend">鎸夊勾鏈堟煡璇細</span>
+                    <el-input style="width: 200px" v-model="year" id="inputDate" placeholder="宸℃煡闃熷憳缁熻"></el-input>
+                    <span slot="append"> 骞�</span>
+                </label>
+                <span class="month-tag" :class="{ 'month-selected': item.selected }" v-for="item in monthList" :key="item.value" @click="selecteMonth(item)" >
+                    {{ item.text }}
+                    <span v-if="item.selected" style="font-size: 12px">鈭�</span>
+                </span>
+                <el-button type="primary" @click="search()">鎼滅储</el-button>
+                <el-button type="primary" @click="reset()">閲嶇疆</el-button>
+            </div>
+            <el-table :data="tableData"
+            style="width: 100%"
+            :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}">
+                <el-table-column 
+                v-for="{prop, label} in tableColumnData" 
+                :key="prop" 
+                :prop="prop" 
+                :label="label"
+            ></el-table-column>
+            </el-table>
+        </main>
     </div>
 </template>
 <script>
-import MyTable from '@/components/Table'
+import MyView from './components/dataView';
+
 export default {
     components: {
-        MyTable,
+        MyView
     },
     data() {
         return {
-            list: [
+            searchModel: '',
+            statisticalType: '',
+            year: '',
+            activeName: '',
+            tabActiveName: '',
+            monthList: [
                 {
-                    name: '寮犱笁',
-                    sex: '鐢�',
-                    age: '23',
-                    'min-width': '10',
+                    text: '1鏈�',
+                    value: 1,
+                    selected: false
                 },
                 {
-                    name: '寮犲洓',
-                    sex: '鐢�',
-                    age: '23',
-                    'min-width': '10',
+                    text: '2鏈�',
+                    value: 2,
+                    selected: false
                 },
                 {
-                    name: '涓稿皬鍎�',
-                    sex: '濂�',
-                    age: '11',
-                    'min-width': '10',
+                    text: '3鏈�',
+                    value: 3,
+                    selected: false
                 },
+                {
+                    text: '4鏈�',
+                    value: 4,
+                    selected: false
+                },
+                {
+                    text: '5鏈�',
+                    value: 5,
+                    selected: false
+                },
+                {
+                    text: '6鏈�',
+                    value: 6,
+                    selected: false
+                },
+                {
+                    text: '7鏈�',
+                    value: 7,
+                    selected: false
+                },
+                {
+                    text: '8鏈�',
+                    value: 8,
+                    selected: false
+                },
+                {
+                    text: '9鏈�',
+                    value: 9,
+                    selected: false
+                },
+                {
+                    text: '10鏈�',
+                    value: 10,
+                    selected: false
+                },
+                {
+                    text: '11鏈�',
+                    value: 11,
+                    selected: false
+                },
+                {
+                    text: '12鏈�',
+                    value: 12,
+                    selected: false
+                }
             ],
-            tableOption: {
-                group: [
-                    {
-                        label: '濮撳悕',
-                        type: 'text',
-                        prop: 'name',
-                    },
-                    {
-                        label: '骞撮緞',
-                        type: 'text',
-                        prop: 'age',
-                    },
-                    {
-                        label: '鎬у埆',
-                        type: 'text',
-                        prop: 'sex',
-                    },
-                    {
-                        label: '鎿嶄綔',
-                        type: 'operation',
-                        prop: 'operation',
-                        children: [
-                            {
-                                operationName: '鏌ョ湅',
-                                mykey : 'look',
-                            },
-                            {
-                                operationName: '淇敼',
-                                mykey:'update',
-                            }
-                        ]
-                    },
-                ]
-            },
-            visible:false
+            tableData: [],
+            tableColumnData: [
+                {
+                    prop: 'name',
+                    label: '宸℃煡浜哄憳',
+                },
+                {
+                    prop: 'count',
+                    label: '宸℃煡娆℃暟',
+                },
+                {
+                    prop: 'warnCount',
+                    label: '璀﹀憡鏁�',
+                },
+                {
+                    prop: 'punishCount',
+                    label: '澶勭綒鏁�',
+                },
+                {
+                    prop: 'finishCount',
+                    label: '浜ゅ姙瀹屾垚鏁�',
+                },
+                {
+                    prop: 'unfinishedCount',
+                    label: '浜ゅ姙鏈畬鎴愭暟',
+                }
+            ]
         }
     },
-    methods:{
-        // 鍏抽棴瀵硅瘽妗�
-        handleClose(done) {
-            this.$confirm('纭鍏抽棴锛�')
-                .then(_ => {
-                    this.visible = false;
-                    done();
-                })
-                .catch(_ => { });
+    created() {
+    },
+    methods: {
+        search() {
+            console.log('search');
         },
-        // 鑾峰彇鎿嶄綔缁撴灉
-        changeDialog({index,mykey}){
-            console.log(index,mykey);
+
+        reset() {
+            this.year = '';
+            this.searchModel = '';
+            this.statisticalType = '';
+            this.monthList.forEach(item => item.selected = false);
+        },
+
+        selecteMonth(item) {
+            item.selected = !item.selected;
+        },
+
+        tabChange() {
+
         }
     }
 }
 </script>
 <style lang="scss" scoped>
+.user-list {
+    text-align: left;
+    margin: 10px 20px;
+    color: #4b9bb7; 
+    
+    .header-title {
+        line-height: 40px;
+    }
 
+    .month-tag {
+        margin: 5px;
+        padding: 5px;
+        border: 1px solid gray;
+        border-radius: 10%;
+        text-align: center;
+    }
+
+    .month-selected {
+        border: 1px solid #409EFF;
+    }
+}
 </style>
\ No newline at end of file

--
Gitblit v1.8.0