From c2b9333e299278dc391b8411728097956828145a Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Fri, 25 Mar 2022 18:41:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E8=80=83=E6=A0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jianping/AppAssessment/AppAssessment.vue  | 487 ++++++++++++++++++
 1 file changed, 487 insertions(+)
 create mode 100644 packages/jianping/AppAssessment/AppAssessment.vue

diff --git a/packages/jianping/AppAssessment/AppAssessment.vue b/packages/jianping/AppAssessment/AppAssessment.vue
new file mode 100644
index 00000000..bee8daeb
--- /dev/null
+++ b/packages/jianping/AppAssessment/AppAssessment.vue
@@ -0,0 +1,487 @@
+<template>
+  <ai-list class="AppAssessment">
+    <template slot="title">
+      <ai-title title="工作考核" isShowBottomBorder :isShowArea="true" v-model="search.areaId" :instance="instance" @change="getList"></ai-title>
+    </template>
+    <template slot="content">
+      <div class="statistics-top">
+        <div class="statistics-top__item">
+          <span>活动登记数量</span>
+          <h2 style="color: #2266FF;">{{ info['丧礼登记数量'] }}</h2>
+        </div>
+        <div class="statistics-top__item">
+          <span>干部参与和操办登记数量</span>
+          <h2 style="color: #22AA99;">{{ info['干部参与和操办登记数量'] }}</h2>
+        </div>
+        <div class="statistics-top__item">
+          <span>婚礼登记数量</span>
+          <h2 style="color: #F8B425">{{ info['婚礼登记数量'] }}</h2>
+        </div>
+        <div class="statistics-top__item">
+          <span>丧礼登记数量</span>
+          <h2 style="color: red">{{ info['丧礼登记数量'] }}</h2>
+        </div>
+      </div>
+      <ai-card title="帮扶走访情况">
+        <template #content>
+          <ai-table
+            :tableData="tableData"
+            :col-configs="colConfigs"
+            :total="total"
+            style="margin-top: 12px;"
+            :current.sync="search.current"
+            :size.sync="search.size"
+            @selection-change="(v) => (ids = v.map((e) => e.id))"
+            @getList="getList">
+            <el-table-column slot="options" width="90px" fixed="right" label="操作" align="center">
+              <div class="table-options" slot-scope="{ row }">
+                <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
+                <el-button type="text" @click="remove(row.id)">删除</el-button>
+              </div>
+            </el-table-column>
+          </ai-table>
+        </template>
+      </ai-card>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  export default {
+    name: 'AppAssessment',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data() {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          title: '',
+          areaId: ''
+        },
+        info: {
+
+        },
+        ids: [],
+        total: 10,
+        tableData: []
+      }
+    },
+
+    computed: {
+      ...mapState(['user']),
+
+      colConfigs () {
+        return [
+          { prop: 'title', label: '审批负责人', align: 'left' },
+          { prop: 'createUserName', label: '所属地区', align: 'center' },
+          { prop: 'createTime', label: '操作时间', align: 'center' },
+          { prop: 'createTime', label: '操作人', align: 'center' },
+          { slot: 'options', label: '操作' }
+        ]
+      }
+    },
+
+    created () {
+      this.search.areaId = this.user.info.areaId
+      this.dict.load('epidemicRecentTestResult').then(() => {
+        this.getList()
+      })
+    },
+
+    methods: {
+      getList() {
+        this.instance.post(`/app/appmininotice/list`, null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+      removeAll () {
+        var id = this.ids.join(',')
+        this.remove(id)
+      },
+
+      remove(id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appmininotice/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      },
+
+      toDetail (id) {
+        this.$emit('change', {
+          type: 'Detail',
+          params: {
+            id: id || ''
+          }
+        })
+      },
+
+      toAdd(id) {
+        this.$emit('change', {
+          type: 'Add',
+          params: {
+            id: id || ''
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AppAssessment {
+    .statistics-top {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+
+      & > div {
+        flex: 1;
+        height: 96px;
+        line-height: 1;
+        margin-right: 20px;
+        padding: 16px 24px;
+        background: #FFFFFF;
+        box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
+        border-radius: 4px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        h3 {
+          font-size: 24px;
+        }
+
+        span {
+          display: block;
+          margin-bottom: 16px;
+          color: #888888;
+          font-size: 16px;
+        }
+      }
+    }
+    ::v-deep .ai-list__content {
+      width: 100%;
+      .ai-list__content--right {
+        width: 100%!important;
+
+        .ai-list__content--right-wrapper {
+          padding: 0!important;
+          background: transparent!important;
+          box-shadow: none!important;
+        }
+      }
+    }
+    ::v-deep.el-pager {
+      li.active + li {
+        border-left: 1px solid #D0D4DC;
+      }
+    } 
+
+    .newPagination {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      height: 64px;
+      padding: 0 40px!important;
+
+      .el-pagination {
+        width: 100%;
+        padding: 0;
+      }
+      ::v-deep .el-pager li.active {
+        background-color: #fff !important;
+        color: #2266FF !important;
+        border-color: #2266FF;
+      }
+
+      ::v-deep .el-pager li {
+        background-color: #fff;
+        border: solid 1px #d0d4dc;
+        margin-left: 8px;
+        border-radius: 4px !important;
+        line-height: 26px !important;
+      }
+
+      .paginationPre {
+        display: flex;
+        height: 28px;
+        line-height: 1;
+        font-size: 14px;
+        font-weight: normal;
+        align-items: center;
+
+        .pagination-btns {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          color: #2266FF !important;
+
+          ::v-deep span, ::v-deep div {
+            font-size: 12px;
+            cursor: pointer;
+            color: #2266FF !important;
+
+            &:hover {
+              opacity: 0.8;
+            }
+          }
+        }
+
+        .paginationPre-total {
+          font-size: 12px;
+          color: #555;
+
+          label {
+            padding: 0 2px;
+            font-weight: 700;
+          }
+        }
+
+        & > * + * {
+          margin-left: 24px;
+        }
+
+        ::v-deep .el-pagination button, .el-pagination span:not([class*=suffix]) {
+          line-height: 1 !important;
+        }
+
+        ::v-deep.el-checkbox {
+          padding-left: 14px;
+          display: flex;
+          align-items: center;
+
+          .el-checkbox__input, .el-checkbox__inner {
+            width: 14px;
+            height: 14px;
+            min-width: 0 !important;
+            line-height: 1 !important;
+          }
+
+          .el-checkbox__label {
+            font-size: 12px;
+            color: #222222;
+            height: auto !important;
+            line-height: 1 !important;
+            padding-left: 3px !important;
+          }
+        }
+      }
+    }
+
+    .form-list__list {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 8px;
+
+      .list-item {
+        display: flex;
+        position: relative;
+        flex-direction: column;
+        justify-content: space-between;
+        margin-bottom: 12px;
+        padding: 18px 16px 16px;
+
+        .list-item__img {
+          width: 100%;
+          height: 140px;
+          cursor: pointer;
+
+          img {
+            width: 100%;
+            height: 140px;
+            object-fit: none;
+          }
+        }
+
+        &:hover {
+          .list-item__operate {
+            display: flex;
+          }
+        }
+
+        .list-item__operate {
+          display: none;
+          align-items: center;
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          z-index: 1;
+          width: 100%;
+          height: 52px;
+          text-align: center;
+          background: #F7F8FA;
+
+          & > div {
+            flex: 1;
+          }
+
+          ::v-deep .el-button {
+            margin-left: 0;
+            padding: 0;
+            i {
+              color: #8899BB;
+              font-size: 14px;
+              transition: all 0.3s;
+            }
+
+            .el-button + .el-button {
+              margin-left: 0;
+            }
+
+            span {
+              margin-left: 0;
+              color: #555555;
+              font-size: 12px;
+              transition: all 0.3s;
+            }
+
+            &:hover {
+              &.is-disabled {
+                i {
+                  color: #8899BB;
+                }
+
+                span {
+                  color: #555555;
+                }
+              }
+            }
+          }
+
+          .list-item__operate--item {
+            flex: 1;
+
+            &:hover {
+              ::v-deep i, ::v-deep span {
+                color: #2266FF;
+              }
+            }
+          }
+        }
+
+        .list-item__bottom {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          color: #888888;
+          font-size: 12px;
+
+          i {
+            font-style: normal;
+          }
+
+          .left {
+            display: flex;
+            align-items: center;
+
+            .tag {
+              height: 26px;
+              line-height: 26px;
+              margin-right: 8px;
+              padding: 0 6px;
+              border-radius: 4px;
+              background: #42D784;
+              color: #fff;
+            }
+          }
+        }
+
+        p {
+          line-height: 22px;
+          color: #333333;
+          font-size: 14px;
+          font-weight: 700;
+        }
+
+        .list-item__user {
+          display: flex;
+          align-items: center;
+          margin-top: 12px;
+          color: #888888;
+          font-size: 12px;
+          line-height: 20px;
+
+          & > div:first-child {
+            margin-right: 8px;
+          }
+        }
+
+        .list-item__title {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 14px;
+
+          h2 {
+            color: #2EA222;
+            font-size: 12px;
+          }
+
+          span {
+            width: 64px;
+            height: 24px;
+            line-height: 24px;
+            text-align: center;
+            border-radius: 4px;
+            font-size: 12px;
+          }
+        }
+      }
+
+      .list-add {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        padding: 0;
+        cursor: pointer;
+
+        span {
+          font-size: 32px;
+          color: #8899bb;
+        }
+
+        h2 {
+          color: #555555;
+          font-size: 12px;
+        }
+
+        &:hover {
+          opacity: 0.6;
+        }
+      }
+
+      & > div {
+        width: calc((100% - 60px) / 4);
+        height: 216px;
+        margin: 0 20px 20px 0;
+        background: #FFFFFF;
+        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);
+        border-radius: 2px;
+
+        &:nth-of-type(4n) {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+</style>