From 439ed118d48da58692cfb0973e1ee9d0c29bda21 Mon Sep 17 00:00:00 2001
From: wangqing <250543222@qq.com>
Date: Tue, 8 Dec 2020 23:28:47 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/parser/Parser.vue |   2 +-
 src/utils/db.js                  |  11 +++
 src/views/form/ProjectForm.vue   |   2 +-
 src/views/form/index.vue         |   2 +-
 src/views/form/statistics.vue    | 156 ++++++++++++++++++++++++++-----
 5 files changed, 147 insertions(+), 26 deletions(-)

diff --git a/src/components/parser/Parser.vue b/src/components/parser/Parser.vue
index 150235d..1a1012e 100644
--- a/src/components/parser/Parser.vue
+++ b/src/components/parser/Parser.vue
@@ -230,7 +230,7 @@ export default {
                     let tagOptionKey = processType[temConfig.tag]
                     let defaultValue = temConfig.defaultValue
                     let labelStr = ''
-                    if (tagOptionKey) {
+                    if (tagOptionKey&&defaultValue) {
                         if (defaultValue instanceof Array) {
                             defaultValue.forEach(item => {
                                 let {label} = getObject(_.get(cur, tagOptionKey), 'value', item)
diff --git a/src/utils/db.js b/src/utils/db.js
index eaae2a9..5e07b54 100644
--- a/src/utils/db.js
+++ b/src/utils/db.js
@@ -4,6 +4,7 @@ const DRAWING_ITEMS_VERSION_KEY = 'DRAWING_ITEMS_VERSION'
 const DRAWING_ID = 'idGlobal'
 const TREE_NODE_ID = 'treeNodeId'
 const FORM_CONF = 'formConf'
+const CHECKED_COLUMNS = 'checkedColumns'
 
 export function getDrawingList(key) {
     // 加入缓存版本的概念，保证缓存数据与程序匹配
@@ -53,3 +54,13 @@ export function getFormConf(key) {
 export function saveFormConf(obj, key) {
     if (key) localStorage.setItem(`${FORM_CONF}:${key}`, JSON.stringify(obj))
 }
+
+export function saveCheckedColumn(key, obj) {
+    if (key) localStorage.setItem(`${CHECKED_COLUMNS}:${key}`, JSON.stringify(obj))
+}
+
+export function getCheckedColumn(key, obj) {
+    const str = localStorage.getItem(`${CHECKED_COLUMNS}:${key}`)
+    if (str) return JSON.parse(str)
+    return null
+}
diff --git a/src/views/form/ProjectForm.vue b/src/views/form/ProjectForm.vue
index 2ca543c..0ad4ec8 100644
--- a/src/views/form/ProjectForm.vue
+++ b/src/views/form/ProjectForm.vue
@@ -103,7 +103,7 @@ export default {
         this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small'
     },
     mounted() {
-        this.$api.get(`/user/project/query/details/${this.projectKey}`).then(res => {
+        this.$api.get(`/user/project/details/query/${this.projectKey}`).then(res => {
             if (res.data) {
                 let fields = res.data.projectItems.map(item => {
                     return dbDataConvertForItemJson(item)
diff --git a/src/views/form/index.vue b/src/views/form/index.vue
index e595aa6..fd02a42 100644
--- a/src/views/form/index.vue
+++ b/src/views/form/index.vue
@@ -22,7 +22,7 @@
         <theme :projectKey="projectKey" v-if="activeIndex==2"/>
         <setting :projectKey="projectKey" v-if="activeIndex==3"/>
         <publish :projectKey="projectKey" v-if="activeIndex==4"/>
-        <statistics :projectKey="projectKey" v-if="activeIndex==5"/>
+        <statistics :projectKey="projectKey" v-if="activeIndex==5&&projectKey"/>
     </div>
 </template>
 
diff --git a/src/views/form/statistics.vue b/src/views/form/statistics.vue
index 7aff57b..f666a37 100644
--- a/src/views/form/statistics.vue
+++ b/src/views/form/statistics.vue
@@ -1,75 +1,185 @@
 <template>
     <div class="statistics-container">
-        <template>
+        <div class="filter-table-view">
+            <el-form :inline="true" class="demo-form-inline">
+                <el-form-item label="审批人">
+                    <el-input placeholder="审批人"></el-input>
+                </el-form-item>
+                <el-form-item label="活动区域">
+
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary">查询</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div class="result-table-view">
             <el-table
-                :data="projectResultList"
-                style="width: 100%">
+                stripe :header-cell-style="{background:'#184F7D'}"
+                :data="projectResultList">
                 <el-table-column
                     type="selection"
                     width="55">
                 </el-table-column>
-                <el-table-column
-                    prop="serialNumber"
-                    label="提交序号"
-                    width="180">
+                <el-table-column v-for="col in fixedCustomColumns" :key="col"
+                                 :label="fixedDefaultLabelFormColumn[col]">
+                    <template slot-scope="scope">
+                        {{ scope.row[col] }}
+                    </template>
                 </el-table-column>
-                <el-table-column
-                    prop="submitAddress"
-                    label="提交地址"
-                    width="180">
+                <el-table-column v-for="col in otherCustomColumns" :key="col"
+                                 :label="projectItemColumns[col]">
+                    <template slot-scope="scope">
+                        {{ scope.row['processData'][col] }}
+                    </template>
                 </el-table-column>
                 <el-table-column
-                    prop="address"
-                    label="地址">
+                    width="50"
+                    fixed="right"
+                    :render-header="renderHeader">
                 </el-table-column>
             </el-table>
-        </template>
-
+        </div>
+        <div class="">
+            <el-dialog center title="自定义显示列" :visible.sync="customColumnDialogVisible">
+                <el-row>
+                    <el-col :span="3">
+                        <span>显示列：</span>
+                    </el-col>
+                </el-row>
+                <el-divider></el-divider>
+                <el-checkbox-group v-model="checkFixedCustomColumns">
+                    <el-row>
+                        <el-col :span="4" v-for="(val, key, index)  in fixedDefaultLabelFormColumn">
+                            <el-checkbox :label="key">{{ val }}</el-checkbox>
+                        </el-col>
+                    </el-row>
+                </el-checkbox-group>
+                <el-divider></el-divider>
+                <el-checkbox-group v-model="checkOtherCustomColumns">
+                    <el-row>
+                        <el-col :span="8" v-for="(val, key, index) in projectItemColumns">
+                            <el-checkbox :label="key">{{ val }}</el-checkbox>
+                        </el-col>
+                    </el-row>
+                </el-checkbox-group>
+                <span slot="footer" class="dialog-footer">
+                    <el-button @click="customColumnDialogVisible = false">取 消</el-button>
+                    <el-button type="primary" @click="saveStatisticsCheckedColumns">确 定</el-button>
+               </span>
+            </el-dialog>
+        </div>
     </div>
-
 </template>
 
 <script>
+import _ from 'lodash'
+import {getCheckedColumn, saveCheckedColumn} from '@/utils/db'
+
+const fixedDefaultFormColumn = ['serialNumber', 'submitAddress', 'createTime']
+const fixedDefaultLabelFormColumn = {serialNumber: '提交序号', submitAddress: '提交地址', createTime: '提交时间'}
 
 export default {
     name: 'projectStatistics',
     components: {},
     props: {
-        projectKey: '',
-        projectResultList: []
+        projectKey: ''
     },
     mounted() {
         this.queryConditions.projectKey = this.projectKey
         this.queryProjectResult()
+        this.queryProjectItems()
+
     },
     data() {
         return {
+            customColumnDialogVisible: false,
+            //固定自定义列 如序号等
+            fixedCustomColumns: fixedDefaultFormColumn,
+            //选中的
+            checkFixedCustomColumns: fixedDefaultFormColumn,
+            fixedDefaultLabelFormColumn: fixedDefaultLabelFormColumn,
+            //自定义表单属性
+            checkOtherCustomColumns: [],
+            otherCustomColumns: [],
+            projectResultList: [],
+            projectItemList: [],
+            projectItemColumns: {},
             //查询条件
             queryConditions: {
                 projectKey: ''
             }
         }
     }, methods: {
+        renderHeader(h) {
+            return (
+                <i class="el-icon-setting" onClick={() => this.customColumnDialogVisible = true}></i>
+            )
+        },
         queryProjectResult() {
             this.$api.post(`/user/project/result/query`, this.queryConditions).then(res => {
                 this.projectResultList = res.data
             })
+        },
+        saveStatisticsCheckedColumns() {
+            this.customColumnDialogVisible = false
+            this.fixedCustomColumns = this.checkFixedCustomColumns
+            this.otherCustomColumns = this.checkOtherCustomColumns
+            saveCheckedColumn(this.projectKey, {
+                fixedCustomColumns: this.fixedCustomColumns,
+                otherCustomColumns: this.otherCustomColumns
+            })
+        },
+        getDbCheckedColumns() {
+            let {fixedCustomColumns, otherCustomColumns} = getCheckedColumn(this.projectKey)
+            if (fixedCustomColumns) {
+                this.fixedCustomColumns = fixedCustomColumns
+                this.checkFixedCustomColumns = fixedCustomColumns
+            }
+            if (otherCustomColumns) {
+                this.otherCustomColumns = otherCustomColumns
+                this.checkOtherCustomColumns = otherCustomColumns
+            }
+        },
+        queryProjectItems() {
+            this.$api.get(`/user/project/item/query/${this.projectKey}`).then(res => {
+                if (res.data) {
+                    res.data.map((item) => {
+                        _.set(this.projectItemColumns, `field${item.formItemId}`, item.label)
+                    })
+                }
+                this.projectItemList = res.data
+                this.getDbCheckedColumns()
+            })
         }
     }
 
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .statistics-container {
     width: 100%;
     height: 100%;
     padding: 0px;
-    margin: 0;
+    min-height: 85vh;
     background-color: #F7F7F7;
     font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }
 
+.result-table-view {
+    width: 80%;
+    margin: 0px auto;
+}
+
+.filter-table-view {
+    width: 80%;
+    margin: 0px auto;
+}
+
+/deep/ .el-icon-setting {
+    font-size: 24px;
+    line-height: 25px;
+    color: white;
+}
+</style>