From fc017fcc5a504f10bce862a7f583001e8ceaa2fe Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Mon, 5 Dec 2022 17:45:38 +0800
Subject: [PATCH] =?UTF-8?q?=E8=80=83=E6=A0=B8=E8=AF=84=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/AppFormTemplate/AppFormTemplate.vue   |   69 +
 .../app/AppFormTemplate/components/Add.vue    | 1371 +++++++++++++++++
 .../app/AppFormTemplate/components/List.vue   |  158 ++
 .../app/AppFormTemplate/components/config.js  |  202 +++
 vue.config.js                                 |    2 +-
 5 files changed, 1801 insertions(+), 1 deletion(-)
 create mode 100644 project/hlj/app/AppFormTemplate/AppFormTemplate.vue
 create mode 100644 project/hlj/app/AppFormTemplate/components/Add.vue
 create mode 100644 project/hlj/app/AppFormTemplate/components/List.vue
 create mode 100644 project/hlj/app/AppFormTemplate/components/config.js

diff --git a/project/hlj/app/AppFormTemplate/AppFormTemplate.vue b/project/hlj/app/AppFormTemplate/AppFormTemplate.vue
new file mode 100644
index 00000000..eb8aa223
--- /dev/null
+++ b/project/hlj/app/AppFormTemplate/AppFormTemplate.vue
@@ -0,0 +1,69 @@
+<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'
+
+  export default {
+    name: 'AppScoringTemplate',
+    label: '评分模板',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        component: 'List',
+        params: {},
+        include: []
+      }
+    },
+
+    components: {
+      List,
+      Add
+    },
+
+    mounted () {
+      if (this.$route.query.isAdd === '1') {
+        this.component = 'Add'
+      }
+    },
+
+    methods: {
+      onChange (data) {
+        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/AppFormTemplate/components/Add.vue b/project/hlj/app/AppFormTemplate/components/Add.vue
new file mode 100644
index 00000000..3eb7f1f6
--- /dev/null
+++ b/project/hlj/app/AppFormTemplate/components/Add.vue
@@ -0,0 +1,1371 @@
+<template>
+  <ai-detail class="form-add">
+    <ai-title title="问卷表单" 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" v-if="form.isShowTableExplain">
+                <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>
+                <p>{{ item.describe }}</p>
+                <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
+                  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" 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.describe"></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>
+    </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 {
+        components: components,
+        targetList: [],
+        form: {
+          tableExplain: '详细描述',
+          title: '问卷调查',
+          isShowheadPicture: true,
+          isShowTableExplain: true,
+          isShowBtn: true,
+          headPicture: [],
+          count: 0,
+          wechatId: '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 {}
+      },
+
+      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 () {
+        this.form.headPicture = [{
+          url: 'https://cdn.cunwuyun.cn/dvcp/h5/form/interview.png'
+        }]
+      },
+
+      onKeyup (e) {
+        this.$set(this.currTarget, 'points', e.replace(/[^\d]/g, ''))
+      },
+
+      onSelcetKeyup (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}全部答对分值`)
+              }
+            }
+          }
+        }
+
+        const fields = this.targetList.map(item => {
+          return {
+            fieldType: item.type,
+            fieldName: item.label,
+            fieldInfo: JSON.stringify(item)
+          }
+        })
+
+        this.instance.post(`/app/appassessmentscoretemplate/addOrUpdate`, {
+          ...this.form,
+          fields,
+          id: this.params.id,
+          status: 1,
+          headPicture: this.form.headPicture.length ? this.form.headPicture[0].url : ''
+        }).then(res => {
+          if (res.code == 0) {
+            this.$message.success('提交成功')
+
+            setTimeout(() => {
+              this.cancel(true)
+            }, 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/appassessmentscoretemplate/queryDetailById?id=${id}`).then(res => {
+          if (res.code == 0) {
+            this.form = {
+              ...res.data,
+              headPicture: res.data.headPicture ? [{
+                url: res.data.headPicture
+              }] : [],
+              isShowheadPicture: !!res.data.headPicture,
+              isShowTableExplain: !!res.data.tableExplain
+            }
+
+            this.targetList = res.data.fields.map(item => {
+              return JSON.parse(item.fieldInfo)
+            })
+          }
+        })
+      },
+
+      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 0;
+      padding: 0 12px 32px;
+      color: #333333;
+      font-size: 15px;
+      font-weight: normal;
+      text-align: center;
+      word-break: break-all;
+    }
+
+    .left-item__item--text {
+      line-height: 20px;
+      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: ' ';
+        }
+
+        & > p {
+          margin: 0 0 12px 12px;
+          color: #888;
+          font-size: 14px;
+        }
+
+        .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/AppFormTemplate/components/List.vue b/project/hlj/app/AppFormTemplate/components/List.vue
new file mode 100644
index 00000000..e788f37d
--- /dev/null
+++ b/project/hlj/app/AppFormTemplate/components/List.vue
@@ -0,0 +1,158 @@
+<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.title"
+              size="small"
+              placeholder="请输入模板名称"
+              clearable
+              v-throttle="() => {search.current = 1, getList()}"
+              @clear="search.current = 1, search.title = '', 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="changeStatus(row.id, row.status)">{{ row.status === '0' ? '启用' : '停用' }}</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,
+          title: ''
+        },
+        colConfigs: [
+          { prop: 'title', label: '模板名称' },
+          { prop: 'createUserName', align: 'center', label: '创建人' },
+          { prop: 'updateTime', align: 'center', label: '更新时间' }
+        ],
+        ids: [],
+        tableData: [],
+        total: 0,
+        loading: false,
+        filedList: []
+      }
+    },
+
+    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/appassessmentscorev2template/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
+        })
+      },
+
+      unique (arr) {
+        return arr.filter((item, index) => {
+          return arr.indexOf(item, 0) === index && !!item
+        })
+      },
+
+      toDetail (id) {
+        this.instance.post(`/app/appassessmentscorev2template/queryDetailById?id=${id}`).then(res => {
+          if (res.code == 0) {
+            this.filedList = res.data.tableFieldInfos.filter(v => {
+              return v.inputType === '0' || v.inputType === '1'
+            })
+
+            let groups1 = this.unique(this.filedList.map(v => v.groupLevel1Name))
+            let groups2 = this.unique(this.filedList.map(v => v.groupLevel2Name))
+
+            console.log(groups1, groups2)
+          }
+        })
+      },
+
+      toAdd (id) {
+        this.$emit('change', {
+          type: 'Add',
+          params: {
+            id: id || ''
+          }
+        })
+      },
+
+      changeStatus (id, status) {
+        this.$confirm(`确定${status === '0' ? '启用' : '停用'}该数据？`).then(() => {
+          this.instance.post(`/app/appassessmentscoretemplate/stopRelease?id=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success(`${status === '0' ? '启用' : '停用'}成功！`)
+              this.getList()
+            }
+          })
+        })
+      },
+
+      remove(id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appassessmentscoretemplate/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/AppFormTemplate/components/config.js b/project/hlj/app/AppFormTemplate/components/config.js
new file mode 100644
index 00000000..ca7ca496
--- /dev/null
+++ b/project/hlj/app/AppFormTemplate/components/config.js
@@ -0,0 +1,202 @@
+export const components = [
+	{
+		type: 'options',
+		tips: '（可重复添加）',
+		label: '选项',
+		children: [
+			{
+				type: 'radio',
+				label: '单选',
+				fixedLabel: '单选',
+				value: '',
+				points: '',
+				describe: '',
+				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: '多选',
+				describe: '',
+				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: '',
+				describe: '',
+				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: '单行填空',
+				describe: '',
+				fixedLabel: '单行填空',
+				value: '',
+				pointType: '0',
+				icon: 'icontext_box',
+				isShowPoints: false,
+				points: '',
+				required: true,
+				hasAnswer: false,
+				placeholder: '请输入...',
+				answer: ''
+			},
+			{
+				type: 'textarea',
+				label: '多行填空',
+				describe: '',
+				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: '上传图片',
+				describe: '',
+				value: '',
+				icon: 'iconpic',
+				isShowPoints: false,
+				points: '',
+				required: true,
+				hasAnswer: false,
+				answer: ''
+			}
+		]
+	},
+	{
+		type: 'layout',
+		tips: '（可重复添加）',
+		label: '分组',
+		children: [
+			{
+				type: 'group',
+				label: '卡片',
+				fixedLabel: '卡片',
+				icon: 'iconpic',
+				groupName: '分组标题',
+				column: []
+			}
+		]
+	}
+]
diff --git a/vue.config.js b/vue.config.js
index 565fcd69..159e475a 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -57,7 +57,7 @@ module.exports = {
     proxy: {
       //设置代理,可解决跨5
       '/lan': {
-        target: 'http://192.168.1.87:9000',
+        target: 'http://192.168.1.105:19000',
         changeOrigin: true,
         pathRewrite: {
           //地址重写