培训签到信息改进，crud组件按钮位置调整

src/components/ibps-crud/index.vue

@@ -474,8 +474,8 @@ export default {
     methods: {
         // 将模版对话框中的按钮调整至form表单内 紧跟input后面
         changeBtnPosition () {
-            const form = document.querySelectorAll('.ibps-selector-dialog div[template-type-name="ibps-data-template-list"] .ibps-container-crud__header .ibps-crud-search-form')
-            const btns = document.querySelectorAll('.ibps-selector-dialog div[template-type-name="ibps-data-template-list"] .ibps-container-crud__header .btns')
+            const form = document.querySelectorAll('div[template-type-name="ibps-data-template-list"] .ibps-container-crud__header .ibps-crud-search-form')
+            const btns = document.querySelectorAll('div[template-type-name="ibps-data-template-list"] .ibps-container-crud__header .btns')
             const size = form.length === btns.length ? form.length : 0
             for (let i = 0; i < size; i++) {
                 form[i].append(btns[i])

src/views/component/trainingManage/registerInfoDialog.vue

@@ -14,18 +14,53 @@
         >
             <div class="contain">
                 <div class="selector">
-                    签到状态：
-                    <el-select v-model="selectItem" placeholder="请选择" @change="onSelectorChange">
-                        <el-option
-                            v-for="item in ['全部','已签到','未签到','已补签']"
-                            :key="item"
-                            :label="item"
-                            :value="item"
-                        />
-                    </el-select>
+                    <div>
+                        签到状态：
+                        <el-select v-model="selectItem" placeholder="请选择" @change="onSelectorChange">
+                            <el-option
+                                v-for="item in ['全部','已签到','未签到','已补签']"
+                                :key="item"
+                                :label="item"
+                                :value="item"
+                            />
+                        </el-select>
+                    </div>
+                    <div class="rate">
+                        <div>
+                            <el-popover
+                                placement="top-start"
+                                width="200"
+                                trigger="hover"
+                                :content="`应到：${calRate.total}人，实到：${calRate.signIn}人`"
+                            >
+                                <div slot="reference" style="cursor: pointer;">出勤率：{{ calRate.signInRate }}%</div>
+                            </el-popover>
+                        </div>
+                        <div>
+                            <el-popover
+                                placement="top-start"
+                                width="200"
+                                trigger="hover"
+                                :content="`应到：${calRate.total}人，未到：${calRate.noSignIn}人`"
+                            >
+                                <div slot="reference" style="cursor: pointer;">缺勤率：{{ calRate.noSignInRate }}%</div>
+                            </el-popover>
+                        </div>
+                        <div>
+                            <el-popover
+                                placement="top-start"
+                                width="200"
+                                trigger="hover"
+                                :content="`应到：${calRate.total}人，补签：${calRate.laterSignIn}人`"
+                            >
+                                <div slot="reference" style="cursor: pointer;">补签率：{{ calRate.laterSignInRate }}%</div>
+                            </el-popover>
+                        </div>
+                    </div>
+
                 </div>
                 <div class="table">
-                    <el-table :data="showPaperList">
+                    <el-table :data="showPaperList" row-key="ren_yuan_id_">
                         <el-table-column
                             prop=""
                             label="序号"
@@ -115,8 +150,38 @@ export default {
         }
     },
     computed: {
+        // 计算各种统计率
+        calRate () {
+            const total = this.tableList.length
+            let noSignIn = 0
+            let signIn = 0
+            let laterSignIn = 0
+            this.tableList.forEach(item => {
+                if (item.status === '已签到') signIn++
+                if (item.status === '未签到') noSignIn++
+                if (item.status === '已补签') laterSignIn++
+            })
+
+            const signInRate = signIn / total * 100
+            const noSignInRate = noSignIn / total * 100
+            const laterSignInRate = laterSignIn / total * 100
+            return {
+                total,
+                signIn,
+                noSignIn,
+                laterSignIn,
+                signInRate: signInRate.toFixed(2),
+                noSignInRate: noSignInRate.toFixed(2),
+                laterSignInRate: laterSignInRate.toFixed(2)
+            }
+        },
         categoryList () {
+            const list = { '已签到': 1, '已补签': 2, '未签到': 3 }
             const tempList = this.selectItem === '全部' ? this.tableList : this.tableList.filter(item => item.status === this.selectItem)
+            // 默认排序显示
+            tempList.sort((a, b) => {
+                if (list[a.status] && list[b.status]) { return list[a.status] - list[b.status] }
+            })
             return tempList
         },
         showPaperList () {
@@ -256,5 +321,17 @@ export default {
         overflow: auto;
         margin-top: 20px;
     }
+    .selector{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .rate{
+            display: flex;
+            div{
+                margin: 0 8px;
+                font-size: 16px;
+            }
+        }
+    }
 }
 </style>