json配置

src/api/trainService/index.js

@@ -187,3 +187,12 @@ export function delSign(id) {
     method: 'delete',
   })
 }
+
+// 师资班配置json
+export function setJson(data) {
+  return request({
+    url: '/train/trainClass/editData',
+    method: 'post',
+    data,
+  })
+}

src/components/jsonTool/index.vue

@@ -1,48 +1,25 @@
 <template>
-    <div style="width: 100%; margin-top: 30px">
+    <div style="width: 100%">
+        <el-button type="primary" style="margin-bottom: 10px" size="small" @click="formatCode">格式化JSON</el-button>
+
         <b-code-editor
             v-model="jsonData"
             :auto-format="true"
             :smart-indent="true"
             theme="dracula"
             :indent-unit="4"
-            :line-wrap="false"
+            :line-wrap="true"
             ref="editor"
         ></b-code-editor>
         <br />
-        <!-- <el-button type="primary" @click="onSubumit">提交</el-button> -->
     </div>
 </template>
  
 <script>
 export default {
-    props: {
-        jsonData: {
-            type: String,
-            default: `[
-                {
-                    "name": "姓名",
-                    "key": "name",
-                    "type": "input",
-                    "value": ""
-                },
-                {
-                    "title": "在校职务",
-                    "key": "title",
-                    "type": "input",
-                    "value": ""
-                },
-                {
-                    "mobile": "手机号",
-                    "key": "mobile",
-                    "type": "input",
-                    "value": ""
-                }
-            ]`,
-        },
-    },
     data() {
         return {
+            jsonData: '',
         }
     },
     methods: {
@@ -68,11 +45,21 @@ export default {
                 this.$message.error(`json格式错误`)
                 return false
             }
-            this.$message.success('json格式正确')
+            console.log(JSON.parse(this.jsonData))
+            return true
+        },
+        formatCode() {
+            this.$refs.editor.formatCode()
         },
     },
 }
 </script>
  
 <style>
+.bin-json-editor {
+    height: 500px !important;
+}
+.CodeMirror {
+    height: 500px !important;
+}
 </style>

src/views/trainService/signlist.vue

@@ -83,7 +83,7 @@
             </el-table-column>
             <el-table-column label="是否限制人数" align="center" prop="limitApply">
                 <template slot-scope="scope">
-                    {{ scope.row.limitApply == 1 ? '是': '否' }}
+                    {{ scope.row.limitApply == 1 ? '是' : '否' }}
                 </template>
             </el-table-column>
             <el-table-column label="已报名/总人数" align="center" prop="classSize">
@@ -103,8 +103,11 @@
                     <span v-if="scope.row.status == 5">已结束</span>
                 </template>
             </el-table-column>
-            <el-table-column label="操作" align="center">
+            <el-table-column label="操作" align="center" width="200">
                 <template slot-scope="scope">
+                    <el-button size="mini" type="text" v-if="scope.row.classType == 3" @click="setSignTab(scope.row)"
+                        >配置报名表</el-button
+                    >
                     <el-button size="mini" type="text" @click="modify(scope.row)">修改</el-button>
                     <el-button size="mini" type="text" @click="delrow(scope.row)">删除</el-button>
                 </template>
@@ -237,7 +240,6 @@
                     />
                 </el-form-item>
                 <!-- 编辑json -->
-                <JsonTool ref="jsontool" v-if="form.classType == 3"/>
 
                 <el-form-item style="padding-left: 170px">
                     <el-button
@@ -281,7 +283,21 @@
                 @pagination="getStudentList"
             />
         </el-dialog>
-
+        <!-- json弹层 -->
+        <el-dialog
+            title="报名表配置"
+            :visible.sync="signTable"
+            :close-on-click-modal="false"
+            width="800px"
+            append-to-body
+        >
+            <JsonTool ref="jsontool" />
+            <div>例：name为标题；type为类型(input输入框;radio单选框;textarea文本域)；key为标题标识须一致；value为单选框选项</div>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="jsoncancle">取 消</el-button>
+                <el-button type="primary" @click="jsonsubmit">确 定</el-button>
+            </span>
+        </el-dialog>
     </div>
 </template>
 <script>
@@ -293,6 +309,7 @@ import {
     delSignUp,
     searchNum,
     listTeacherAll,
+    setJson,
 } from '@/api/trainService/index.js'
 import ImageUpload from '@/components/ImgUpload/index.vue'
 import NonimageUpload from '@/views/components/NonimageUpload'
@@ -350,12 +367,48 @@ export default {
             studentList: [],
             studentOpen: false,
             activeR: {},
+            // Json
+            signTable: false,
+            activeRowId: '',
         }
     },
 
     mounted() {},
     methods: {
         // json
+        setSignTab(row) {
+            this.signTable = true
+            this.activeRowId = row.trainClassId
+            if (row.data) {
+                this.$nextTick(() => {
+                    if (row.data) {
+                        this.$refs.jsontool.jsonData = row.data
+                    } else {
+                        this.$refs.jsontool.jsonData =
+                            '[{"name":"姓名","type":"input","key":"name","value":""},{"title":"在校职务","type":"input","key":"title","value":""},{"mobile":"手机号","type":"input","key":"mobile","value":""},{"college":"院校全称","type":"input","key":"college","value":""},{"address":"院校所在地址","type":"input","key":"address","value":""},{"payType":"培训付款方式","type":"radio","key":"payType","value":["公对公转账，请于报到前提供截图","现场支付（公务卡、微信、支付宝、现金）"]},{"sex":"性别","type":"radio","key":"sex","value":["男","女"]},{"hotel":"是否需要统一安排住宿","type":"radio","key":"hotel","value":["大床房(付房费全额)","标间(独立居住、付全额房费)","标间(拼房、付房费一半)，无指定合住人员","标间(拼房、付房费一半)，指定合住人员","其他，请说明，包括非指定日期的订房","无须订房，自行安排"]},{"addWeixin":"是否添加业务负责人微信","type":"radio","key":"addWeixin","value":["是","否"]},{"suggestion":"针对此次培训，您还有什么建议","type":"textarea","key":"suggestion","value":""}]'
+                    }
+                    this.$refs.jsontool.formatCode()
+                })
+            }
+        },
+        jsoncancle() {
+            this.signTable = false
+        },
+        jsonsubmit() {
+            const flag = this.$refs.jsontool.onSubumit()
+            if (flag) {
+                const jsonstr = this.$refs.jsontool.jsonData
+                setJson({ data: jsonstr, trainClassId: this.activeRowId })
+                    .then((res) => {
+                        this.$message.success('配置成功')
+                        this.getList()
+                        this.signTable = false
+                    })
+                    .catch((error) => {})
+            } else {
+                this.$message.warning('请检查JSON数据格式')
+            }
+        },
         // json
         // 获取教师列表
         async getTeacherList() {