From 86e99e0c7415766b1ad6ff7a764d919a15e1a278 Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Wed, 19 Oct 2022 13:38:16 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E5=9C=A8=E8=81=8C=E5=85=9A=E5=91=98?=
 =?UTF-8?q?=E7=A4=BE=E5=8C=BA=E6=8A=A5=E5=88=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pingchang/apps/AppCommunityMember/Add.vue | 195 ++++++++++++++++++
 .../AppCommunityMember/AppCommunityMember.vue | 107 ++++++++++
 .../apps/AppCommunityMember/Detail.vue        |  89 ++++++++
 .../apps/AppCommunityMember/List.vue          | 155 ++++++++++++++
 .../apps/AppCommunityMember/Organization.vue  |   0
 .../apps/AppCommunityMember/Statistics.vue    |   0
 6 files changed, 546 insertions(+)
 create mode 100644 project/pingchang/apps/AppCommunityMember/Add.vue
 create mode 100644 project/pingchang/apps/AppCommunityMember/AppCommunityMember.vue
 create mode 100644 project/pingchang/apps/AppCommunityMember/Detail.vue
 create mode 100644 project/pingchang/apps/AppCommunityMember/List.vue
 create mode 100644 project/pingchang/apps/AppCommunityMember/Organization.vue
 create mode 100644 project/pingchang/apps/AppCommunityMember/Statistics.vue

diff --git a/project/pingchang/apps/AppCommunityMember/Add.vue b/project/pingchang/apps/AppCommunityMember/Add.vue
new file mode 100644
index 00000000..e623189f
--- /dev/null
+++ b/project/pingchang/apps/AppCommunityMember/Add.vue
@@ -0,0 +1,195 @@
+<template>
+  <ai-detail class="Add">
+    <ai-title slot="title" title="发起活动" isShowBack isShowBottomBorder @onBackClick="cancel"/>
+    <template slot="content">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right">
+        <ai-card title="活动信息">
+          <template #content>
+            <div class="ai-form">
+              <el-form-item label="发布地区" prop="areaId" style="width: 100%">
+                <ai-area-select
+                  clearable
+                  :instance="instance"
+                  v-model="form.areaId"
+                  @fullname="v => form.areaName = v"
+                  always-show
+                  area-level="5"
+                  :disabledLevel="disabledLevel"
+                />
+              </el-form-item>
+              <el-form-item label="标题" prop="title" style="width: 100%">
+                <el-input
+                    size="small"
+                    v-model="form.title"
+                    placeholder="请输入..."
+                    clearabel
+                    :maxLength="60"
+                ></el-input>
+              </el-form-item>
+              <el-form-item label="活动地点" prop="address" style="width: 100%">
+                <el-input
+                    size="small"
+                    v-model="form.address"
+                    placeholder="请输入..."
+                    clearabel
+                    :maxLength="20"
+                ></el-input>
+              </el-form-item>
+              <el-form-item label="参与名额" prop="total" style="width: 100%">
+                <el-input-number v-model="form.total" :min="0" :max="1000" size="small"></el-input-number>
+                <span class="text">*0表示不限制活动报名人数</span>
+              </el-form-item>
+              <el-form-item label="活动时间" prop="activeTimeList" style="width: 50%">
+                <el-date-picker size="small" :picker-options="pickerOptions"
+                  v-model="form.activeTimeList"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  format="yyyy-MM-dd"
+                  value-format="yyyy-MM-dd HH:mm:ss">
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item label="截至时间" prop="stopSignupTime" style="width: 50%">
+                <el-date-picker size="small" :picker-options="pickerOptions"
+                  v-model="form.stopSignupTime"
+                  type="date"
+                  style="width: 100%"
+                  placeholder="选择日期"
+                  format="yyyy-MM-dd"
+                  value-format="yyyy-MM-dd HH:mm:ss">
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item label="联系人" prop="contactPerson" style="width: 50%">
+                <el-input
+                    size="small"
+                    v-model="form.contactPerson"
+                    placeholder="请输入..."
+                    clearabel
+                    :maxLength="10"
+                ></el-input>
+              </el-form-item>
+              <el-form-item label="联系电话" prop="contactPhone" style="width: 50%">
+                <el-input
+                    size="small"
+                    v-model="form.contactPhone"
+                    placeholder="请输入..."
+                    clearabel
+                    :maxLength="11"
+                ></el-input>
+              </el-form-item>
+              <el-form-item label="活动介绍" prop="content" style="width: 100%">
+                <ai-editor v-model="form.content" :instance="instance"/>
+              </el-form-item>
+            </div>
+          </template>
+        </ai-card>
+      </el-form>
+    </template>
+    <template #footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="confirm">提交</el-button>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+import {mapState} from "vuex";
+export default {
+  name: "Add",
+  props: {
+    instance: Function,
+    dict: Object,
+    selected: Object,
+  },
+  computed: {
+    ...mapState(["user"]),
+  },
+  data() {
+    return {
+      disabledLevel: 0,
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() < Date.now();
+        },
+      },
+      rules: {
+        areaId: [{ required: true, message: '请选择发布地区', trigger: 'change' },
+          {
+            validator: (r, v, cb) => {
+              if (/.+0{3}$/.test(v)) {
+                cb("发布地区必须选到村级")
+              } else cb()
+            }, trigger: "blur"
+          }
+        ],
+        title: [{ required: true, message: '请输入标题', trigger: 'change' }],
+        address: [{ required: true, message: '请选输入活动地点', trigger: 'change' }],
+        total: [{ required: true, message: '请输入参与人员', trigger: 'change' }],
+        activeTimeList: [{ required: true, message: '请选择活动时间', trigger: 'change' }],
+        stopSignupTime: [{ required: true, message: '请选择截止时间', trigger: 'change' }],
+        contactPerson: [{ required: true, message: '请输入联系人', trigger: 'change' }],
+        contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'change' }],
+        content: [{ required: true, message: '请输入活动介绍', trigger: 'change' }],
+      },
+      form: {
+        areaId: '',
+        areaName: '',
+        title: '',
+        address: '',
+        total: '',
+        activeTimeList: [],
+        stopSignupTime: '',
+        contactPerson: '',
+        contactPhone: '',
+        content: ''
+      }
+    };
+  },
+  created() {
+    console.log(this.user)
+    this.dict.load("education", "sex", "nation", "developStatus")
+    this.disabledLevel = this.user.info.areaList.length - 1
+    this.form.areaId = this.user.info.areaId
+  },
+  methods: {
+    confirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.form.beginTime = this.form.activeTimeList[0]
+          this.form.endTime = this.form.activeTimeList[1]
+          this.instance.post(`/app/apppartyreport/addOrUpdate`, {...this.form}).then((res) => {
+            if (res.code == 0) {
+              this.$message.success('发起活动成功')
+              setTimeout(() => {
+                this.cancel()
+              }, 600);
+            }
+          });
+        }
+      });
+    },
+    cancel() {
+      this.$emit("goBack")
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+  .Add {
+    .ai-form {
+      display: flex;
+    }
+    .text {
+      display: inline-block;
+      padding-left: 8px;
+      color: #999;
+    }
+    ::v-deep .el-range-separator {
+      width: 28px!important;
+    }
+    ::v-deep .el-date-editor {
+      width: 100%;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/project/pingchang/apps/AppCommunityMember/AppCommunityMember.vue b/project/pingchang/apps/AppCommunityMember/AppCommunityMember.vue
new file mode 100644
index 00000000..2217812b
--- /dev/null
+++ b/project/pingchang/apps/AppCommunityMember/AppCommunityMember.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="AppCommunityMember">
+    <ai-list v-show="!detailShow">
+      <template slot="title">
+        <ai-title title="报到服务" :isShowBottomBorder="false" :instance="instance" :isShowArea="currIndex == 0 ? true : false" v-model="areaId" @change="changeArea"></ai-title>
+      </template>
+      <template slot="tabs">
+        <el-tabs v-model="currIndex">
+          <el-tab-pane v-for="(tab,i) in tabs" :key="i" :name="String(i)" :label="tab.label">
+            <component
+              :is="tab.comp"
+              v-if="currIndex === String(i)"
+              :areaId="areaId"
+              :ref="tab.name"
+              @showDetail="showDetail"
+              :instance="instance"
+              :dict="dict"
+              :permissions="permissions" />
+          </el-tab-pane>
+        </el-tabs>
+      </template>
+    </ai-list>
+    <component v-if="detailShow" :is="currDet" :areaId="areaId" :id="id" @goBack="goBack" :instance="instance" :dict="dict" :permissions="permissions"/>
+  </div>
+</template>
+
+<script>
+import List from './List'
+import Statistics from './Statistics'
+import Organization from './Organization'
+import Add from './Add'
+import Detail from './Detail'
+
+import {mapState} from 'vuex'
+
+export default {
+  name: "AppCommunityMember",
+  label: "在职党员社区报到",
+  components: {List, Statistics, Organization, Add, Detail},
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+
+  computed: {
+    tabs() {
+      return [
+        {
+          label: "社区活动管理",
+          name: "List",
+          comp: List,
+        },
+        {
+          label: "报到数据",
+          name: "Statistics",
+          comp: Statistics,
+        },
+        {
+          label: "报到组织管理",
+          name: "Organization",
+          comp: Organization,
+        },
+      ]
+    },
+    ...mapState(['user']),
+    currDet() {
+      return this.id ? Detail : Add
+    }
+  },
+  created() {
+    this.areaId = this.user.info.areaId;
+  },
+  data() {
+    return {
+      activeName: "List",
+      currIndex: 0,
+      areaId: '',
+      detailShow: false,
+      id: ''
+    }
+  },
+  methods: {
+    goBack() {
+      this.detailShow = false;
+      this.$nextTick(() => {
+        this.$refs.List[0].getListInit()
+      })
+    },
+    showDetail(id) {
+      this.id = id || ''
+      this.detailShow = true
+    },
+    changeArea() {
+      this.$nextTick(() => {
+        this.$refs.List[0].getListInit()
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.AppCommunityMember {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/project/pingchang/apps/AppCommunityMember/Detail.vue b/project/pingchang/apps/AppCommunityMember/Detail.vue
new file mode 100644
index 00000000..0d877c48
--- /dev/null
+++ b/project/pingchang/apps/AppCommunityMember/Detail.vue
@@ -0,0 +1,89 @@
+<template>
+  <ai-detail class="party-detail">
+    <template slot="title">
+      <ai-title
+        title="活动详情"
+        isShowBack
+        isShowBottomBorder
+        @onBackClick="cancel()"
+      ></ai-title>
+    </template>
+    <template slot="content">
+      <div>
+        <ai-card title="活动信息">
+          <template #content>
+            <ai-wrapper label-width="120px">
+              <ai-info-item isLine label="发布地区">{{ info.areaName }}</ai-info-item>
+              <ai-info-item isLine label="标题">{{ info.title }}</ai-info-item>
+              <ai-info-item isLine label="活动地点">{{ info.address }}</ai-info-item>
+              <ai-info-item isLine label="参与名额">{{ info.total }}</ai-info-item>
+              <ai-info-item label="报名状态">{{ dict.getLabel('partyReportSignupStatus', info.signupStatus) }}</ai-info-item>
+              <ai-info-item label="活动状态">{{ dict.getLabel('activityStatus', info.actionStatus) }}</ai-info-item>
+              <ai-info-item label="活动时间">{{ info.beginTime.substring(0, 10) }} 至 {{ info.endTime.substring(0, 10) }}</ai-info-item>
+              <ai-info-item label="截至时间">{{ info.stopSignupTime }}</ai-info-item>
+              <ai-info-item label="联系人">{{ info.contactPerson }}</ai-info-item>
+              <ai-info-item label="联系电话">{{ info.contactPhone }}</ai-info-item>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+        <ai-card title="活动介绍">
+          <template #content>
+            <p v-html="info.content"></p>
+          </template>
+        </ai-card>
+        <ai-card title="报名情况">
+          <template #content>
+            <p v-html="info.content"></p>
+          </template>
+        </ai-card>
+      </div>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "detail",
+
+  props: {
+    instance: Function,
+    dict: Object,
+    params: Object,
+    id: String
+  },
+
+  data() {
+    return {
+      info: {},
+    }
+  },
+
+  computed: {
+    ...mapState(["user"]),
+  },
+
+  created() {
+    this.dict.load('activityStatus', 'partyReportSignupStatus').then(() => {
+      this.getInfo()
+    })
+  },
+
+  methods: {
+    getInfo() {
+      this.instance.post(`/app/apppartyreport/queryDetailById?id=${this.id}`).then((res) => {
+        if (res?.data) {
+          this.info = res.data;
+          if (this.info.birthday) {
+            this.info.birthday = this.info.birthday.substring(0, 10);
+          }
+        }
+      });
+    },
+    cancel() {
+      this.$emit("goBack")
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/project/pingchang/apps/AppCommunityMember/List.vue b/project/pingchang/apps/AppCommunityMember/List.vue
new file mode 100644
index 00000000..4d016189
--- /dev/null
+++ b/project/pingchang/apps/AppCommunityMember/List.vue
@@ -0,0 +1,155 @@
+<template>
+  <ai-list class="partyList">
+    <template slot="content">
+      <ai-search-bar>
+        <template #left>
+          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd()">发起活动</el-button>
+          <ai-select v-model="search.actionStatus" placeholder="请选择活动状态" :selectList="dict.getDict('activityStatus')"
+            @change="getListInit"></ai-select>
+          <ai-select v-model="search.signupStatus" placeholder="请选择报名状态" :selectList="dict.getDict('partyReportSignupStatus')"
+            @change="getListInit"></ai-select>
+        </template>
+        <template slot="right">
+          <el-input
+              v-model="search.con"
+              size="small"
+              placeholder="请输入活动名称或发布地区"
+              clearable
+              @change="search.current=1,getList()"
+              suffix-icon="iconfont iconSearch"/>
+        </template>
+      </ai-search-bar>
+      <ai-table
+          :dict="dict"
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :total="total"
+          v-loading="loading"
+          style="margin-top: 6px;"
+          :current.sync="search.current"
+          :size.sync="search.size"
+          @getList="getList">
+        <el-table-column slot="activeTime" width="220px" label="活动时间" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">{{row.beginTime.substring(0, 10)}}至{{row.endTime.substring(0, 10)}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column slot="options" width="220px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="toDetail(row.id)">详情</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: 'List',
+
+  props: {
+    instance: Function,
+    permissions: Function,
+    dict: Object,
+    selected: Object,
+    areaId: String
+  },
+  data() {
+    return {
+      search: {
+        current: 1,
+        size: 10,
+        con: '',
+        actionStatus: '',
+        signupStatus: ''
+      },
+      orgName: '',
+      loading: false,
+      total: 0,
+      colConfigs: [
+        {prop: 'title', label: '活动名称', align: 'center'},
+        {prop: 'areaName', label: '发布地区', align: 'center'},
+        {slot: 'activeTime'},
+        {prop: 'total', label: '报名人数', align: 'center', width: 120},
+        {prop: 'signupStatus', label: '报名状态', align: 'center', dict: 'partyReportSignupStatus', width: 120},
+        {prop: 'actionStatus', label: '活动状态', align: 'center', dict: 'activityStatus', width: 120},
+        {slot: 'option'},
+      ],
+      tableData: [],
+      ids: '',
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  created() {
+    this.dict.load('activityStatus', 'partyReportSignupStatus').then(() => {
+      this.getList()
+    })
+    
+  },
+  methods: {
+    getListInit() {
+      this.current = 1
+      this.getList()
+    },
+    getList() {
+      this.instance.post(`/app/apppartyreport/list`, null, {
+        params: {...this.search, areaId: this.areaId}
+      }).then(res => {
+        this.loading = false
+        if (res?.data) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    
+    toDetail(id) {
+      this.$emit("showDetail", id)
+    },
+    toAdd() {
+      this.$emit("showDetail")
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.partyList {
+  .party-table__btns {
+    display: flex;
+    align-items: center;
+  }
+
+  ::v-deep .audit-0 {
+    color: #FF8822 !important;
+  }
+
+  ::v-deep .audit-1 {
+    color: #2EA222 !important;
+  }
+
+  ::v-deep .ai-list__content--right {
+    flex: 1;
+    min-width: 0;
+    margin-left: 1px;
+    box-shadow: none;
+
+    .ai-list__content--right-wrapper {
+      width: 100%;
+    }
+  }
+  ::v-deep .is-current>.el-tree-node__content{
+    width: 100%!important;
+    padding-right: 16px!important;
+  }
+}
+</style>
diff --git a/project/pingchang/apps/AppCommunityMember/Organization.vue b/project/pingchang/apps/AppCommunityMember/Organization.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/project/pingchang/apps/AppCommunityMember/Statistics.vue b/project/pingchang/apps/AppCommunityMember/Statistics.vue
new file mode 100644
index 00000000..e69de29b

From bf31cb10da2fc66c091b93696cc21b1ceab8137a Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Wed, 19 Oct 2022 14:16:14 +0800
Subject: [PATCH 2/6] =?UTF-8?q?=E6=8A=A5=E5=88=B0=E7=BB=84=E7=BB=87?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../apps/AppCommunityMember/Detail.vue        |  45 ++-
 .../apps/AppCommunityMember/Organization.vue  | 326 ++++++++++++++++++
 2 files changed, 369 insertions(+), 2 deletions(-)

diff --git a/project/pingchang/apps/AppCommunityMember/Detail.vue b/project/pingchang/apps/AppCommunityMember/Detail.vue
index 0d877c48..919f57e8 100644
--- a/project/pingchang/apps/AppCommunityMember/Detail.vue
+++ b/project/pingchang/apps/AppCommunityMember/Detail.vue
@@ -33,7 +33,28 @@
         </ai-card>
         <ai-card title="报名情况">
           <template #content>
-            <p v-html="info.content"></p>
+            <ai-table
+              :border="true"
+              :tableData="info.introducerList"
+              :isShowPagination="false"
+              :col-configs="colConfigs"
+              >
+              <el-table-column slot="user" width="300px" label="报名人员资料" align="center">
+                <template slot-scope="{ row }">
+                  <div class="table-options">
+                    <p>{{row.partyName}}-{{row.phone}}</p>
+                    <p class="color-999">{{partyOrgName}}</p>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column slot="options" width="120px" fixed="right" label="操作" align="center">
+                <template slot-scope="{ row }">
+                  <div class="table-options">
+                    <el-button type="text" @click="toDetail(row.id)">查看日志</el-button>
+                  </div>
+                </template>
+              </el-table-column>
+            </ai-table>
           </template>
         </ai-card>
       </div>
@@ -57,6 +78,16 @@ export default {
   data() {
     return {
       info: {},
+      colConfigs: [
+        {prop: "signupTime", label: "报名时间", align: "center"},
+        {slot: "user"},
+        {prop: "reportType", label: "活动报到类型", align: "center", dict: 'partyReportSignupReportType'},
+        {prop: "remark", label: "报名备注", align: "center"},
+        {prop: "status", label: "报名状态", align: "center", dict: 'partyReportPersonSignupStatus'},
+        {prop: "logStatus", label: "活动日志", align: "center", dict: 'partyReportSignupLogStatus'},
+        {slot: "options"},
+      ],
+      userList: []
     }
   },
 
@@ -65,8 +96,9 @@ export default {
   },
 
   created() {
-    this.dict.load('activityStatus', 'partyReportSignupStatus').then(() => {
+    this.dict.load('activityStatus', 'partyReportSignupStatus', 'partyReportSignupReportType', 'partyReportPersonSignupStatus', 'partyReportSignupLogStatus').then(() => {
       this.getInfo()
+      this.getList()
     })
   },
 
@@ -81,6 +113,15 @@ export default {
         }
       });
     },
+    getList() {
+      this.instance.post(`/app/apppartyreport/signup-info?id=${this.id}`).then((res) => {
+        if (res?.data) {
+          res.data.map((item) => {
+            item.signupTime = item.signupTime.substring(0, 10)
+          })
+        }
+      });
+    },
     cancel() {
       this.$emit("goBack")
     },
diff --git a/project/pingchang/apps/AppCommunityMember/Organization.vue b/project/pingchang/apps/AppCommunityMember/Organization.vue
index e69de29b..e212067e 100644
--- a/project/pingchang/apps/AppCommunityMember/Organization.vue
+++ b/project/pingchang/apps/AppCommunityMember/Organization.vue
@@ -0,0 +1,326 @@
+<template>
+  <section class="Organization">
+    <div class="organizations_content">
+      <header>
+        <i class="iconfont iconModal_Warning"></i>
+        <p>
+          并非所有单位都需要参加社区活动，对于需要参加社区活动的单位，请在下方“应报到单位名单”中进行修改，无需参加活动的单位请勿勾选。
+        </p>
+      </header>
+      <div class="organizations_tree">
+        <p class="top">
+          <span class="word">应报到单位名单</span>
+          <el-button
+            type="text"
+            icon="iconfont iconEdit"
+            @click="editDialog = true"
+            >修改</el-button
+          >
+        </p>
+        <el-input
+          size="mini"
+          v-model.trim="selectFilterText"
+          style="margin-top: 8px"
+          placeholder="请输入单位..."
+          suffix-icon="iconfont iconSearch"
+          @keyup.native="$refs.selectTree.filter(selectFilterText)"
+          clearable
+          @clear="$refs.selectTree.filter(selectFilterText)"
+        />
+        <div class="left_cont">
+          <el-tree
+            :data="selectTreeData"
+            :props="defaultProps"
+            ref="selectTree"
+            node-key="partyOrgId"
+            :default-expanded-keys="[user.info.organizationId]"
+            empty-text="搜索不到相关内容"
+            :filter-node-method="filterNode"
+            :highlight-current="true"
+            v-if="selectTreeData.length > 0"
+          />
+          <div v-else class="no-data" style="height: 300px"></div>
+        </div>
+      </div>
+    </div>
+    <el-dialog
+      class="mask"
+      :visible.sync="editDialog"
+      width="520px"
+      title="修改应报到单位"
+      :close-on-click-modal="false"
+    >
+      <div class="tree">
+        <el-input
+          size="mini"
+          v-model="filterText"
+          placeholder="请输入单位..."
+          suffix-icon="iconfont iconSearch"
+          clearable
+        />
+        <div class="left_cont">
+          <el-tree
+            v-if="editDialog"
+            :data="originTreeData"
+            :props="defaultProps"
+            ref="tree_edit"
+            node-key="partyOrgId"
+            show-checkbox
+            empty-text="搜索不到相关内容"
+            :filter-node-method="filterNode"
+            :default-expanded-keys="[user.info.organizationId]"
+            :default-checked-keys="defaultKeys"
+            :current-node-key="user.info.organizationId"
+            :highlight-current="true"
+          />
+          <div v-else class="no-data" style="height: 300px"></div>
+        </div>
+      </div>
+      <div slot="footer" style="text-align: center">
+        <el-button
+          style="width: 92px"
+          size="small"
+          class="delete-btn"
+          @click="editDialog = false"
+          >取消</el-button
+        >
+        <el-button
+          style="width: 92px"
+          size="small"
+          type="primary"
+          @click="selectTree()"
+          >确认</el-button
+        >
+      </div>
+    </el-dialog>
+  </section>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "Organization",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+  },
+  data() {
+    return {
+      treeData: [],
+      editDialog: false,
+      filterText: "",
+      selectFilterText: "",
+    };
+  },
+  computed: {
+    ...mapState(["user"]),
+    defaultProps() {
+      return {
+        children: "children",
+        label: "partyOrgName",
+      };
+    },
+    defaultKeys() {
+      return this.selectTreeData.map((e) => e.partyOrgId) || [];
+    },
+    originTreeData() {
+      let data = [];
+      if (this.editDialog) {
+        let origin = JSON.parse(JSON.stringify(this.treeData)) || [];
+        data = origin.filter(
+          (e) => e.partyOrgId == this.user.info.organizationId
+        );
+        data.map((t) => this.addChildParty(t, origin));
+      }
+      return data;
+    },
+    selectTreeData() {
+      let treeMeta = [],
+        arr = JSON.parse(
+          JSON.stringify(this.treeData.filter((e) => e.checked))
+        );
+      treeMeta = this.findParent(arr, {
+        id: "partyOrgId",
+        parent: "partyOrgParentId",
+      });
+      treeMeta.map((t) => this.addChildParty(t, arr));
+      return treeMeta;
+    },
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree_edit.filter(val);
+    },
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.partyOrgName.indexOf(value) !== -1;
+    },
+    // 根据登录用户单位查 树形结构
+    searchSysAll() {
+      this.treeData = [];
+      this.instance.post("/app/apppartyreportconfig/list").then((res) => {
+        if (res?.data) {
+          this.treeData = res.data;
+        }
+      });
+    },
+    selectTree() {
+      let selectArr = this.$refs.tree_edit.getCheckedNodes();
+      this.updateTree(selectArr);
+    },
+    updateTree(arr) {
+      arr = arr.map((e) => {
+        delete e.children;
+        return { ...e, checked: true };
+      });
+      this.instance
+        .post("/app/apppartyreportconfig/addOrUpdate", arr)
+        .then((res) => {
+          if (res?.code == 0) {
+            this.$message.success("修改成功");
+            this.searchSysAll();
+            this.editDialog = false;
+          }
+        });
+    },
+    findParent(data, ops) {
+      ops = {
+        id: "self",
+        parent: "parentId",
+        parents: {},
+        pending: [],
+        ...ops,
+      };
+      let parentsObj = {};
+      data
+        .filter(
+          (e) => ops.pending.length == 0 || ops.pending.includes(e[ops.id])
+        )
+        .map((e) => {
+          if (e[ops.parent]) {
+            parentsObj[e[ops.parent]] = 0;
+          } else {
+            ops.parents[e[ops.id]] = e;
+          }
+        });
+      let pending = {};
+      Object.keys(parentsObj).map((p) => {
+        let item = data.find((e) => e[ops.id] == p);
+        if (item) {
+          item[ops.parent] && (pending[p] = item[ops.parent]);
+        } else {
+          if (!ops.parents[p]) {
+            data
+              .filter((e) => e[ops.parent] == p)
+              .map((e) => {
+                ops.parents[e[ops.id]] = e;
+              });
+          }
+        }
+      });
+      ops.pending = Object.values(pending);
+      if (ops.pending.length) {
+        return this.findParent(data, ops);
+      } else return Object.values(ops.parents);
+    },
+  },
+  mounted() {
+    this.$nextTick(() => this.searchSysAll());
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.Organization {
+  width: 100%;
+  height: 100%;
+  padding: 16px 0;
+  overflow: auto;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+
+  .organizations_content {
+    width: 1200px;
+    height: 100%;
+    overflow-y: hidden;
+
+    header {
+      width: 100%;
+      height: 32px;
+      background: rgba(255, 243, 232, 1);
+      border-radius: 4px;
+      border: 1px solid rgba(255, 136, 34, 1);
+      padding: 8px;
+      box-sizing: border-box;
+
+      .iconfont.iconModal_Warning {
+        color: #ff8822;
+        height: 100%;
+        float: left;
+        width: 20px;
+      }
+
+      p {
+        float: left;
+        width: 800px;
+        font-size: 12px;
+        color: #ff8822;
+      }
+    }
+
+    .organizations_tree {
+      margin-top: 16px;
+      width: 100%;
+      min-height: 500px;
+      background: rgba(255, 255, 255, 1);
+      border-radius: 4px;
+      padding: 0 16px 16px 16px;
+      box-sizing: border-box;
+      margin-bottom: 48px;
+
+      .top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 56px;
+        border-bottom: 1px solid #eee;
+
+        .word {
+          font-size: 16px;
+          color: #333333;
+          font-weight: bold;
+        }
+
+        ::v-deep .el-button--text [class*="iconfont"] {
+          color: #5088ff;
+        }
+      }
+    }
+  }
+
+  ::v-deep .el-dialog {
+    .el-dialog__body {
+      padding: 16px;
+    }
+  }
+
+  ::v-deep .el-tree {
+    margin-top: 16px;
+    min-height: 300px;
+    max-height: 600px;
+    overflow: auto;
+
+    .el-tree-node.is-focusable.is-checked {
+      .el-tree-node__label {
+        color: #5088ff;
+        background: rgba(239, 246, 255, 1);
+      }
+    }
+  }
+}
+</style>

From 3e5acf655e220a6d3830f80edb3836dcba389e78 Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Wed, 19 Oct 2022 17:04:26 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E5=9C=A8=E8=81=8C=E5=85=9A=E5=91=98?=
 =?UTF-8?q?=E7=A4=BE=E5=8C=BA=E6=8A=A5=E5=88=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pingchang/apps/AppCommunityMember/Add.vue | 44 +++++++++----------
 .../apps/AppCommunityMember/List.vue          | 32 +++++++-------
 .../apps/AppCommunityMember/Organization.vue  | 18 ++++----
 3 files changed, 46 insertions(+), 48 deletions(-)

diff --git a/project/pingchang/apps/AppCommunityMember/Add.vue b/project/pingchang/apps/AppCommunityMember/Add.vue
index e623189f..1119d8ef 100644
--- a/project/pingchang/apps/AppCommunityMember/Add.vue
+++ b/project/pingchang/apps/AppCommunityMember/Add.vue
@@ -19,20 +19,20 @@
               </el-form-item>
               <el-form-item label="标题" prop="title" style="width: 100%">
                 <el-input
-                    size="small"
-                    v-model="form.title"
-                    placeholder="请输入..."
-                    clearabel
-                    :maxLength="60"
+                  size="small"
+                  v-model="form.title"
+                  placeholder="请输入..."
+                  clearabel
+                  :maxLength="60"
                 ></el-input>
               </el-form-item>
               <el-form-item label="活动地点" prop="address" style="width: 100%">
                 <el-input
-                    size="small"
-                    v-model="form.address"
-                    placeholder="请输入..."
-                    clearabel
-                    :maxLength="20"
+                  size="small"
+                  v-model="form.address"
+                  placeholder="请输入..."
+                  clearabel
+                  :maxLength="20"
                 ></el-input>
               </el-form-item>
               <el-form-item label="参与名额" prop="total" style="width: 100%">
@@ -42,11 +42,11 @@
               <el-form-item label="活动时间" prop="activeTimeList" style="width: 50%">
                 <el-date-picker size="small" :picker-options="pickerOptions"
                   v-model="form.activeTimeList"
-                  type="daterange"
+                  type="datetimerange"
                   range-separator="至"
                   start-placeholder="开始日期"
                   end-placeholder="结束日期"
-                  format="yyyy-MM-dd"
+                  format="yyyy-MM-dd HH:mm:ss"
                   value-format="yyyy-MM-dd HH:mm:ss">
                 </el-date-picker>
               </el-form-item>
@@ -62,20 +62,20 @@
               </el-form-item>
               <el-form-item label="联系人" prop="contactPerson" style="width: 50%">
                 <el-input
-                    size="small"
-                    v-model="form.contactPerson"
-                    placeholder="请输入..."
-                    clearabel
-                    :maxLength="10"
+                  size="small"
+                  v-model="form.contactPerson"
+                  placeholder="请输入..."
+                  clearabel
+                  :maxLength="10"
                 ></el-input>
               </el-form-item>
               <el-form-item label="联系电话" prop="contactPhone" style="width: 50%">
                 <el-input
-                    size="small"
-                    v-model="form.contactPhone"
-                    placeholder="请输入..."
-                    clearabel
-                    :maxLength="11"
+                  size="small"
+                  v-model="form.contactPhone"
+                  placeholder="请输入..."
+                  clearabel
+                  :maxLength="11"
                 ></el-input>
               </el-form-item>
               <el-form-item label="活动介绍" prop="content" style="width: 100%">
diff --git a/project/pingchang/apps/AppCommunityMember/List.vue b/project/pingchang/apps/AppCommunityMember/List.vue
index 4d016189..3ecc505a 100644
--- a/project/pingchang/apps/AppCommunityMember/List.vue
+++ b/project/pingchang/apps/AppCommunityMember/List.vue
@@ -11,30 +11,30 @@
         </template>
         <template slot="right">
           <el-input
-              v-model="search.con"
-              size="small"
-              placeholder="请输入活动名称或发布地区"
-              clearable
-              @change="search.current=1,getList()"
-              suffix-icon="iconfont iconSearch"/>
+            v-model="search.con"
+            size="small"
+            placeholder="请输入活动名称或发布地区"
+            clearable
+            @change="search.current=1,getList()"
+            suffix-icon="iconfont iconSearch"/>
         </template>
       </ai-search-bar>
       <ai-table
-          :dict="dict"
-          :tableData="tableData"
-          :col-configs="colConfigs"
-          :total="total"
-          v-loading="loading"
-          style="margin-top: 6px;"
-          :current.sync="search.current"
-          :size.sync="search.size"
-          @getList="getList">
+        :dict="dict"
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        v-loading="loading"
+        style="margin-top: 6px;"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @getList="getList">
         <el-table-column slot="activeTime" width="220px" label="活动时间" align="center">
           <template slot-scope="{ row }">
             <div class="table-options">{{row.beginTime.substring(0, 10)}}至{{row.endTime.substring(0, 10)}}</div>
           </template>
         </el-table-column>
-        <el-table-column slot="options" width="220px" fixed="right" label="操作" align="center">
+        <el-table-column slot="options" width="180px" fixed="right" label="操作" align="center">
           <template slot-scope="{ row }">
             <div class="table-options">
               <el-button type="text" @click="toDetail(row.id)">详情</el-button>
diff --git a/project/pingchang/apps/AppCommunityMember/Organization.vue b/project/pingchang/apps/AppCommunityMember/Organization.vue
index e212067e..3cddc0c5 100644
--- a/project/pingchang/apps/AppCommunityMember/Organization.vue
+++ b/project/pingchang/apps/AppCommunityMember/Organization.vue
@@ -177,15 +177,13 @@ export default {
         delete e.children;
         return { ...e, checked: true };
       });
-      this.instance
-        .post("/app/apppartyreportconfig/addOrUpdate", arr)
-        .then((res) => {
-          if (res?.code == 0) {
-            this.$message.success("修改成功");
-            this.searchSysAll();
-            this.editDialog = false;
-          }
-        });
+      this.instance.post("/app/apppartyreportconfig/addOrUpdate", arr).then((res) => {
+        if (res?.code == 0) {
+          this.$message.success("修改成功");
+          this.searchSysAll();
+          this.editDialog = false;
+        }
+      });
     },
     findParent(data, ops) {
       ops = {
@@ -251,12 +249,12 @@ export default {
 
     header {
       width: 100%;
-      height: 32px;
       background: rgba(255, 243, 232, 1);
       border-radius: 4px;
       border: 1px solid rgba(255, 136, 34, 1);
       padding: 8px;
       box-sizing: border-box;
+      overflow: hidden;
 
       .iconfont.iconModal_Warning {
         color: #ff8822;

From 025eb8e865e919ff21f96977718b748359d7a92c Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Thu, 20 Oct 2022 10:07:37 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=E5=9C=A8=E8=81=8C=E5=85=9A=E5=91=98?=
 =?UTF-8?q?=E7=A4=BE=E5=8C=BA=E6=8A=A5=E5=88=B0=20=E6=8A=A5=E5=88=B0?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pingchang/apps/AppCommunityMember/Add.vue |   2 +-
 .../apps/AppCommunityMember/Statistics.vue    | 839 ++++++++++++++++++
 2 files changed, 840 insertions(+), 1 deletion(-)

diff --git a/project/pingchang/apps/AppCommunityMember/Add.vue b/project/pingchang/apps/AppCommunityMember/Add.vue
index 1119d8ef..88ee9b76 100644
--- a/project/pingchang/apps/AppCommunityMember/Add.vue
+++ b/project/pingchang/apps/AppCommunityMember/Add.vue
@@ -79,7 +79,7 @@
                 ></el-input>
               </el-form-item>
               <el-form-item label="活动介绍" prop="content" style="width: 100%">
-                <ai-editor v-model="form.content" :instance="instance"/>
+                <ai-editor v-model="form.content" :instance="instance" @validate="v=>valid=!v"/>
               </el-form-item>
             </div>
           </template>
diff --git a/project/pingchang/apps/AppCommunityMember/Statistics.vue b/project/pingchang/apps/AppCommunityMember/Statistics.vue
index e69de29b..167a4684 100644
--- a/project/pingchang/apps/AppCommunityMember/Statistics.vue
+++ b/project/pingchang/apps/AppCommunityMember/Statistics.vue
@@ -0,0 +1,839 @@
+<template>
+  <section class="Statistics">
+    <div class="left">
+      <header>应报到单位名单</header>
+      <div class="left_tree">
+        <el-input
+          size="small"
+          v-model="filterText"
+          placeholder="请输入单位..."
+          suffix-icon="iconfont iconSearch"
+          clearable
+        ></el-input>
+        <div class="left_cont">
+          <el-tree
+            :data="treeData"
+            :props="defaultProps"
+            ref="tree"
+            node-key="partyOrgId"
+            empty-text="搜索不到相关内容"
+            @node-click="handleNodeClick"
+            :default-expanded-keys="[user.info.organizationId]"
+            :filter-node-method="filterNode"
+            :highlight-current="true"
+            :current-node-key="defaultArr"
+            v-if="treeData.length > 0"
+          >
+          </el-tree>
+          <div v-else class="no-data" style="height: 70%"></div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="top">
+        <header>近12个月学员活动参与情况统计</header>
+        <div class="month" id="month"></div>
+      </div>
+      <div class="middle">
+        <header>
+          <el-date-picker
+            v-model="selectMonth"
+            type="month"
+            @change="typeScale()"
+            size="mini"
+            :clearable="false"
+            value-format="yyyy-MM-dd"
+            placeholder="选择年月"
+          >
+          </el-date-picker>
+        </header>
+        <div class="content">
+          <div class="middle-left">
+            <ul>
+              <li>
+                <p>应报到学员人数</p>
+                <div class="num">
+                  <span>{{ numObj.party_num }}</span>
+                  <span>人</span>
+                </div>
+              </li>
+              <li>
+                <p>本月报名活动人数</p>
+                <div class="num">
+                  <span>{{ numObj.registered_num }}</span>
+                  <span>人</span>
+                </div>
+              </li>
+              <li>
+                <p>实际参与活动人数</p>
+                <div class="num">
+                  <span>{{ numObj.actual_num }}</span>
+                  <span>人</span>
+                </div>
+              </li>
+              <li>
+                <p>活动实际参与率</p>
+                <div class="num">
+                  <span>{{ numObj.proportion }}</span>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <div class="middle-right" id="middle-right"></div>
+        </div>
+      </div>
+      <div class="bottom">
+        <header>
+          <ul>
+            <li
+              v-for="(e, index) in table"
+              :key="index"
+              @click="handleClick(e, index)"
+              :class="{ activeNav: e.id == activeId }"
+            >
+              {{ e.label }}
+            </li>
+            <span ref="border"></span>
+          </ul>
+        </header>
+        <el-row
+          type="flex"
+          justify="space-between"
+          align="middle"
+          style="padding: 8px 16px"
+        >
+          <el-col>
+            <el-date-picker
+              v-model="searchObj.ymd"
+              type="month"
+              @change="(page.current = 1), searchList()"
+              size="small"
+              :clearable="false"
+              value-format="yyyy-MM-01"
+              placeholder="选择年月"
+            >
+            </el-date-picker>
+            <el-button
+              icon="iconfont iconExported"
+              size="mini"
+              style="margin-left: 8px"
+              @click="outPut()"
+              :disabled="!Boolean(tableData.length)"
+              >导出
+            </el-button>
+          </el-col>
+          <el-col style="display: flex; justify-content: space-between">
+            <el-input
+              size="small"
+              v-model="searchObj.name"
+              placeholder="姓名"
+              prefix-icon="iconfont iconSearch"
+              clearable
+              style="width: 220px; margin-right: 4px"
+              @keyup.enter.native="searchList()"
+            />
+            <el-button
+              type="primary"
+              icon="iconfont iconSearch"
+              size="small"
+              @click="searchList()"
+              >查询</el-button
+            >
+            <el-button
+              icon="el-icon-refresh-right"
+              size="small"
+              @click="(searchObj.name = ''), searchList()"
+              >重置</el-button
+            >
+          </el-col>
+        </el-row>
+        <div style="padding: 0 16px; box-sizing: border-box">
+          <el-table
+            :data="tableData"
+            header-cell-class-name="table-header"
+            tooltip-effect="light"
+            row-class-name="table-row"
+            cell-class-name="table-cell"
+            height="260"
+          >
+            <el-table-column
+              prop="name"
+              label="姓名"
+              show-tooltip-when-overflow
+            >
+              <span slot-scope="{ row }">{{ row.name || "-" }}</span>
+            </el-table-column>
+            <el-table-column
+              prop="sex"
+              label="性别"
+              show-tooltip-when-overflow
+              align="center"
+            >
+              <span slot-scope="{ row }">
+                {{ dict.getLabel("sex", row.sex) || "-" }}
+              </span>
+            </el-table-column>
+            <el-table-column
+              prop="partyOrg"
+              label="所属组织"
+              show-tooltip-when-overflow
+            >
+              <span slot-scope="{ row }">{{ row.partyOrg || "-" }}</span>
+            </el-table-column>
+            <el-table-column
+              prop="signupCount"
+              label="报名次数"
+              show-tooltip-when-overflow
+              align="center"
+            >
+              <span slot-scope="{ row }">{{ row.signupCount }}</span>
+            </el-table-column>
+            <el-table-column
+              prop="partakeCount"
+              label="参与次数"
+              show-tooltip-when-overflow
+              align="center"
+            >
+              <span slot-scope="{ row }">{{ row.partakeCount }}</span>
+            </el-table-column>
+            <div slot="empty" class="no-data" style="height: 160px"></div>
+          </el-table>
+        </div>
+        <div class="pagination">
+          <el-pagination
+            background
+            @current-change="
+              (v) => {
+                page.current = v;
+                searchList();
+              }
+            "
+            @size-change="
+              (v) => {
+                page.size = v;
+                page.current = 1;
+                searchList();
+              }
+            "
+            :current-page.sync="page.current"
+            :total="page.total"
+            layout="total,prev, pager, next,sizes, jumper"
+            :page-size="page.size"
+            :page-sizes="[5, 10, 20, 50, 100]"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { mapState } from "vuex"
+import * as echarts from 'echarts'
+
+export default {
+  name: "Statistics",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+  },
+  data() {
+    return {
+      treeData: [],
+      filterText: "",
+      defaultArr: "",
+      partyOrgId: "", //当前选中的id
+      data12: {},
+      selectMonth: "",
+      activeId: "0",
+      numObj: {},
+      searchObj: {
+        name: "",
+        listType: "0",
+        ymd: "",
+      },
+      tableData: [],
+      page: {
+        size: 5,
+        current: 1,
+        total: 0,
+      },
+    };
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+  computed: {
+    ...mapState(["user"]),
+    table() {
+      return [
+        { label: "学员活动记录", id: "0" },
+        { label: "未参与活动名单", id: "1" },
+      ];
+    },
+    defaultProps() {
+      return {
+        children: "children",
+        label: "label",
+      };
+    },
+  },
+  methods: {
+    handleNodeClick(data) {
+      this.partyOrgId = data.partyOrgId;
+      this.activeId = "0";
+      this.searchObj.name = "";
+      this.searchObj.listType = "0";
+      this.$nextTick(() => {
+        this.month12();
+        this.typeScale();
+        this.searchList();
+      });
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 根据登录用户单位查 树形结构
+    searchSysAll() {
+      this.treeData = [];
+      this.instance
+        .post("/app/apppartyreportconfig/party-list", null, {
+          params: { id: this.user.info.organizationId },
+        })
+        .then((res) => {
+          if (res && res.code == 0) {
+            res.data = res.data.map((a) => {
+              if (a.partyMemberCount) {
+                return {
+                  ...a,
+                  label: `${a.partyOrgName}（${a.partyMemberCount}）`,
+                };
+              } else {
+                return { ...a, label: a.partyOrgName };
+              }
+              // ${a.partyOrgName}（${a.partyMemberCount}）
+            });
+            this.treeData = res.data.filter(
+              (e) => e.partyOrgId == this.user.info.organizationId
+            );
+            this.handleNodeClick(this.treeData[0]);
+            this.$nextTick(() => {
+              this.$refs.tree.setCurrentKey(this.treeData[0].partyOrgId);
+            });
+            this.defaultArr = this.treeData[0].partyOrgId;
+            this.treeData.map((t) => this.addChildParty(t, res.data));
+          }
+        });
+    },
+    month12() {
+      this.instance
+        .post("/app/apppartyreport/trend", null, {
+          params: {
+            partyOrgId: this.partyOrgId,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.data12 = res.data;
+            this.showMonth12(res.data);
+          }
+        });
+    },
+    typeScale() {
+      this.instance
+        .post("/app/apppartyreport/type-scale", null, {
+          params: {
+            partyOrgId: this.partyOrgId,
+            ymd: this.selectMonth,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.numObj = res.data;
+            this.showPartyScale();
+          }
+        });
+    },
+    handleClick(e, index) {
+      this.activeId = e.id;
+      this.searchObj.listType = e.id;
+      this.searchObj.name = "";
+      this.page.current = 1;
+      this.page.size = 5;
+      this.searchList();
+      this.$refs.border.style.left = index * 160 + "px";
+    },
+    searchList() {
+      this.instance
+        .post(`/app/apppartyreport/list-signup`, null, {
+          params: {
+            ...this.searchObj,
+            partyOrgId: this.partyOrgId,
+            ...this.page,
+          },
+        })
+        .then((res) => {
+          if (res?.data) {
+            this.tableData = res.data.records;
+            this.page.total = res.data.total;
+          }
+        });
+    },
+    outPut() {
+      this.instance
+        .post("/app/apppartyreport/export-signup", null, {
+          responseType: "blob",
+          params: {
+            partyOrgId: this.partyOrgId,
+            ...this.searchObj,
+          },
+        })
+        .then((res) => {
+          const link = document.createElement("a");
+          let blob = new Blob([res], { type: "application/vnd.ms-excel" });
+          link.style.display = "none";
+          link.href = URL.createObjectURL(blob);
+          let fileName = "";
+          this.activeId == 0
+            ? (fileName = "学员活动记录")
+            : (fileName = "未参与活动名单");
+          link.setAttribute("download", fileName + ".xls");
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+        });
+    },
+    showMonth12(data) {
+      let myChart2 = echarts.init(document.getElementById("month"));
+      let months = [];
+      let arr1 = [];
+      let arr2 = [];
+      let arr3 = [];
+      data.forEach((e) => {
+        months.push(e.cycle);
+        arr1.push(e.partyNum);
+        arr2.push(e.registeredNumrc);
+        arr3.push(e.actualNumrc);
+      });
+      let option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+        },
+        dataset: {
+          source: [
+            ["product", ...months],
+            ["应报到学员人次", ...arr1],
+            ["报名活动人次", ...arr2],
+            ["实际参与活动人次", ...arr3],
+          ],
+        },
+        legend: {
+          data: ["应报到学员人次", "报名活动人次", "实际参与活动人次"],
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          boundaryGap: false,
+          type: "category",
+        },
+        yAxis: { gridIndex: 0 },
+
+        series: [
+          { type: "line", smooth: true, seriesLayoutBy: "row" },
+          { type: "line", smooth: true, seriesLayoutBy: "row" },
+          { type: "line", smooth: true, seriesLayoutBy: "row" },
+        ],
+      };
+
+      myChart2.setOption(option);
+
+      window.onresize = function () {
+        myChart2.resize();
+      };
+    },
+    showPartyScale() {
+      let myChart = echarts.init(document.getElementById("middle-right"));
+      let legendData = [];
+      let seriesData = [];
+      if (JSON.stringify(this.numObj.reportTypeMap) != "[]") {
+        this.numObj.reportTypeMap.forEach((e) => {
+          legendData.push(
+            this.dict.getLabel("partyReportSignupReportType", e.report_type)
+          );
+          seriesData.push({
+            value: e.count,
+            name: this.dict.getLabel(
+              "partyReportSignupReportType",
+              e.report_type
+            ),
+          });
+        });
+      } else {
+        legendData = [
+          "居住地社区报到服务",
+          "单位联系社区报到服务",
+          "其他社区报到服务",
+        ];
+        seriesData = [
+          { value: 0, name: "居住地社区报到服务" },
+          { value: 0, name: "单位联系社区报到服务" },
+          { value: 0, name: "其他社区报到服务" },
+        ];
+      }
+      let option = {
+        backgroundColor: "rgba(249,249,249,1)",
+
+        title: {
+          text: "学员报到类型比例",
+          x: "left",
+        },
+
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        legend: {
+          orient: "vertical",
+          right: 50,
+          top: 70,
+          bottom: 20,
+          width: "auto",
+          data: legendData,
+        },
+        series: [
+          {
+            name: "学员报到类型比例",
+            type: "pie",
+            radius: ["45%", "75%"],
+            center: ["30%", "55%"],
+            avoidLabelOverlap: false,
+            label: {
+              position: "inside",
+              formatter: "{d}%",
+            },
+
+            data: seriesData,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  //自定义颜色
+                  var colorList = [
+                    "#4B87FE",
+                    "#FFAA44",
+                    "#FF4466",
+                    "#FFAA44",
+                    "#2EA222",
+                  ];
+                  return colorList[params.dataIndex];
+                },
+              },
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    },
+    getNowDate() {
+      let mydate = new Date();
+      let mymonth = mydate.getMonth() + 1;
+      mymonth < 10 ? (mymonth = `0${mymonth}`) : mymonth;
+      let year = mydate.getFullYear();
+      return `${year}-${mymonth}-01`;
+    },
+  },
+  mounted() {
+    this.searchSysAll();
+    this.partyOrgId = this.user.info.organizationId;
+    this.dict.load("partyReportSignupReportType", "sex");
+    this.selectMonth = this.getNowDate();
+    this.searchObj.ymd = this.getNowDate();
+    this.$nextTick(() => {
+      this.month12();
+      this.typeScale();
+      this.searchList();
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.Statistics {
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+  overflow: auto;
+  .left {
+    width: 264px;
+    background-color: #fff;
+    border-radius: 4px;
+    height: 1104px;
+    border: 1px solid rgba(216, 220, 227, 1);
+    float: left;
+
+    header {
+      padding: 0 16px;
+      color: #222;
+      height: 40px;
+      line-height: 40px;
+      background: #eeeff1;
+      border-bottom: 1px solid #e5e5e5;
+      font-size: 14px;
+      font-weight: 700;
+      border-radius: 4px 4px 0 0;
+    }
+
+    .left_tree {
+      padding: 8px;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+
+      .left_cont {
+        width: 100%;
+        margin-top: 8px;
+        overflow-y: auto;
+        height: calc(100% - 60px);
+
+        ::v-deep .el-tree {
+          background-color: #fff;
+          width: 600px;
+        }
+
+        .right_btn {
+          width: 96px;
+          background: #fff;
+          border-radius: 2px;
+          font-size: 12px;
+          padding: 4px 0;
+          position: fixed;
+          z-index: 999;
+
+          li {
+            height: 28px;
+            line-height: 28px;
+            cursor: pointer;
+            text-indent: 12px;
+          }
+
+          li:hover {
+            background-color: #eff6ff;
+            color: #5088ff;
+          }
+        }
+      }
+    }
+
+    ::v-deep .el-input__inner {
+      border-radius: 0px;
+    }
+
+    ::v-deep .el-tree-node__children {
+      width: 240px;
+      overflow-x: scroll;
+    }
+  }
+
+  .right {
+    width: calc(100% - 280px);
+    float: right;
+    height: 1104px;
+
+    .top {
+      width: 100%;
+      height: 288px;
+      background-color: #fff;
+      border-radius: 4px;
+
+      header {
+        color: #333333;
+        padding: 0 16px;
+        box-sizing: border-box;
+        height: 47px;
+        font-size: 16px;
+        font-weight: bold;
+        line-height: 47px;
+        background: rgba(255, 255, 255, 1);
+        border-bottom: 1px solid #eee;
+      }
+
+      .month {
+        width: 100%;
+        padding: 16px;
+        box-sizing: border-box;
+        height: calc(100% - 47px);
+      }
+    }
+
+    .middle {
+      width: 100%;
+      height: 320px;
+      margin-top: 16px;
+      background-color: #fff;
+      border-radius: 4px;
+
+      header {
+        padding: 0 16px;
+        box-sizing: border-box;
+        height: 48px;
+        display: flex;
+        align-items: center;
+      }
+
+      .content {
+        width: 100%;
+        padding: 16px;
+        box-sizing: border-box;
+        height: calc(100% - 48px);
+
+        .middle-left {
+          width: 50%;
+          height: 100%;
+          float: left;
+
+          ul {
+            overflow: hidden;
+            width: 95%;
+            height: 100%;
+            display: flex;
+            flex-wrap: wrap;
+
+            li {
+              width: 48%;
+              height: 112px;
+              padding: 8px;
+              box-sizing: border-box;
+              background: rgba(249, 249, 249, 1);
+              border-radius: 2px;
+              margin-bottom: 16px;
+              margin-left: 4%;
+
+              &:nth-of-type(2n - 1) {
+                margin-left: 0;
+              }
+
+              p {
+                color: #333333;
+                font-size: 16px;
+                height: 32px;
+                font-weight: bold;
+              }
+
+              .num {
+                height: 80px;
+                line-height: 60px;
+
+                span:nth-of-type(1) {
+                  color: #2266ff;
+                  font-size: 32px;
+                }
+
+                span:nth-of-type(2) {
+                  font-size: 16px;
+                  color: rgba(153, 153, 153, 1);
+                }
+              }
+            }
+          }
+        }
+
+        .middle-right {
+          width: 50%;
+          height: 100%;
+          float: left;
+          padding: 4px;
+          box-sizing: border-box;
+          background: rgba(249, 249, 249, 1);
+          border-radius: 2px;
+        }
+      }
+    }
+
+    .bottom {
+      width: 100%;
+      height: 464px;
+      margin-top: 16px;
+      background-color: #fff;
+      border-radius: 4px;
+
+      header {
+        width: 100%;
+        height: 56px;
+        padding: 0 16px;
+        box-sizing: border-box;
+        border-bottom: 1px solid rgb(241, 237, 237);
+
+        ul {
+          width: 100%;
+          height: 100%;
+          position: relative;
+
+          li {
+            width: 160px;
+            height: 56px;
+            line-height: 56px;
+            float: left;
+            text-align: center;
+            font-size: 16px;
+            color: #333333;
+            position: relative;
+            transition: opacity 1s;
+            cursor: pointer;
+            opacity: 0.7;
+
+            &:hover {
+              color: rgba(34, 102, 255, 1);
+            }
+          }
+
+          .activeNav {
+            opacity: 1;
+            font-weight: bold;
+            color: rgba(34, 102, 255, 1);
+          }
+
+          span {
+            width: 160px;
+            height: 3px;
+            display: block;
+            background-color: rgba(34, 102, 255, 1);
+            transition: left 0.5s;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+          }
+        }
+      }
+    }
+  }
+
+  ::v-deep .el-col-24 {
+    width: auto;
+  }
+}
+</style>

From cc1dc9173d852b04cf600e5e3529c0adca3c0f82 Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Thu, 20 Oct 2022 11:01:16 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=E6=8A=A5=E5=88=B0=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../apps/AppCommunityMember/Statistics.vue    | 593 ++++++------------
 1 file changed, 203 insertions(+), 390 deletions(-)

diff --git a/project/pingchang/apps/AppCommunityMember/Statistics.vue b/project/pingchang/apps/AppCommunityMember/Statistics.vue
index 167a4684..da7400b3 100644
--- a/project/pingchang/apps/AppCommunityMember/Statistics.vue
+++ b/project/pingchang/apps/AppCommunityMember/Statistics.vue
@@ -1,35 +1,22 @@
 <template>
-  <section class="Statistics">
-    <div class="left">
-      <header>应报到单位名单</header>
-      <div class="left_tree">
-        <el-input
-          size="small"
-          v-model="filterText"
-          placeholder="请输入单位..."
-          suffix-icon="iconfont iconSearch"
-          clearable
-        ></el-input>
-        <div class="left_cont">
-          <el-tree
-            :data="treeData"
-            :props="defaultProps"
-            ref="tree"
-            node-key="partyOrgId"
-            empty-text="搜索不到相关内容"
-            @node-click="handleNodeClick"
-            :default-expanded-keys="[user.info.organizationId]"
-            :filter-node-method="filterNode"
-            :highlight-current="true"
-            :current-node-key="defaultArr"
-            v-if="treeData.length > 0"
-          >
-          </el-tree>
-          <div v-else class="no-data" style="height: 70%"></div>
-        </div>
-      </div>
-    </div>
-    <div class="right">
+  <ai-list class="Statistics">
+    <template #left>
+      <ai-tree-menu
+        title="应报到单位名单"
+        searchPlaceholder="请输入单位..."
+        @search="onSearch"
+      >
+        <ai-party-tree
+          :filter-node-method="filterNode"
+          ref="tree"
+          :instance="instance"
+          :root="user.info.organizationId"
+          :current-node-key="selected.id"
+          @select="handleNodeClick"
+        />
+      </ai-tree-menu>
+    </template>
+    <template slot="content">
       <div class="top">
         <header>近12个月学员活动参与情况统计</header>
         <div class="month" id="month"></div>
@@ -96,13 +83,8 @@
             <span ref="border"></span>
           </ul>
         </header>
-        <el-row
-          type="flex"
-          justify="space-between"
-          align="middle"
-          style="padding: 8px 16px"
-        >
-          <el-col>
+        <ai-search-bar>
+          <template #left>
             <el-date-picker
               v-model="searchObj.ymd"
               type="month"
@@ -121,116 +103,37 @@
               :disabled="!Boolean(tableData.length)"
               >导出
             </el-button>
-          </el-col>
-          <el-col style="display: flex; justify-content: space-between">
+          </template>
+          <template #right>
             <el-input
-              size="small"
               v-model="searchObj.name"
-              placeholder="姓名"
-              prefix-icon="iconfont iconSearch"
+              size="small"
+              placeholder="请输入姓名"
               clearable
-              style="width: 220px; margin-right: 4px"
-              @keyup.enter.native="searchList()"
+              @change="(search.current = 1), searchList()"
+              suffix-icon="iconfont iconSearch"
             />
-            <el-button
-              type="primary"
-              icon="iconfont iconSearch"
-              size="small"
-              @click="searchList()"
-              >查询</el-button
-            >
-            <el-button
-              icon="el-icon-refresh-right"
-              size="small"
-              @click="(searchObj.name = ''), searchList()"
-              >重置</el-button
-            >
-          </el-col>
-        </el-row>
-        <div style="padding: 0 16px; box-sizing: border-box">
-          <el-table
-            :data="tableData"
-            header-cell-class-name="table-header"
-            tooltip-effect="light"
-            row-class-name="table-row"
-            cell-class-name="table-cell"
-            height="260"
-          >
-            <el-table-column
-              prop="name"
-              label="姓名"
-              show-tooltip-when-overflow
-            >
-              <span slot-scope="{ row }">{{ row.name || "-" }}</span>
-            </el-table-column>
-            <el-table-column
-              prop="sex"
-              label="性别"
-              show-tooltip-when-overflow
-              align="center"
-            >
-              <span slot-scope="{ row }">
-                {{ dict.getLabel("sex", row.sex) || "-" }}
-              </span>
-            </el-table-column>
-            <el-table-column
-              prop="partyOrg"
-              label="所属组织"
-              show-tooltip-when-overflow
-            >
-              <span slot-scope="{ row }">{{ row.partyOrg || "-" }}</span>
-            </el-table-column>
-            <el-table-column
-              prop="signupCount"
-              label="报名次数"
-              show-tooltip-when-overflow
-              align="center"
-            >
-              <span slot-scope="{ row }">{{ row.signupCount }}</span>
-            </el-table-column>
-            <el-table-column
-              prop="partakeCount"
-              label="参与次数"
-              show-tooltip-when-overflow
-              align="center"
-            >
-              <span slot-scope="{ row }">{{ row.partakeCount }}</span>
-            </el-table-column>
-            <div slot="empty" class="no-data" style="height: 160px"></div>
-          </el-table>
-        </div>
-        <div class="pagination">
-          <el-pagination
-            background
-            @current-change="
-              (v) => {
-                page.current = v;
-                searchList();
-              }
-            "
-            @size-change="
-              (v) => {
-                page.size = v;
-                page.current = 1;
-                searchList();
-              }
-            "
-            :current-page.sync="page.current"
-            :total="page.total"
-            layout="total,prev, pager, next,sizes, jumper"
-            :page-size="page.size"
-            :page-sizes="[5, 10, 20, 50, 100]"
-          >
-          </el-pagination>
-        </div>
+          </template>
+        </ai-search-bar>
+        <ai-table
+          :dict="dict"
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :total="page.total"
+          style="margin-top: 6px"
+          :current.sync="page.current"
+          :size.sync="page.size"
+          @getList="searchList"
+        >
+        </ai-table>
       </div>
-    </div>
-  </section>
+    </template>
+  </ai-list>
 </template>
 
 <script>
-import { mapState } from "vuex"
-import * as echarts from 'echarts'
+import { mapState } from "vuex";
+import * as echarts from "echarts";
 
 export default {
   name: "Statistics",
@@ -241,7 +144,6 @@ export default {
   },
   data() {
     return {
-      treeData: [],
       filterText: "",
       defaultArr: "",
       partyOrgId: "", //当前选中的id
@@ -260,6 +162,19 @@ export default {
         current: 1,
         total: 0,
       },
+      selected: {},
+      colConfigs: [
+        { prop: "name", label: "姓名", align: "center" },
+        { prop: "sex", label: "性别", align: "center", dict: "sex" },
+        { prop: "partyOrg", label: "所属组织", align: "center" },
+        { prop: "signupCount", label: "报名次数", align: "center", width: 150 },
+        {
+          prop: "partakeCount",
+          label: "参与次数",
+          align: "center",
+          width: 150,
+        },
+      ],
     };
   },
   watch: {
@@ -281,10 +196,14 @@ export default {
         label: "label",
       };
     },
+    orgTree() {
+      return this.$refs.tree?.$refs?.partyTree;
+    },
   },
   methods: {
     handleNodeClick(data) {
-      this.partyOrgId = data.partyOrgId;
+      this.selected = data;
+      this.partyOrgId = data.id;
       this.activeId = "0";
       this.searchObj.name = "";
       this.searchObj.listType = "0";
@@ -296,39 +215,7 @@ export default {
     },
     filterNode(value, data) {
       if (!value) return true;
-      return data.label.indexOf(value) !== -1;
-    },
-    // 根据登录用户单位查 树形结构
-    searchSysAll() {
-      this.treeData = [];
-      this.instance
-        .post("/app/apppartyreportconfig/party-list", null, {
-          params: { id: this.user.info.organizationId },
-        })
-        .then((res) => {
-          if (res && res.code == 0) {
-            res.data = res.data.map((a) => {
-              if (a.partyMemberCount) {
-                return {
-                  ...a,
-                  label: `${a.partyOrgName}（${a.partyMemberCount}）`,
-                };
-              } else {
-                return { ...a, label: a.partyOrgName };
-              }
-              // ${a.partyOrgName}（${a.partyMemberCount}）
-            });
-            this.treeData = res.data.filter(
-              (e) => e.partyOrgId == this.user.info.organizationId
-            );
-            this.handleNodeClick(this.treeData[0]);
-            this.$nextTick(() => {
-              this.$refs.tree.setCurrentKey(this.treeData[0].partyOrgId);
-            });
-            this.defaultArr = this.treeData[0].partyOrgId;
-            this.treeData.map((t) => this.addChildParty(t, res.data));
-          }
-        });
+      return data.name.indexOf(value) !== -1;
     },
     month12() {
       this.instance
@@ -563,9 +450,12 @@ export default {
       let year = mydate.getFullYear();
       return `${year}-${mymonth}-01`;
     },
+
+    onSearch(v) {
+      this.orgTree.filter(v);
+    },
   },
   mounted() {
-    this.searchSysAll();
     this.partyOrgId = this.user.info.organizationId;
     this.dict.load("partyReportSignupReportType", "sex");
     this.selectMonth = this.getNowDate();
@@ -586,247 +476,170 @@ export default {
   padding: 16px;
   box-sizing: border-box;
   overflow: auto;
-  .left {
-    width: 264px;
+
+  .top {
+    width: 100%;
+    height: 288px;
     background-color: #fff;
     border-radius: 4px;
-    height: 1104px;
-    border: 1px solid rgba(216, 220, 227, 1);
-    float: left;
 
     header {
+      color: #333333;
       padding: 0 16px;
-      color: #222;
-      height: 40px;
-      line-height: 40px;
-      background: #eeeff1;
-      border-bottom: 1px solid #e5e5e5;
-      font-size: 14px;
-      font-weight: 700;
-      border-radius: 4px 4px 0 0;
-    }
-
-    .left_tree {
-      padding: 8px;
-      width: 100%;
-      height: 100%;
       box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
-
-      .left_cont {
-        width: 100%;
-        margin-top: 8px;
-        overflow-y: auto;
-        height: calc(100% - 60px);
-
-        ::v-deep .el-tree {
-          background-color: #fff;
-          width: 600px;
-        }
-
-        .right_btn {
-          width: 96px;
-          background: #fff;
-          border-radius: 2px;
-          font-size: 12px;
-          padding: 4px 0;
-          position: fixed;
-          z-index: 999;
-
-          li {
-            height: 28px;
-            line-height: 28px;
-            cursor: pointer;
-            text-indent: 12px;
-          }
-
-          li:hover {
-            background-color: #eff6ff;
-            color: #5088ff;
-          }
-        }
-      }
+      height: 47px;
+      font-size: 16px;
+      font-weight: bold;
+      line-height: 47px;
+      background: rgba(255, 255, 255, 1);
+      border-bottom: 1px solid #eee;
     }
 
-    ::v-deep .el-input__inner {
-      border-radius: 0px;
-    }
-
-    ::v-deep .el-tree-node__children {
-      width: 240px;
-      overflow-x: scroll;
+    .month {
+      width: 100%;
+      padding: 16px;
+      box-sizing: border-box;
+      height: calc(100% - 47px);
     }
   }
 
-  .right {
-    width: calc(100% - 280px);
-    float: right;
-    height: 1104px;
+  .middle {
+    width: 100%;
+    height: 320px;
+    margin-top: 16px;
+    background-color: #fff;
+    border-radius: 4px;
 
-    .top {
-      width: 100%;
-      height: 288px;
-      background-color: #fff;
-      border-radius: 4px;
-
-      header {
-        color: #333333;
-        padding: 0 16px;
-        box-sizing: border-box;
-        height: 47px;
-        font-size: 16px;
-        font-weight: bold;
-        line-height: 47px;
-        background: rgba(255, 255, 255, 1);
-        border-bottom: 1px solid #eee;
-      }
-
-      .month {
-        width: 100%;
-        padding: 16px;
-        box-sizing: border-box;
-        height: calc(100% - 47px);
-      }
+    header {
+      padding: 0 16px;
+      box-sizing: border-box;
+      height: 48px;
+      display: flex;
+      align-items: center;
     }
 
-    .middle {
+    .content {
       width: 100%;
-      height: 320px;
-      margin-top: 16px;
-      background-color: #fff;
-      border-radius: 4px;
+      padding: 16px;
+      box-sizing: border-box;
+      height: calc(100% - 48px);
 
-      header {
-        padding: 0 16px;
-        box-sizing: border-box;
-        height: 48px;
-        display: flex;
-        align-items: center;
-      }
-
-      .content {
-        width: 100%;
-        padding: 16px;
-        box-sizing: border-box;
-        height: calc(100% - 48px);
-
-        .middle-left {
-          width: 50%;
-          height: 100%;
-          float: left;
-
-          ul {
-            overflow: hidden;
-            width: 95%;
-            height: 100%;
-            display: flex;
-            flex-wrap: wrap;
-
-            li {
-              width: 48%;
-              height: 112px;
-              padding: 8px;
-              box-sizing: border-box;
-              background: rgba(249, 249, 249, 1);
-              border-radius: 2px;
-              margin-bottom: 16px;
-              margin-left: 4%;
-
-              &:nth-of-type(2n - 1) {
-                margin-left: 0;
-              }
-
-              p {
-                color: #333333;
-                font-size: 16px;
-                height: 32px;
-                font-weight: bold;
-              }
-
-              .num {
-                height: 80px;
-                line-height: 60px;
-
-                span:nth-of-type(1) {
-                  color: #2266ff;
-                  font-size: 32px;
-                }
-
-                span:nth-of-type(2) {
-                  font-size: 16px;
-                  color: rgba(153, 153, 153, 1);
-                }
-              }
-            }
-          }
-        }
-
-        .middle-right {
-          width: 50%;
-          height: 100%;
-          float: left;
-          padding: 4px;
-          box-sizing: border-box;
-          background: rgba(249, 249, 249, 1);
-          border-radius: 2px;
-        }
-      }
-    }
-
-    .bottom {
-      width: 100%;
-      height: 464px;
-      margin-top: 16px;
-      background-color: #fff;
-      border-radius: 4px;
-
-      header {
-        width: 100%;
-        height: 56px;
-        padding: 0 16px;
-        box-sizing: border-box;
-        border-bottom: 1px solid rgb(241, 237, 237);
+      .middle-left {
+        width: 50%;
+        height: 100%;
+        float: left;
 
         ul {
-          width: 100%;
+          overflow: hidden;
+          width: 95%;
           height: 100%;
-          position: relative;
+          display: flex;
+          flex-wrap: wrap;
 
           li {
-            width: 160px;
-            height: 56px;
-            line-height: 56px;
-            float: left;
-            text-align: center;
-            font-size: 16px;
-            color: #333333;
-            position: relative;
-            transition: opacity 1s;
-            cursor: pointer;
-            opacity: 0.7;
+            width: 48%;
+            height: 112px;
+            padding: 8px;
+            box-sizing: border-box;
+            background: rgba(249, 249, 249, 1);
+            border-radius: 2px;
+            margin-bottom: 16px;
+            margin-left: 4%;
 
-            &:hover {
-              color: rgba(34, 102, 255, 1);
+            &:nth-of-type(2n - 1) {
+              margin-left: 0;
+            }
+
+            p {
+              color: #333333;
+              font-size: 16px;
+              height: 32px;
+              font-weight: bold;
+            }
+
+            .num {
+              height: 80px;
+              line-height: 60px;
+
+              span:nth-of-type(1) {
+                color: #2266ff;
+                font-size: 32px;
+              }
+
+              span:nth-of-type(2) {
+                font-size: 16px;
+                color: rgba(153, 153, 153, 1);
+              }
             }
           }
+        }
+      }
 
-          .activeNav {
-            opacity: 1;
-            font-weight: bold;
+      .middle-right {
+        width: 50%;
+        height: 100%;
+        float: left;
+        padding: 4px;
+        box-sizing: border-box;
+        background: rgba(249, 249, 249, 1);
+        border-radius: 2px;
+      }
+    }
+  }
+
+  .bottom {
+    width: 100%;
+    height: 464px;
+    margin-top: 16px;
+    background-color: #fff;
+    border-radius: 4px;
+
+    header {
+      width: 100%;
+      height: 56px;
+      padding: 0 16px;
+      box-sizing: border-box;
+      border-bottom: 1px solid rgb(241, 237, 237);
+      margin-bottom: 16px;
+
+      ul {
+        width: 100%;
+        height: 100%;
+        position: relative;
+
+        li {
+          width: 160px;
+          height: 56px;
+          line-height: 56px;
+          float: left;
+          text-align: center;
+          font-size: 16px;
+          color: #333333;
+          position: relative;
+          transition: opacity 1s;
+          cursor: pointer;
+          opacity: 0.7;
+
+          &:hover {
             color: rgba(34, 102, 255, 1);
           }
+        }
 
-          span {
-            width: 160px;
-            height: 3px;
-            display: block;
-            background-color: rgba(34, 102, 255, 1);
-            transition: left 0.5s;
-            position: absolute;
-            bottom: 0;
-            left: 0;
-          }
+        .activeNav {
+          opacity: 1;
+          font-weight: bold;
+          color: rgba(34, 102, 255, 1);
+        }
+
+        span {
+          width: 160px;
+          height: 3px;
+          display: block;
+          background-color: rgba(34, 102, 255, 1);
+          transition: left 0.5s;
+          position: absolute;
+          bottom: 0;
+          left: 0;
         }
       }
     }
@@ -836,4 +649,4 @@ export default {
     width: auto;
   }
 }
-</style>
+</style>
\ No newline at end of file

From ec1860cece780f0bd11757d85b35a486fc254abd Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Thu, 20 Oct 2022 15:20:51 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=E8=A1=A8=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hlj/app/AppRatingTask/AppRatingTask.vue   |   70 +
 .../hlj/app/AppRatingTask/components/Add.vue  |   13 +
 .../app/AppRatingTask/components/Detail.vue   |  188 ++
 .../hlj/app/AppRatingTask/components/List.vue |  125 ++
 .../AppScoringTemplate/AppScoringTemplate.vue |   70 +
 .../app/AppScoringTemplate/components/Add.vue | 1567 +++++++++++++++++
 .../AppScoringTemplate/components/Detail.vue  |  188 ++
 .../AppScoringTemplate/components/List.vue    |  133 ++
 .../AppScoringTemplate/components/config.js   |  181 ++
 9 files changed, 2535 insertions(+)
 create mode 100644 project/hlj/app/AppRatingTask/AppRatingTask.vue
 create mode 100644 project/hlj/app/AppRatingTask/components/Add.vue
 create mode 100644 project/hlj/app/AppRatingTask/components/Detail.vue
 create mode 100644 project/hlj/app/AppRatingTask/components/List.vue
 create mode 100644 project/hlj/app/AppScoringTemplate/AppScoringTemplate.vue
 create mode 100644 project/hlj/app/AppScoringTemplate/components/Add.vue
 create mode 100644 project/hlj/app/AppScoringTemplate/components/Detail.vue
 create mode 100644 project/hlj/app/AppScoringTemplate/components/List.vue
 create mode 100644 project/hlj/app/AppScoringTemplate/components/config.js

diff --git a/project/hlj/app/AppRatingTask/AppRatingTask.vue b/project/hlj/app/AppRatingTask/AppRatingTask.vue
new file mode 100644
index 00000000..3d8cbe12
--- /dev/null
+++ b/project/hlj/app/AppRatingTask/AppRatingTask.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="doc-circulation">
+    <keep-alive :include="['List']">
+      <component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+  import Add from './components/Add'
+  import List from './components/List'
+  import Detail from './components/Detail'
+
+  export default {
+    name: 'AppRatingTask',
+    label: '评分任务',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        component: 'List',
+        params: {},
+        include: []
+      }
+    },
+
+    components: {
+      Detail,
+      List,
+      Add
+    },
+
+    methods: {
+      onChange (data) {
+        if (data.type === 'Detail') {
+          this.component = 'Detail'
+          this.params = data.params
+        }
+
+        if (data.type === 'Add') {
+          this.component = 'Add'
+          this.params = data.params
+        }
+
+        if (data.type === 'List') {
+          this.component = 'List'
+          this.params = data.params
+
+          this.$nextTick(() => {
+            if (data.isRefresh) {
+              this.$refs.component.getList()
+            }
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .doc-circulation {
+    height: 100%;
+    background: #F3F6F9;
+    overflow: auto;
+  }
+</style>
diff --git a/project/hlj/app/AppRatingTask/components/Add.vue b/project/hlj/app/AppRatingTask/components/Add.vue
new file mode 100644
index 00000000..3f344d8b
--- /dev/null
+++ b/project/hlj/app/AppRatingTask/components/Add.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
diff --git a/project/hlj/app/AppRatingTask/components/Detail.vue b/project/hlj/app/AppRatingTask/components/Detail.vue
new file mode 100644
index 00000000..ba60b08e
--- /dev/null
+++ b/project/hlj/app/AppRatingTask/components/Detail.vue
@@ -0,0 +1,188 @@
+ <template>
+  <ai-detail isHasSidebar v-loading="isLoading">
+    <template slot="title">
+      <ai-title title="返乡报备详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      </ai-title>
+    </template>
+    <template slot="content">
+      <AiSidebar :tabTitle="tabList" v-model="currIndex"></AiSidebar>
+      <div v-show="currIndex === 0">
+        <ai-card title="基本信息" v-show="currIndex === 0">
+          <template #content>
+            <ai-wrapper
+              label-width="120px">
+              <ai-info-item label="姓名" :value="info.name"></ai-info-item>
+              <ai-info-item label="填报时间" :value="info.createTime"></ai-info-item>
+              <ai-info-item label="身份证号" :value="info.idNumber"></ai-info-item>
+              <ai-info-item label="手机号码" :value="info.phone"></ai-info-item>
+              <ai-info-item label="人员类别" :value="dict.getLabel('EP_registerPersonType', info.type)"></ai-info-item>
+              <ai-info-item label="是否从事高危行业" :value="dict.getLabel('EP_highRiskIndustries', info.highRiskIndustries)"></ai-info-item>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+        <ai-card title="行程信息">
+          <template #content>
+            <ai-wrapper
+              label-width="120px">
+              <ai-info-item label="出发时间" :value="info.startTime"></ai-info-item>
+              <ai-info-item label="出发地" >
+                <span  :style="{color: info.denger == 1 ? '#FF4466' : '#333'}">{{info.startAreaName}} </span>
+              </ai-info-item>
+              <ai-info-item label="出发地详址" isLine :value="info.startAddress"></ai-info-item>
+              <ai-info-item label="出行方式" :value="info.travelTypeNames"></ai-info-item>
+              <ai-info-item label="车次/航班" isLine :value="info.trainNo"></ai-info-item>
+              <ai-info-item label="行程描述" :value="info.description"></ai-info-item>
+              <ai-info-item label="抵平卡口" :value="info.gatewayName"></ai-info-item>
+              <ai-info-item label="抵平时间" :value="info.arriveTime"></ai-info-item>
+              <ai-info-item label="目的地" :value="info.arriveAreaName"></ai-info-item>
+              <ai-info-item label="目的地详址" isLine :value="info.arriveAddress"></ai-info-item>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+        <ai-card title="健康状况">
+          <template #content>
+            <ai-wrapper
+              label-width="120px">
+              <ai-info-item label="是否有风险旅居史" v-if="info.fromHighRiskArea === '1'">
+                <span style="color: red">{{ info.highRiskAreaName }}</span>
+              </ai-info-item>
+              <ai-info-item label="是否有风险旅居史" v-else value="否"></ai-info-item>
+              <ai-info-item label="7天内是否接触新冠确诊或疑似患者">
+                <span :style="{color: info.contactPatients === '1' ? 'red' : ''}">{{ dict.getLabel('yesOrNo', info.contactPatients) }}</span>
+              </ai-info-item>
+              <ai-info-item label="当前健康状况" v-if="info.abnormalHealth === '1'">
+                <span style="color: red">{{ dict.getLabel('EP_abnormalType', info.abnormalType) }}</span>
+              </ai-info-item>
+              <ai-info-item label="当前健康状况" v-else value="否"></ai-info-item>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+      </div>
+      <div v-show="currIndex === 1">
+        <ai-card title="风险处置">
+          <template #right>
+            <el-button type="primary" v-if="info.status === '0'" @click="release">解除异常</el-button>
+          </template>
+          <template #content>
+            <ai-wrapper
+              label-width="120px">
+              <ai-info-item label="姓名" :value="info.name"></ai-info-item>
+              <ai-info-item label="填报时间" :value="info.createTime"></ai-info-item>
+              <ai-info-item label="身份证号" :value="info.idNumber"></ai-info-item>
+              <ai-info-item label="手机号码" :value="info.phone"></ai-info-item>
+              <ai-info-item label="人员类别" :value="dict.getLabel('EP_registerPersonType', info.type)"></ai-info-item>
+              <ai-info-item label="是否从事高危行业" :value="dict.getLabel('EP_highRiskIndustries', info.highRiskIndustries)"></ai-info-item>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+        <ai-card title="风险处理意见">
+          <template #content>
+            <ai-table
+              :isShowPagination="false"
+              tableSize="small"
+              border
+              :tableData="info.riskDisposalList"
+              :col-configs="colConfigs"
+              @getList="() => {}">
+            </ai-table>
+          </template>
+        </ai-card>
+        <ai-card title="社区初排" v-if="info.cmAdvanceDisposal">
+          <template #content>
+            <ai-wrapper
+              style="margin-bottom: 20px;"
+              label-width="120px">
+              <ai-info-item label="处置意见" :value="dict.getLabel('EP_communityHandleType', info.cmAdvanceDisposal.communityHandleType)"></ai-info-item>
+              <ai-info-item v-if="info.cmAdvanceDisposal.communityHandleType === '1'" label="居家状态" :value="dict.getLabel('EP_homeStatus2', info.cmAdvanceDisposal.homeStatus)"></ai-info-item>
+              <ai-info-item v-if="info.cmAdvanceDisposal.communityHandleType === '1'" label="隔离时间" :value="info.cmAdvanceDisposal.quarantineBeginTime + ' - ' + info.cmAdvanceDisposal.quarantineEndTime"></ai-info-item>
+              <ai-info-item v-if="info.cmAdvanceDisposal.communityHandleType === '1'" label="隔离策略" :value="dict.getLabel('EP_quarantineStrategy', info.cmAdvanceDisposal.quarantineStrategy)"></ai-info-item>
+              <ai-info-item v-if="info.cmAdvanceDisposal.communityHandleType === '1'" label="管控方式" :value="dict.getLabel('EP_controlMethod', info.cmAdvanceDisposal.controlMethod)"></ai-info-item>
+              <ai-info-item v-if="info.cmAdvanceDisposal.communityHandleType === '1'" label="图片" isLine>
+                <ai-uploader
+                  :instance="instance"
+                  :value="info.cmAdvanceDisposal.fileList"
+                  disabled
+                  :limit="9">
+                </ai-uploader>
+              </ai-info-item>
+              <ai-info-item v-if="info.cmAdvanceDisposal.communityHandleType === '2'" label="风险解除证明文件" isLine>
+                <ai-uploader
+                  :instance="instance"
+                  :value="info.cmAdvanceDisposal.proveFileList"
+                  disabled
+                  :limit="9">
+                </ai-uploader>
+              </ai-info-item>
+            </ai-wrapper>
+            <ai-empty style="margin-bottom: 60px;" v-if="!info.cmAdvanceDisposal"></ai-empty>
+          </template>
+        </ai-card>
+      </div>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  export default {
+    name: 'Detail',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    data () {
+      return {
+        info: {},
+        isShow: false,
+        currIndex: 0,
+        isLoading: false,
+        tableData: [],
+        colConfigs: [
+          {prop: 'remarks', label: '异常记录', align: 'center' },
+          {prop: 'createTime', label: '创建时间', align: 'center'},
+          {prop: 'createUserName', label: '记录人', align: 'center' }
+        ],
+        tabList: ['基本信息', '风险处置']
+      }
+    },
+
+    created () {
+      this.isLoading = true
+      if (this.params && this.params.id) {
+        this.id = this.params.id
+        this.$dict.load(['EP_registerPersonType', 'EP_communityHandleType', 'EP_highRiskIndustries', 'EP_travelType', 'yesOrNo', 'EP_homeStatus2', 'EP_quarantineStrategy', 'EP_controlMethod', 'EP_abnormalType']).then(() => {
+          this.getInfo(this.params.id)
+        })
+      }
+    },
+
+    methods: {
+      getInfo (id) {
+        this.instance.post(`/app/appepidemicpreventionregisterinfo/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+            this.info.travelTypeNames = res.data.travelType.split(',').map(v => {
+              return this.dict.getLabel('EP_travelType', v)
+            }).join('，')
+          }
+
+          this.isLoading = false
+        }).catch(() => {
+          this.isLoading = false
+        })
+      },
+
+      cancel () {
+        this.$emit('change', {
+          type: 'List',
+          isRefresh: true
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/project/hlj/app/AppRatingTask/components/List.vue b/project/hlj/app/AppRatingTask/components/List.vue
new file mode 100644
index 00000000..d8d5c1f4
--- /dev/null
+++ b/project/hlj/app/AppRatingTask/components/List.vue
@@ -0,0 +1,125 @@
+<template>
+  <ai-list class="list">
+    <ai-title slot="title" title="评分任务" isShowBottomBorder :instance="instance"></ai-title>
+    <template slot="content">
+      <div class="content">
+        <ai-search-bar bottomBorder>
+          <template #left>
+            <el-button type="primary" @click="toAdd">新建评分任务</el-button>
+          </template>
+          <template #right>
+            <el-input
+              v-model="search.name"
+              size="small"
+              placeholder="请输入任务名称"
+              clearable
+              v-throttle="() => {search.current = 1, getList()}"
+              @clear="search.current = 1, search.name = '', getList()"
+              suffix-icon="iconfont iconSearch">
+            </el-input>
+          </template>
+        </ai-search-bar>
+        <ai-table
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :total="total"
+          v-loading="loading"
+          style="margin-top: 16px;"
+          :current.sync="search.current"
+          :size.sync="search.size"
+          @getList="getList">
+          <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
+            <template slot-scope="{ row }">
+              <div class="table-options">
+                <el-button type="text" @click="toDetail(row.id)">详情</el-button>
+                <el-button type="text" @click="remove(row.id)">删除</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </div>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  export default {
+    name: 'List',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          name: ''
+        },
+        colConfigs: [
+          { prop: 'name', label: '任务名称' },
+          { prop: 'phone', align: 'center', label: '创建人' },
+          { prop: 'startTime', align: 'center', label: '更新时间' },
+          { prop: 'startAreaName', align: 'center', label: '任务状态' }
+        ],
+        ids: [],
+        tableData: [],
+        total: 0,
+        loading: false
+      }
+    },
+
+    created () {
+      this.loading = true
+
+      this.dict.load(['EP_riskLevel', 'EP_handleType', 'modeType', 'EP_riskStatus', 'EP_source']).then(() => {
+        this.getList()
+      })
+    },
+
+    methods: {
+      getList () {
+        this.instance.post(`/app/appepidemicpreventionregisterinfo/list`, null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+            this.loading = false
+          } else {
+            this.loading = false
+          }
+        }).catch(() => {
+          this.loading = false
+        })
+      },
+
+      toDetail (id) {
+        this.$emit('change', {
+          type: 'Detail',
+          params: {
+            id: id || ''
+          }
+        })
+      },
+
+      remove(id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appepidemicpreventionregisterinfo/delete?id=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/project/hlj/app/AppScoringTemplate/AppScoringTemplate.vue b/project/hlj/app/AppScoringTemplate/AppScoringTemplate.vue
new file mode 100644
index 00000000..8d144f18
--- /dev/null
+++ b/project/hlj/app/AppScoringTemplate/AppScoringTemplate.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="doc-circulation">
+    <keep-alive :include="['List']">
+      <component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+  import Add from './components/Add'
+  import List from './components/List'
+  import Detail from './components/Detail'
+
+  export default {
+    name: 'AppScoringTemplate',
+    label: '评分模板',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        component: 'List',
+        params: {},
+        include: []
+      }
+    },
+
+    components: {
+      Detail,
+      List,
+      Add
+    },
+
+    methods: {
+      onChange (data) {
+        if (data.type === 'Detail') {
+          this.component = 'Detail'
+          this.params = data.params
+        }
+
+        if (data.type === 'Add') {
+          this.component = 'Add'
+          this.params = data.params
+        }
+
+        if (data.type === 'List') {
+          this.component = 'List'
+          this.params = data.params
+
+          this.$nextTick(() => {
+            if (data.isRefresh) {
+              this.$refs.component.getList()
+            }
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .doc-circulation {
+    height: 100%;
+    background: #F3F6F9;
+    overflow: auto;
+  }
+</style>
diff --git a/project/hlj/app/AppScoringTemplate/components/Add.vue b/project/hlj/app/AppScoringTemplate/components/Add.vue
new file mode 100644
index 00000000..294f13f7
--- /dev/null
+++ b/project/hlj/app/AppScoringTemplate/components/Add.vue
@@ -0,0 +1,1567 @@
+<template>
+  <ai-detail class="form-add">
+    <ai-title :title="pageTitle" slot="title" isShowBack  @onBackClick="cancel(false)">
+      <template #rightBtn>
+        <el-button type="primary" icon="iconfont iconRepulsebeifen" @click="toPublish">保存模板</el-button>
+      </template>
+    </ai-title>
+    <template #content>
+      <el-scrollbar class="left">
+        <div class="left-item" v-for="(component, index) in components" :key="index">
+          <div class="left-item__title">
+            <h2>{{ component.label }}</h2>
+            <span>{{ component.tips }}</span>
+          </div>
+          <div class="left-item__list">
+            <draggable
+              class="components-draggable"
+              :list="component.children"
+              :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
+              :clone="cloneComponent"
+              :sort="false"
+              @end="onEnd">
+              <div class="left-item__item" v-for="(item, i) in component.children" :key="i" @click="clone(item)">
+                <i class="iconfont" :class="item.icon"></i>
+                <span>{{ item.label }}</span>
+              </div>
+            </draggable>
+          </div>
+        </div>
+      </el-scrollbar>
+      <el-scrollbar class="middle">
+        <div class="middle-content">
+          <div class="middle-content__wrapper">
+            <div :class="[activeIndex === -1 ? 'active' : '']" @click="activeIndex = -1">
+              <div class="left-item__item left-item__item--banner" key="banner">
+                <img v-if="form.headPicture.length" :src="form.headPicture[0].url">
+                <div class="config-item__banner" v-else>
+                  <i class="iconfont iconAdd"></i>
+                  <span>添加图片</span>
+                </div>
+              </div>
+              <div class="left-item__item left-item__item--formname" key="title">
+                <h2>{{ form.title }}</h2>
+              </div>
+              <div class="left-item__item left-item__item--text" key="text">
+                <p>{{ form.tableExplain }}</p>
+              </div>
+            </div>
+            <draggable
+              class="middle-draggable"
+              style="height: 100%;"
+              v-model="targetList"
+              :animation="340"
+              scroll
+              element="div"
+              draggable=".components-item"
+              group="componentsGroup"
+              :sort="true">
+              <div
+                class="left-item__item components-item"
+                v-for="(item, i) in targetList"
+                :class="[activeIndex === i ? 'active' : '']"
+                @click="activeIndex = i"
+                :key="i">
+                <div class="left-item__item--remove" title="删除" @click.stop="removeItem(i)">
+                  <i class="iconfont iconDelete"></i>
+                </div>
+                <div class="left-item__item--title">
+                  <i :style="{opacity: item.required ? 1 : 0}">*</i>
+                  <span>{{ i + 1 }}. </span>
+                  <h2>{{ item.label }}</h2>
+                </div>
+                <div class="left-item__item--wrapper">
+                  <template v-if="(item.type === 'radio')" >
+                    <div class="radio-item" v-for="(field, index) in item.options" :key="index" >
+                      <input type="radio" disabled value="" />
+                      <img :src="field.img[0].url" v-if="field.img.length">
+                      <label>{{ field.label }}</label>
+                    </div>
+                  </template>
+                  <template v-if="item.type === 'upload'">
+                    <div class="left-item__item--upload">
+                      <i class="iconfont iconAdd"></i>
+                      <span>添加图片</span>
+                    </div>
+                  </template>
+                  <template v-if="item.type === 'select'" >
+                    <el-select placeholder="请选择" disabled v-model="values" style="width: 100%;">
+                      <el-option
+                        v-for="(item, index) in item.options"
+                        :key="index"
+                        :label="item.label"
+                        :value="item.label">
+                      </el-option>
+                    </el-select>
+                  </template>
+                  <template v-if="(item.type === 'checkbox')" >
+                    <div class="radio-item" v-for="(field, index) in item.options" :key="index" >
+                      <input type="checkbox" disabled value="" />
+                      <img :src="field.img[0].url" v-if="field.img.length">
+                      <label>{{ field.label }}</label>
+                    </div>
+                  </template>
+                  <template v-if="(item.type === 'input')" >
+                    <div class="text-item">
+                      <input :placeholder="item.placeholder" disabled>
+                    </div>
+                  </template>
+                  <template v-if="(item.type === 'textarea')" >
+                    <div class="textarea-item" resize="none">
+                      <textarea :placeholder="item.placeholder" disabled></textarea>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </draggable>
+          </div>
+        </div>
+      </el-scrollbar>
+      <el-scrollbar class="right">
+        <div class="right-item" style="margin-top: 0;">
+          <div class="right-item__maintitle">
+            <h2>{{ currComponentTitle }}</h2>
+          </div>
+        </div>
+        <template v-if="activeIndex === -1">
+          <div class="right-item">
+            <div class="right-item__title no-solid">
+              <h2>头图</h2>
+            </div>
+            <div class="right-item__content right-item__content--banner">
+              <ai-uploader v-model="form.headPicture" :maxSize="2" :limit="1" :isShowTip="false" :instance="instance" @change="onheadPictureChange">
+                <template #trigger>
+                  <div class="config-item__banner" v-if="!form.headPicture.length">
+                    <i class="iconfont iconAdd"></i>
+                    <span>添加图片</span>
+                  </div>
+                </template>
+              </ai-uploader>
+            </div>
+            <div class="right-item__tips">建议上传比例为375 x 235px，且小于10M</div>
+          </div>
+          <div class="right-item">
+            <div class="right-item__title no-solid">
+              <div class="right-item__title--left">
+                <h2>显示头图</h2>
+              </div>
+              <el-switch
+                @change="onHeadImgChange"
+                v-model="form.isShowheadPicture">
+              </el-switch>
+            </div>
+          </div>
+          <div class="right-item">
+            <div class="right-item__title no-solid">
+              <h2>表单名称</h2>
+            </div>
+            <div class="right-item__content">
+              <el-input placeholder="问卷调查" :maxlength="30" show-word-limit v-model="form.title"></el-input>
+            </div>
+          </div>
+          <div class="right-item__group">
+            <div class="right-item">
+              <div class="right-item__title no-solid">
+                <h2>表单说明</h2>
+              </div>
+              <div class="right-item__content">
+                <el-input type="textarea" :rows="5" :maxlength="255" show-word-limit placeholder="问卷调查" v-model="form.tableExplain"></el-input>
+              </div>
+            </div>
+            <div class="right-item">
+              <div class="right-item__title no-solid">
+                <div class="right-item__title--left">
+                  <h2>显示说明</h2>
+                </div>
+                <el-switch
+                  @change="form.tableExplain = ''"
+                  v-model="form.isShowTableExplain">
+                </el-switch>
+              </div>
+            </div>
+          </div>
+          <div class="right-item__group">
+            <div class="right-item">
+              <div class="right-item__title no-solid">
+                <h2>按钮名称</h2>
+              </div>
+              <div class="right-item__content">
+                <el-input placeholder="请输入按钮名称" v-model="form.buttonExplain"></el-input>
+              </div>
+            </div>
+          </div>
+        </template>
+        <div class="right-item" v-if="activeIndex > -1">
+          <div class="right-item__title no-solid">
+            <h2>标题名称</h2>
+          </div>
+          <div class="right-item__content">
+            <el-input placeholder="标题名称" :maxlength="200" show-word-limit v-model="currTarget.label"></el-input>
+          </div>
+        </div>
+        <div class="right-item right-item__select" v-if="currTarget.type === 'radio' || currTarget.type === 'select' || currTarget.type === 'checkbox'">
+          <div class="right-item__title no-solid">
+            <h2>选项设置</h2>
+          </div>
+          <div class="right-item__select--wrapper">
+            <draggable
+              v-model="currTarget.options"
+              :animation="340"
+              group="select"
+              handle=".mover"
+              :sort="true">
+              <div class="select-item" v-for="(item, index) in currTarget.options" :key="index">
+                <i class="iconfont iconjdq_led_show mover" :style="{marginRight: currTarget.type === 'select' ? '10px' : '0'}"></i>
+                <ai-uploader v-model="item.img" :limit="1" :isShowTip="false" :instance="instance" v-if="currTarget.type !== 'select'">
+                  <template #trigger>
+                    <div class="config-item__select" v-show="!item.img.length">
+                      <i class="iconfont iconfangda"></i>
+                    </div>
+                  </template>
+                </ai-uploader>
+                <el-input placeholder="请输入选项名" :maxlength="100" show-word-limit v-model="item.label"></el-input>
+                <i class="iconfont iconDelete" @click="removeOptions(index)"></i>
+              </div>
+            </draggable>
+          </div>
+          <el-button type="text" class="add-select" @click="addOptions">添加选项</el-button>
+        </div>
+        <div class="right-item__group" v-if="activeIndex > -1">
+          <div class="right-item" v-if="currTarget.type === 'input' || currTarget.type === 'textarea'">
+            <div class="right-item__title no-solid">
+              <div class="right-item__title--left">
+                <h2>说明文字</h2>
+              </div>
+            </div>
+            <el-input placeholder="请输入说明文字" v-model="currTarget.placeholder"></el-input>
+          </div>
+          <div class="right-item">
+            <div class="right-item__title no-solid">
+              <div class="right-item__title--left">
+                <h2>是否必填</h2>
+              </div>
+              <el-switch v-model="currTarget.required"></el-switch>
+            </div>
+          </div>
+          <div class="right-item" v-if="currTarget.type !== 'upload'">
+            <div class="right-item__title no-solid">
+              <div class="right-item__title--left">
+                <h2>答案与分值</h2>
+              </div>
+              <el-switch
+                v-model="currTarget.isShowPoints">
+              </el-switch>
+            </div>
+          </div>
+          <template v-if="currTarget.isShowPoints">
+            <div class="right-item" v-if="currTarget.pointType === '0'">
+              <div class="right-item__title no-solid">
+                <h2>正确答案</h2>
+              </div>
+              <div class="right-item__content right-item__content--select-answer">
+                <el-select
+                  style="width: 100%;"
+                  v-if="currTarget.type === 'radio' || currTarget.type === 'select'"
+                  clearable
+                  v-model="currTarget.answer">
+                  <el-option
+                    v-for="(item, index) in currTarget.options"
+                    :key="index"
+                    :label="item.label.length > 60 ? item.label.substr(0, 50) + '...' : item.label"
+                    :value="item.label">
+                  </el-option>
+                </el-select>
+                <el-checkbox-group v-model="currTarget.answer" v-if="currTarget.type === 'checkbox'">
+                  <el-checkbox v-for="(item, index) in currTarget.options" :label="item.label" :key="index">{{ item.label }}</el-checkbox>
+                </el-checkbox-group>
+                <el-input placeholder="正确答案" v-model="currTarget.answer" v-if="currTarget.type === 'input'"></el-input>
+                <el-input placeholder="正确答案" :rows="4" v-model="currTarget.answer" v-if="currTarget.type === 'textarea'"></el-input>
+              </div>
+            </div>
+            <div class="right-item" v-if="currTarget.pointType === '0'">
+              <div class="right-item__title">
+                <h2>本题分值</h2>
+              </div>
+              <div class="right-item__content">
+                <el-input placeholder="分值" @change="onKeyup" v-model="currTarget.points">
+                  <span slot="append">分</span>
+                </el-input>
+              </div>
+            </div>
+            <div class="right-item" v-if="currTarget.type === 'checkbox' || currTarget.type === 'radio' || currTarget.type === 'select'">
+              <div class="right-item__title no-solid">
+                <h2>计分方式</h2>
+              </div>
+              <div class="right-item__content">
+                <el-select
+                  style="width: 100%;"
+                  v-if="currTarget.type === 'checkbox' || currTarget.type === 'radio' || currTarget.type === 'select'"
+                  v-model="currTarget.pointType">
+                  <el-option
+                    v-for="(item, index) in currTarget.pointDict"
+                    :key="index"
+                    :label="item.dictName"
+                    :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+            <div class="right-item" v-if="currTarget.type === 'checkbox' && currTarget.pointType === '2'">
+              <div class="right-item__title no-solid">
+                <h2>答案</h2>
+              </div>
+              <div class="right-item__content">
+                <el-checkbox-group
+                  v-model="currTarget.answer">
+                  <div class="right-item__select--item" v-for="(item, index) in currTarget.options" :key="index">
+                    <el-checkbox :label="item.label" :key="index"></el-checkbox>
+                    <el-input placeholder="分值" @change="e => onSelcetKeyup(e, index)" v-model="item.point">
+                      <span slot="suffix">分</span>
+                    </el-input>
+                  </div>
+                  <div class="right-item__select--item">
+                    <span style="padding-left: 23px;">全部答对</span>
+                    <el-input placeholder="分值" @change="onKeyup" v-model="currTarget.points">
+                      <span slot="suffix">分</span>
+                    </el-input>
+                  </div>
+                </el-checkbox-group>
+              </div>
+            </div>
+            <div class="right-item" v-if="(currTarget.type === 'checkbox' || currTarget.type === 'radio' || currTarget.type === 'select') && currTarget.pointType === '1'">
+              <div class="right-item__title">
+                <div class="right-item__title--left">
+                  <h2>各选项分值</h2>
+                  <i>（如需扣分请设置负分）</i>
+                </div>
+              </div>
+              <div class="right-item__content">
+                <div class="right-item__select--item" v-for="(item, index) in currTarget.options" :key="index">
+                  <span>{{ item.label }}</span>
+                  <el-input placeholder="分值" v-model="item.point" @change="e => onSelcetKeyup(e, index)">
+                    <span slot="suffix">分</span>
+                  </el-input>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </el-scrollbar>
+      <ai-dialog
+        :visible.sync="isShowAdd"
+        width="800px"
+        customFooter
+        title="发布">
+        <el-form label-position="top" class="publish" ref="form" label-width="120px" :model="form">
+          <div class="form-item__wrapper">
+            <div class="form-title">
+              <h2>基本信息</h2>
+            </div>
+            <div class="form-field">
+              <i>*</i>
+              <h2>截止时间</h2>
+              <span>（表单截止后，用户打开表单会提示此表单已结束）</span>
+            </div>
+            <div class="form-item__container">
+              <el-radio-group v-model="form.periodValidityType">
+                <el-radio label="0">永久有效</el-radio>
+                <el-radio label="1">自定义时间</el-radio>
+              </el-radio-group>
+            </div>
+            <div class="form-item__container" v-if="form.periodValidityType === '1'">
+              <el-date-picker
+                v-model="form.periodValidityEndTime"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                type="datetime"
+                size="small"
+                :picker-options="pickerOptions"
+                placeholder="截止时间">
+              </el-date-picker>
+            </div>
+            <div class="form-field">
+              <i>*</i>
+              <h2>匹配客户方式</h2>
+              <span>（将参与活动的微信客户和企业微信客户匹配）</span>
+            </div>
+            <div class="form-item__container">
+              <el-radio-group v-model="form.wechatId">
+                <el-radio label="0">客户微信ID匹配</el-radio>
+              </el-radio-group>
+            </div>
+          </div>
+          <div class="form-item__wrapper">
+            <div class="form-title">
+              <h2>提交次数限制</h2>
+              <span>此功能发布后不可修改</span>
+            </div>
+            <div class="form-field">
+              <i>*</i>
+              <h2>提交次数</h2>
+            </div>
+            <div class="form-item__container">
+              <el-radio-group v-model="form.commitType">
+                <el-radio label="0">不限次数</el-radio>
+                <el-radio label="1">限提交一次</el-radio>
+              </el-radio-group>
+            </div>
+          </div>
+        </el-form>
+        <template #footer>
+          <el-button @click="isShowAdd = false">返回</el-button>
+          <el-button type="primary" @click="onConfirm(1)">完成并发布</el-button>
+        </template>
+      </ai-dialog>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  import draggable from 'vuedraggable'
+  import { components } from './config'
+
+  export default {
+    name: 'add',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object,
+      type: String,
+      areaId: String
+    },
+
+    components: {
+      draggable
+    },
+
+    data () {
+      return {
+        isShowAdd: false,
+        components: components,
+        targetList: [],
+        form: {
+          tableExplain: '详细描述',
+          title: '问卷调查',
+          isShowheadPicture: true,
+          isShowTableExplain: true,
+          isShowBtn: true,
+          headPicture: [],
+          commitType: '1',
+          periodValidityType: '0',
+          actionNotice: '1',
+          dynamicNotice: '1',
+          periodValidityEndTime: '',
+          shareStatus: '0',
+          count: 0,
+          wechatId: '0',
+          type: 0,
+          buttonExplain: '提交',
+          tips: true
+        },
+        successInfo: {},
+        date: [],
+        values: '',
+        activeIndex: -1,
+        pickerOptions: {
+          disabledDate (time) {
+            return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
+          }
+        }
+      }
+    },
+
+    computed: {
+      currTarget () {
+        if (this.activeIndex >= 0) {
+          return this.targetList[this.activeIndex]
+        }
+
+        return {}
+      },
+
+      pageTitle () {
+        let typeName = '新增'
+        let itemName = '问卷调查'
+
+        if (this.params.id) {
+          typeName = '编辑'
+        }
+
+        if (this.params.type == 0) {
+          itemName = '问卷调查'
+        }
+
+        if (this.params.type == 1) {
+          itemName = '考试测评'
+        }
+
+        if (this.params.type == 2) {
+          itemName = '报名登记'
+        }
+
+        if (this.params.type == 3) {
+          itemName = '满意调查'
+        }
+
+        if (this.params.type == 4) {
+          itemName = '投票评选'
+        }
+
+        return `${typeName}${itemName}`
+      },
+
+      currComponentTitle () {
+        if (this.activeIndex >= 0) {
+          return this.targetList[this.activeIndex].fixedLabel + '设置'
+        }
+
+        return '表单设置'
+      }
+    },
+
+    mounted () {
+      if (this.params && this.params.id) {
+        this.getInfo(this.params.id)
+      } else {
+        this.init()
+      }
+
+      window.addEventListener('keydown', this.bindEvent)
+    },
+
+    destroyed () {
+      window.removeEventListener('keydown', this.bindEvent)
+    },
+
+    methods: {
+      onHeadImgChange (e) {
+        if (!e) {
+          this.form.headPicture = []
+        }
+      },
+
+      onheadPictureChange (e) {
+        this.form.isShowheadPicture = !!e.length;
+      },
+
+      init () {
+        if (this.params.type == 0) {
+          this.form.headPicture = [{
+            url: 'https://cdn.cunwuyun.cn/dvcp/h5/form/interview.png'
+          }]
+        }
+        if (this.params.type == 1) {
+          this.form.title = '考试测评'
+          this.form.headPicture = [{
+            url: 'https://cdn.cunwuyun.cn/dvcp/h5/form/exam.png'
+          }]
+        }
+        if (this.params.type == 2) {
+          this.form.title = '报名登记'
+          this.form.headPicture = [{
+            url: 'https://cdn.cunwuyun.cn/dvcp/h5/form/apply.png'
+          }]
+        }
+        if (this.params.type == 3) {
+          this.form.title = '满意调查'
+          this.form.headPicture = [{
+            url: 'https://cdn.cunwuyun.cn/dvcp/h5/form/satisfaction.png'
+          }]
+        }
+        if (this.params.type == 4) {
+          this.form.title = '投票评选'
+          this.form.headPicture = [{
+            url: 'https://cdn.cunwuyun.cn/dvcp/h5/form/vote.png'
+          }]
+        }
+      },
+
+      downloadImg (url) {
+        let image = new Image()
+        image.setAttribute('crossOrigin', 'anonymous')
+        image.onload = function() {
+          let canvas = document.createElement('canvas')
+          canvas.width = image.width
+          canvas.height = image.height
+          let context = canvas.getContext('2d')
+          context.drawImage(image, 0, 0, image.width, image.height)
+          let url = canvas.toDataURL("image/png")
+          let a = document.createElement("a")
+          let event = new MouseEvent("click")
+          a.download = name || 'photo'
+          a.href = url
+          a.dispatchEvent(event)
+        }
+        image.src = url
+      },
+
+      onKeyup (e) {
+        this.$set(this.currTarget, 'points', e.replace(/[^\d]/g, ''))
+      },
+
+      onSelcetKeyup (e, index) {
+        console.log(e, index)
+        this.$set(this.currTarget.options[index], 'point', e.replace(/[^\d]/g, ''))
+      },
+
+      toPublish () {
+        for (let item of this.targetList) {
+          if (item.isShowPoints) {
+            if (item.pointType === '0') {
+              if (!item.answer || JSON.stringify(item.answer) === '[]') {
+                return this.$message.error(`请输入${item.label}正确答案`)
+              }
+
+              if (!item.points) {
+                return this.$message.error(`请输入${item.label}的分值`)
+              }
+            }
+
+            if (item.pointType === '1') {
+              for (let option of item.options) {
+                if (!option.point) {
+                  return this.$message.error(`请输入${item.label}${option.label}的分值`)
+                }
+              }
+            }
+
+            if (item.pointType === '2') {
+              for (let option of item.options) {
+                if (!option.point) {
+                  return this.$message.error(`请输入${item.label}${option.label}的分值`)
+                }
+              }
+
+              if (!item.points) {
+                return this.$message.error(`请输入${item.label}全部答对分值`)
+              }
+            }
+          }
+        }
+        if (this.params.templateType != 1) {
+          this.isShowAdd = true
+        } else {
+          const fields = this.targetList.map(item => {
+            return {
+              fieldType: item.type,
+              fieldName: item.label,
+              fieldInfo: JSON.stringify(item)
+            }
+          })
+
+          this.instance.post(`/app/appquestionnairetemplate/addOrUpdate`, {
+            ...this.form,
+            fields,
+            status: 0,
+            areaId: this.params.templateType == 0 ? this.areaId : '',
+            id: this.params.id,
+            headPicture: this.form.headPicture.length ? this.form.headPicture[0].url : '',
+            type: this.params.type,
+            templateType: this.params.templateType
+          }).then(res => {
+            if (res.code == 0) {
+              this.$message.success('提交成功')
+
+              setTimeout(() => {
+                this.cancel()
+              }, 600)
+            }
+          })
+        }
+      },
+
+      bindEvent (e) {
+        if (this.activeIndex === -1) return
+
+        if ((e.code === 'Backspace' || e.code === 'Delete') && e.target.nodeName === 'BODY' && this.activeIndex >= 0) {
+          this.targetList.splice(this.activeIndex, 1)
+
+          this.activeIndex = -1
+        }
+      },
+
+      removeItem (index) {
+        this.activeIndex = -1
+        this.targetList.splice(index, 1)
+      },
+
+      getInfo (id) {
+        this.instance.post(`/app/appquestionnairetemplate/queryDetailById?id=${id}`).then(res => {
+          if (res.code == 0) {
+            this.form = {
+              ...res.data,
+              headPicture: res.data.headPicture ? [{
+                url: res.data.headPicture
+              }] : []
+            }
+
+            this.form.isShowheadPicture = !!res.data.headPicture
+            this.form.isShowTableExplain = !!res.data.tableExplain
+
+            this.targetList = res.data.fields.map(item => {
+              return JSON.parse(item.fieldInfo)
+            })
+          }
+        })
+      },
+
+      onConfirm (status) {
+        if (this.params.templateType == 1) {
+          // this.submitTemp()
+        }
+
+        if (this.form.periodValidityType === '1') {
+          if (!this.form.periodValidityEndTime) {
+            return this.$message.error('请选择截止时间')
+          }
+
+          if (new Date(this.form.periodValidityEndTime).getTime() < Date.now()) {
+            return this.$message.error('截止时间不能晚于当前时间')
+          }
+        }
+
+        const fields = this.targetList.map(item => {
+          return {
+            fieldType: item.type,
+            fieldName: item.label,
+            fieldInfo: JSON.stringify(item)
+          }
+        })
+
+        this.instance.post(`/app/appquestionnairetemplate/addOrUpdate`, {
+          ...this.form,
+          fields,
+          areaId: this.areaId,
+          status: status,
+          id: this.params.isQuote ? '' : this.params.id,
+          headPicture: this.form.headPicture.length ? this.form.headPicture[0].url : '',
+          type: this.params.type,
+          templateType: this.params.templateType,
+          periodValidityEndTime: this.form.periodValidityType === '1' ? this.form.periodValidityEndTime : ''
+        }).then(res => {
+          if (res.code == 0) {
+            if (this.params.isQuote) {
+              this.instance.post(`/app/appquestionnairetemplate/quoteCount?id=${this.params.id}`)
+            }
+            this.$message.success('提交成功')
+
+            if (status === 0) {
+              return this.cancel()
+            }
+
+            this.successInfo = res.data
+
+            this.$nextTick(() => {
+              this.cancel(true)
+            })
+          }
+        })
+      },
+
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'List',
+          isRefresh: !!isRefresh
+        })
+      },
+
+      addOptions () {
+        const len = this.targetList[this.activeIndex].options.length
+        let label = `选项${len + 1}`
+
+        const index= this.targetList[this.activeIndex].options.findIndex(v => label === v.label)
+        if (index > -1) {
+          label = `新选项${len + 1}`
+        }
+
+        this.targetList[this.activeIndex].options.push({
+          label: label,
+          value: '',
+          point: '',
+          img: []
+        })
+      },
+
+      removeOptions (index) {
+        const len = this.targetList[this.activeIndex].options.length
+        const label = this.targetList[this.activeIndex].options[index].label
+
+        if (len === 2) {
+          return this.$message.error('选项不能少于2个')
+        }
+
+        if (this.targetList[this.activeIndex].type === 'checkbox') {
+          const answerIndex = this.targetList[this.activeIndex].answer.indexOf(label)
+          if (answerIndex > -1) {
+            this.targetList[this.activeIndex].answer.splice(answerIndex, 1)
+          }
+        } else {
+          if (label === this.targetList[this.activeIndex].answer) {
+            this.targetList[this.activeIndex].answer = ''
+          }
+        }
+
+        this.targetList[this.activeIndex].options.splice(index, 1)
+      },
+
+      onEnd () {
+        this.$nextTick(() => {
+          this.activeIndex = this.targetList.length - 1
+        })
+      },
+
+      clone (e) {
+        this.targetList.push(JSON.parse(JSON.stringify(e)))
+
+        this.$nextTick(() => {
+          this.activeIndex = this.targetList.length - 1
+        })
+      },
+
+      cloneComponent (e) {
+        return JSON.parse(JSON.stringify(e))
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .form-add {
+    background: #fff!important;
+
+    .right-item__maintitle {
+      height: 62px;
+      line-height: 62px;
+      margin-bottom: 20px;
+      border-bottom: 1px solid #EEEEEE;
+      color: #222222;
+
+      h2 {
+        font-size: 14px;
+      }
+    }
+
+    .right-item__content--select-answer {
+      ::v-deep .el-checkbox {
+        display: flex!important;
+        align-items: center;
+        margin-right: 0;
+      }
+
+      ::v-deep .el-checkbox__label {
+        flex: 1;
+        color: #222;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .left-item__item--banner {
+      img {
+        width: 100%;
+        height: 235px;
+      }
+
+      .config-item__banner {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        width: 100%;
+        height: 235px;
+        line-height: 1;
+        border: 1px dashed #bbb;
+
+        span {
+          margin-top: 4px;
+          color: #555555;
+          font-size: 14px;
+        }
+
+        i {
+          font-size: 30px;
+          color: #8899bb;
+        }
+      }
+    }
+
+    .left-item__item--formname {
+      margin: 16px 0 32px;
+      padding: 0 12px;
+      color: #333333;
+      font-size: 15px;
+      font-weight: normal;
+      text-align: center;
+      word-break: break-all;
+    }
+
+    .left-item__item--text {
+      line-height: 20px;
+      // margin-bottom: 48px;
+      padding: 0 12px 20px;
+      text-align: justify;
+      color: #666;
+      font-size: 14px;
+      word-break: break-all;
+    }
+
+    ::v-deep .ai-detail__content {
+      height: calc(100% - 52px)!important;
+      padding: 0!important;
+      overflow: hidden!important;
+    }
+
+    .ai-dialog__success {
+      ::v-deep .ai-dialog__content {
+        max-height: initial!important;
+      }
+    }
+
+    .middle-draggable {
+      & > span {
+        display: block;
+        width: 100%;
+        height: 100%;
+        min-height: 600px;
+        padding-bottom: 20px;
+      }
+
+      .components-item {
+        position: relative;
+        // margin-bottom: 32px;
+        padding: 16px 16px;
+        cursor: move;
+
+        &::after {
+          position: absolute;
+          left: 0;
+          top: 0;
+          z-index: 1111;
+          width: 100%;
+          height: 100%;
+          content: ' ';
+        }
+
+        .left-item__item--remove {
+          display: flex;
+          position: absolute;
+          align-items: center;
+          justify-content: center;
+          right: -30px;
+          top: 50%;
+          width: 30px;
+          height: 30px;
+          background: #fff;
+          cursor: pointer;
+          transform: translateY(-50%);
+        }
+
+        &:hover {
+          background: #f6f7ff;
+        }
+
+        &.active {
+          background: #f6f7ff;
+        }
+
+        .left-item__item--upload {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          width: 120px;
+          height: 120px;
+          border-radius: 6px;
+          border: 1px dashed #bbb;
+
+          i {
+            font-size: 24px;
+            color: #8899bb;
+          }
+
+          span {
+            margin-top: 4px;
+            font-size: 12px;
+            color: #555;
+          }
+        }
+
+        .text-item {
+          input {
+            display: block;
+            width: 100%;
+            height: 40px;
+            border: none;
+            border-bottom: 1px solid #ddd;
+
+            &:focus {
+              outline: none;
+            }
+
+            &:disabled {
+              background: #fff;
+            }
+          }
+        }
+
+        .textarea-item {
+          textarea {
+            width: 100%;
+            height: 120px;
+            resize: none;
+            border: 1px solid #ddd;
+            padding: 10px;
+
+            &:focus {
+              outline: none;
+            }
+
+            &:disabled {
+              background: #fff;
+            }
+          }
+        }
+
+        .radio-item {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          label {
+            flex: 1;
+            margin-left: 10px;
+            word-break: break-all;
+          }
+
+          img {
+            margin-left: 10px;
+          }
+        }
+      }
+
+      .left-item__item--title {
+        display: flex;
+        margin-bottom: 10px;
+
+        i {
+          position: relative;
+          top: 2px;
+          margin-right: 5px;
+          color: #E22120;
+        }
+
+        span {
+          position: relative;
+          top: 2px;
+        }
+
+        h2 {
+          color: #333333;
+          font-size: 15px;
+        }
+      }
+    }
+    .middle-content {
+      width: 375px;
+      margin: 0 auto;
+      padding: 80px 0;
+
+      .middle-content__wrapper {
+        min-height: 800px;
+        background: #fff;
+
+        & > div {
+          &.active {
+            background: #f6f7ff;
+          }
+        }
+
+        .radio-item {
+          img {
+            width: 40px;
+            height: 40px;
+          }
+        }
+      }
+    }
+
+    div {
+      box-sizing: border-box;
+    }
+
+    .right-item__select--wrapper {
+      .select-item {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    ::v-deep .ai-detail__title {
+      margin: 0!important;
+      margin-bottom: 4px!important;
+      padding: 0 20px;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+    }
+
+    ::v-deep .ai-detail__content--wrapper {
+      display: flex;
+      max-width: 100%!important;
+      height: 100%!important;
+      padding: 0!important;
+      background: #F5F6F9;
+    }
+
+    .middle {
+      flex: 1;
+      height: 100%;
+
+      ::v-deep .el-scrollbar__view {
+        height: 100%;
+      }
+    }
+
+    .add-select {
+      height: auto;
+      line-height: 1;
+      margin: 10px 0 0 26px;
+      padding: 0;
+    }
+
+    .right-item__select--wrapper {
+
+      ::v-deep .el-upload--picture-card {
+        // display: none;
+        width: 100%;
+        height: 100%;
+        line-height: 1;
+      }
+
+      ::v-deep .uploader {
+        background: #FFFFFF;
+        border-radius: 4px;
+        margin: 0 10px;
+        width: 40px;
+        height: 40px;
+
+        .el-upload-list__item-preview {
+          display: none;
+        }
+
+        .el-upload-list--picture-card .el-upload-list__item-actions span + span {
+          margin-left: 0;
+        }
+
+        .uploader-item__icon {
+          display: none;
+        }
+
+        .el-upload-list__item {
+          margin: 0;
+        }
+
+        .uploader-item {
+          width: 40px!important;
+          height: 40px!important;
+          overflow: hidden;
+        }
+      }
+
+      .select-item {
+        margin-bottom: 10px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        i {
+          color: #8c9dbd;
+        }
+
+        .mover {
+          cursor: move;
+        }
+
+        .iconDelete {
+          cursor: pointer;
+          margin-left: 10px;
+        }
+      }
+
+      ::v-deep .el-upload-list__item {
+        width: 40px!important;
+        height: 40px!important;
+        object-fit: cover;
+      }
+
+      .config-item__select {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border: 1px solid #D0D4DC;
+
+        &:hover {
+          opacity: 0.7;
+        }
+
+        i {
+          font-size: 18px;
+        }
+      }
+    }
+
+    .right-item__content--banner {
+      height: 183px;
+      padding: 10px;
+      background: #F3F6F9;
+      border-radius: 4px;
+
+      ::v-deep .el-upload--picture-card {
+        width: 100%;
+        height: 100%;
+        line-height: 1;
+      }
+
+      ::v-deep .uploader {
+        width: 260px;
+        height: 163px;
+        overflow: hidden;
+
+        .el-row--flex {
+          width: 100%;
+          height: 100%;
+        }
+      .config-item__select {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border: 1px solid #D0D4DC;
+
+        &:hover {
+          opacity: 0.7;
+        }
+
+        i {
+          font-size: 18px;
+        }
+      }
+
+        .el-upload-list__item {
+          width: 260px!important;
+          height: 163px!important;
+        }
+
+        .config-item__banner {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          width: 260px;
+          height: 163px;
+          line-height: 1;
+          background: #fff;
+
+          span {
+            margin-top: 4px;
+            color: #555555;
+            font-size: 12px;
+          }
+
+          i {
+            color: #8899bb;
+          }
+        }
+      }
+
+      .config-item__banner {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        width: 260px;
+        height: 163px;
+        line-height: 1;
+        background: #fff;
+
+        span {
+          margin-top: 4px;
+          color: #555555;
+          font-size: 12px;
+        }
+
+        i {
+          color: #8899bb;
+        }
+      }
+    }
+
+    .right-item__select--item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 60px;
+      border-bottom: 1px solid #EEEEEE;
+
+      span {
+        width: 170px;
+        font-size: 14px;
+        color: #222;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      ::v-deep .el-checkbox {
+        display: flex!important;
+        align-items: center;
+        margin-bottom: 0!important;
+      }
+
+      ::v-deep .el-checkbox__label {
+        max-width: 140px;
+        color: #222;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      ::v-deep .el-input {
+        width: 100px;
+
+        .el-input__suffix {
+          display: flex;
+          align-items: center;
+          right: 10px;
+          color: #222222;
+        }
+      }
+    }
+
+    .right {
+      width: 320px;
+      height: 100%;
+      overflow: hidden;
+      background: #FFFFFF;
+
+      .el-checkbox {
+        display: block;
+        margin-bottom: 10px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .right-item {
+        margin-top: 20px;
+        padding: 0 20px;
+
+        .right-item__tips {
+          margin-top: 10px;
+          color: #888888;
+          font-size: 12px;
+        }
+      }
+
+      .right-item__title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        .right-item__title--left {
+          display: flex;
+          align-items: center;
+
+          i {
+            color: #888888;
+            font-size: 12px;
+            font-style: normal;
+          }
+        }
+
+        h2 {
+          color: #222222;
+          font-size: 14px;
+        }
+      }
+    }
+
+    .left {
+      width: 280px;
+      height: 100%;
+      overflow: hidden;
+      background: #FFFFFF;
+
+      .left-item {
+        padding: 0 20px;
+
+        &:last-child {
+          padding-bottom: 20px;
+        }
+
+        .left-item__title {
+          display: flex;
+          align-items: baseline;
+          margin-bottom: 20px;
+
+          h2 {
+            color: #222222;
+            font-size: 14px;
+            font-weight: 700;
+          }
+
+          span {
+            color: #888888;
+            font-size: 12px;
+          }
+        }
+
+        .left-item__item {
+          display: flex;
+          align-items: center;
+          height: 40px;
+          margin-bottom: 10px;
+          padding: 0 13px;
+          background: #FFFFFF;
+          border-radius: 2px;
+          color: #222222;
+          font-size: 12px;
+          border: 1px solid #E4E8EF;
+          cursor: move;
+
+          &:hover {
+            border: 1px dashed #2367ff;
+            color: #2367ff;
+
+            i {
+              color: #2367ff;
+            }
+          }
+
+          i {
+            margin-right: 13px;
+            font-size: 14px;
+            color: #8899BB;
+          }
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      .left-item {
+        margin-top: 20px;
+      }
+    }
+
+    .publish {
+      .tips {
+        display: flex;
+        align-items: center;
+        height: 36px;
+        margin-bottom: 20px;
+        padding: 0 12px;
+        background: #E8EFFF;
+        border-radius: 2px;
+
+        i {
+          margin-right: 2px;
+          color: #2367ff;
+          font-size: 16px;
+        }
+
+        h2 {
+          font-size: 12px;
+          color: #222222;
+        }
+      }
+
+      .form-item__wrapper {
+        padding-left: 24px;
+
+        .checkbox {
+          display: flex;
+          align-items: center;
+          margin-left: 9px;
+
+          &:first-child {
+            margin-bottom: 32px;
+          }
+
+          span {
+            color: #888888;
+            font-size: 14px;
+          }
+        }
+
+        .form-title {
+          display: flex;
+          align-items: center;
+          margin-bottom: 16px;
+
+          span {
+            margin-left: 16px;
+            color: #888888;
+            font-size: 14px;
+          }
+
+          h2 {
+            position: relative;
+            padding-left: 8px;
+            font-size: 16px;
+            font-weight: 700;
+            color: #222222;
+
+            &::after {
+              position: absolute;
+              left: 0;
+              top: 50%;
+              z-index: 1;
+              width: 3px;
+              height: 16px;
+              background: #2266FF;
+              content: ' ';
+              transform: translateY(-50%);
+            }
+          }
+        }
+
+        .form-item__container {
+          margin-left: 9px;
+          margin-bottom: 24px;
+        }
+
+        .form-field {
+          display: flex;
+          align-items: center;
+          margin-bottom: 16px;
+
+          i {
+            margin-right: 4px;
+            color: #FF4466;
+            font-size: 14px;
+          }
+          h2 {
+            color: #222222;
+            font-size: 14px;
+          }
+
+          span {
+            color: #888888;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/project/hlj/app/AppScoringTemplate/components/Detail.vue b/project/hlj/app/AppScoringTemplate/components/Detail.vue
new file mode 100644
index 00000000..ba60b08e
--- /dev/null
+++ b/project/hlj/app/AppScoringTemplate/components/Detail.vue
@@ -0,0 +1,188 @@
+ <template>
+  <ai-detail isHasSidebar v-loading="isLoading">
+    <template slot="title">
+      <ai-title title="返乡报备详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      </ai-title>
+    </template>
+    <template slot="content">
+      <AiSidebar :tabTitle="tabList" v-model="currIndex"></AiSidebar>
+      <div v-show="currIndex === 0">
+        <ai-card title="基本信息" v-show="currIndex === 0">
+          <template #content>
+            <ai-wrapper
+              label-width="120px">
+              <ai-info-item label="姓名" :value="info.name"></ai-info-item>
+              <ai-info-item label="填报时间" :value="info.createTime"></ai-info-item>
+              <ai-info-item label="身份证号" :value="info.idNumber"></ai-info-item>
+              <ai-info-item label="手机号码" :value="info.phone"></ai-info-item>
+              <ai-info-item label="人员类别" :value="dict.getLabel('EP_registerPersonType', info.type)"></ai-info-item>
+              <ai-info-item label="是否从事高危行业" :value="dict.getLabel('EP_highRiskIndustries', info.highRiskIndustries)"></ai-info-item>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+        <ai-card title="行程信息">
+          <template #content>
+            <ai-wrapper
+              label-width="120px">
+              <ai-info-item label="出发时间" :value="info.startTime"></ai-info-item>
+              <ai-info-item label="出发地" >
+                <span  :style="{color: info.denger == 1 ? '#FF4466' : '#333'}">{{info.startAreaName}} </span>
+              </ai-info-item>
+              <ai-info-item label="出发地详址" isLine :value="info.startAddress"></ai-info-item>
+              <ai-info-item label="出行方式" :value="info.travelTypeNames"></ai-info-item>
+              <ai-info-item label="车次/航班" isLine :value="info.trainNo"></ai-info-item>
+              <ai-info-item label="行程描述" :value="info.description"></ai-info-item>
+              <ai-info-item label="抵平卡口" :value="info.gatewayName"></ai-info-item>
+              <ai-info-item label="抵平时间" :value="info.arriveTime"></ai-info-item>
+              <ai-info-item label="目的地" :value="info.arriveAreaName"></ai-info-item>
+              <ai-info-item label="目的地详址" isLine :value="info.arriveAddress"></ai-info-item>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+        <ai-card title="健康状况">
+          <template #content>
+            <ai-wrapper
+              label-width="120px">
+              <ai-info-item label="是否有风险旅居史" v-if="info.fromHighRiskArea === '1'">
+                <span style="color: red">{{ info.highRiskAreaName }}</span>
+              </ai-info-item>
+              <ai-info-item label="是否有风险旅居史" v-else value="否"></ai-info-item>
+              <ai-info-item label="7天内是否接触新冠确诊或疑似患者">
+                <span :style="{color: info.contactPatients === '1' ? 'red' : ''}">{{ dict.getLabel('yesOrNo', info.contactPatients) }}</span>
+              </ai-info-item>
+              <ai-info-item label="当前健康状况" v-if="info.abnormalHealth === '1'">
+                <span style="color: red">{{ dict.getLabel('EP_abnormalType', info.abnormalType) }}</span>
+              </ai-info-item>
+              <ai-info-item label="当前健康状况" v-else value="否"></ai-info-item>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+      </div>
+      <div v-show="currIndex === 1">
+        <ai-card title="风险处置">
+          <template #right>
+            <el-button type="primary" v-if="info.status === '0'" @click="release">解除异常</el-button>
+          </template>
+          <template #content>
+            <ai-wrapper
+              label-width="120px">
+              <ai-info-item label="姓名" :value="info.name"></ai-info-item>
+              <ai-info-item label="填报时间" :value="info.createTime"></ai-info-item>
+              <ai-info-item label="身份证号" :value="info.idNumber"></ai-info-item>
+              <ai-info-item label="手机号码" :value="info.phone"></ai-info-item>
+              <ai-info-item label="人员类别" :value="dict.getLabel('EP_registerPersonType', info.type)"></ai-info-item>
+              <ai-info-item label="是否从事高危行业" :value="dict.getLabel('EP_highRiskIndustries', info.highRiskIndustries)"></ai-info-item>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+        <ai-card title="风险处理意见">
+          <template #content>
+            <ai-table
+              :isShowPagination="false"
+              tableSize="small"
+              border
+              :tableData="info.riskDisposalList"
+              :col-configs="colConfigs"
+              @getList="() => {}">
+            </ai-table>
+          </template>
+        </ai-card>
+        <ai-card title="社区初排" v-if="info.cmAdvanceDisposal">
+          <template #content>
+            <ai-wrapper
+              style="margin-bottom: 20px;"
+              label-width="120px">
+              <ai-info-item label="处置意见" :value="dict.getLabel('EP_communityHandleType', info.cmAdvanceDisposal.communityHandleType)"></ai-info-item>
+              <ai-info-item v-if="info.cmAdvanceDisposal.communityHandleType === '1'" label="居家状态" :value="dict.getLabel('EP_homeStatus2', info.cmAdvanceDisposal.homeStatus)"></ai-info-item>
+              <ai-info-item v-if="info.cmAdvanceDisposal.communityHandleType === '1'" label="隔离时间" :value="info.cmAdvanceDisposal.quarantineBeginTime + ' - ' + info.cmAdvanceDisposal.quarantineEndTime"></ai-info-item>
+              <ai-info-item v-if="info.cmAdvanceDisposal.communityHandleType === '1'" label="隔离策略" :value="dict.getLabel('EP_quarantineStrategy', info.cmAdvanceDisposal.quarantineStrategy)"></ai-info-item>
+              <ai-info-item v-if="info.cmAdvanceDisposal.communityHandleType === '1'" label="管控方式" :value="dict.getLabel('EP_controlMethod', info.cmAdvanceDisposal.controlMethod)"></ai-info-item>
+              <ai-info-item v-if="info.cmAdvanceDisposal.communityHandleType === '1'" label="图片" isLine>
+                <ai-uploader
+                  :instance="instance"
+                  :value="info.cmAdvanceDisposal.fileList"
+                  disabled
+                  :limit="9">
+                </ai-uploader>
+              </ai-info-item>
+              <ai-info-item v-if="info.cmAdvanceDisposal.communityHandleType === '2'" label="风险解除证明文件" isLine>
+                <ai-uploader
+                  :instance="instance"
+                  :value="info.cmAdvanceDisposal.proveFileList"
+                  disabled
+                  :limit="9">
+                </ai-uploader>
+              </ai-info-item>
+            </ai-wrapper>
+            <ai-empty style="margin-bottom: 60px;" v-if="!info.cmAdvanceDisposal"></ai-empty>
+          </template>
+        </ai-card>
+      </div>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  export default {
+    name: 'Detail',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    data () {
+      return {
+        info: {},
+        isShow: false,
+        currIndex: 0,
+        isLoading: false,
+        tableData: [],
+        colConfigs: [
+          {prop: 'remarks', label: '异常记录', align: 'center' },
+          {prop: 'createTime', label: '创建时间', align: 'center'},
+          {prop: 'createUserName', label: '记录人', align: 'center' }
+        ],
+        tabList: ['基本信息', '风险处置']
+      }
+    },
+
+    created () {
+      this.isLoading = true
+      if (this.params && this.params.id) {
+        this.id = this.params.id
+        this.$dict.load(['EP_registerPersonType', 'EP_communityHandleType', 'EP_highRiskIndustries', 'EP_travelType', 'yesOrNo', 'EP_homeStatus2', 'EP_quarantineStrategy', 'EP_controlMethod', 'EP_abnormalType']).then(() => {
+          this.getInfo(this.params.id)
+        })
+      }
+    },
+
+    methods: {
+      getInfo (id) {
+        this.instance.post(`/app/appepidemicpreventionregisterinfo/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+            this.info.travelTypeNames = res.data.travelType.split(',').map(v => {
+              return this.dict.getLabel('EP_travelType', v)
+            }).join('，')
+          }
+
+          this.isLoading = false
+        }).catch(() => {
+          this.isLoading = false
+        })
+      },
+
+      cancel () {
+        this.$emit('change', {
+          type: 'List',
+          isRefresh: true
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/project/hlj/app/AppScoringTemplate/components/List.vue b/project/hlj/app/AppScoringTemplate/components/List.vue
new file mode 100644
index 00000000..4a785b75
--- /dev/null
+++ b/project/hlj/app/AppScoringTemplate/components/List.vue
@@ -0,0 +1,133 @@
+<template>
+  <ai-list class="list">
+    <ai-title slot="title" title="评分模板" isShowBottomBorder :instance="instance"></ai-title>
+    <template slot="content">
+      <div class="content">
+        <ai-search-bar bottomBorder>
+          <template #left>
+            <el-button type="primary" @click="toAdd">新建模板</el-button>
+          </template>
+          <template #right>
+            <el-input
+              v-model="search.name"
+              size="small"
+              placeholder="请输入姓名、手机号"
+              clearable
+              v-throttle="() => {search.current = 1, getList()}"
+              @clear="search.current = 1, search.name = '', getList()"
+              suffix-icon="iconfont iconSearch">
+            </el-input>
+          </template>
+        </ai-search-bar>
+        <ai-table
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :total="total"
+          v-loading="loading"
+          style="margin-top: 16px;"
+          :current.sync="search.current"
+          :size.sync="search.size"
+          @getList="getList">
+          <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
+            <template slot-scope="{ row }">
+              <div class="table-options">
+                <el-button type="text" @click="toDetail(row.id)">详情</el-button>
+                <el-button type="text" @click="remove(row.id)">删除</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </div>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  export default {
+    name: 'List',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        search: {
+          current: 1,
+          size: 10,
+          name: ''
+        },
+        colConfigs: [
+          { prop: 'name', label: '模板名称' },
+          { prop: 'phone', align: 'center', label: '创建人' },
+          { prop: 'startTime', align: 'center', label: '更新时间' }
+        ],
+        ids: [],
+        tableData: [],
+        total: 0,
+        loading: false
+      }
+    },
+
+    created () {
+      this.loading = true
+
+      this.dict.load(['EP_riskLevel', 'EP_handleType', 'modeType', 'EP_riskStatus', 'EP_source']).then(() => {
+        this.getList()
+      })
+    },
+
+    methods: {
+      getList () {
+        this.instance.post(`/app/appepidemicpreventionregisterinfo/list`, null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+            this.loading = false
+          } else {
+            this.loading = false
+          }
+        }).catch(() => {
+          this.loading = false
+        })
+      },
+
+      toDetail (id) {
+        this.$emit('change', {
+          type: 'Detail',
+          params: {
+            id: id || ''
+          }
+        })
+      },
+
+      toAdd (id) {
+        this.$emit('change', {
+          type: 'Add',
+          params: {
+            id: id || ''
+          }
+        })
+      },
+
+      remove(id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appepidemicpreventionregisterinfo/delete?id=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/project/hlj/app/AppScoringTemplate/components/config.js b/project/hlj/app/AppScoringTemplate/components/config.js
new file mode 100644
index 00000000..9df7bb3b
--- /dev/null
+++ b/project/hlj/app/AppScoringTemplate/components/config.js
@@ -0,0 +1,181 @@
+export const components = [
+	{
+		type: 'options',
+		tips: '（可重复添加）',
+		label: '选项',
+		children: [
+			{
+				type: 'radio',
+				label: '单选',
+				fixedLabel: '单选',
+				value: '',
+				points: '',
+				icon: 'iconradio',
+				isShowPoints: false,
+				required: true,
+				hasAnswer: false,
+				answer: '',
+				pointType: '0',
+				pointDict: [
+					{
+						dictName: '此题有唯一答案和分值',
+						dictValue: '0'
+					},
+					{
+						dictName: '每个选项都有对应分值',
+						dictValue: '1'
+					}
+				],
+				options: [
+					{
+						label: '选项1',
+						value: '',
+						point: '',
+						img: []
+					},
+					{
+						label: '选项2',
+						value: '',
+						point: '',
+						img: []
+					}
+				],
+				title: ''
+			},
+			{
+				type: 'checkbox',
+				label: '多选',
+				fixedLabel: '多选',
+				points: '',
+				icon: 'iconcheck_box',
+				isShowPoints: false,
+				required: true,
+				hasAnswer: false,
+				answer: [],
+				value: [],
+				pointType: '0',
+				pointDict: [
+					{
+						dictName: '此题有唯一答案和分值',
+						dictValue: '0'
+					},
+					{
+						dictName: '每个选项都有对应分值',
+						dictValue: '1'
+					},
+					{
+						dictName: '答对几项得几分，答错不得分',
+						dictValue: '2'
+					}
+				],
+				options: [
+					{
+						label: '选项1',
+						value: '',
+						point: '',
+						img: []
+					},
+					{
+						label: '选项2',
+						point: '',
+						value: '',
+						img: []
+					}
+				],
+				title: ''
+			},
+			{
+				type: 'select',
+				label: '单下拉框',
+				fixedLabel: '单下拉框',
+				value: '',
+				points: '',
+				icon: 'iconSelect',
+				isShowPoints: false,
+				required: true,
+				hasAnswer: false,
+				answer: '',
+				pointType: '0',
+				pointDict: [
+					{
+						dictName: '此题有唯一答案和分值',
+						dictValue: '0'
+					},
+					{
+						dictName: '每个选项都有对应分值',
+						dictValue: '1'
+					}
+				],
+				options: [
+					{
+						label: '选项1',
+						value: '',
+						point: '',
+						img: []
+					},
+					{
+						label: '选项2',
+						value: '',
+						point: '',
+						img: []
+					}
+				],
+				title: ''
+			}
+		]
+	},
+	{
+		type: 'input',
+		tips: '（可重复添加）',
+		label: '填空',
+		children: [
+			{
+				type: 'input',
+				label: '单行填空',
+				fixedLabel: '单行填空',
+				value: '',
+				pointType: '0',
+				icon: 'icontext_box',
+				isShowPoints: false,
+				points: '',
+				required: true,
+				hasAnswer: false,
+				placeholder: '请输入...',
+				answer: ''
+			},
+			{
+				type: 'textarea',
+				label: '多行填空',
+				fixedLabel: '多行填空',
+				pointType: '0',
+				icon: 'icontext_area',
+				points: '',
+				isShowPoints: false,
+				required: true,
+				hasAnswer: false,
+				answer: '',
+				placeholder: '请输入...',
+				value: ''
+			}
+		]
+	},
+	{
+		type: 'annex',
+		tips: '（可重复添加）',
+		label: '附件',
+		children: [
+			{
+				type: 'upload',
+				label: '上传图片',
+				fixedLabel: '上传图片',
+				value: '',
+				icon: 'iconpic',
+				isShowPoints: false,
+				points: '',
+				required: true,
+				hasAnswer: false,
+				answer: ''
+			}
+		]
+	}
+];