导入模型、清屏

src/components/codemirror.vue

@@ -9,6 +9,17 @@
         ref="codemirror"
       ></codemirror>
       <div v-if="isSubmit" class="code-mask"></div>
+      <div class="btns">
+        <el-button
+          class="btn"
+          type="info"
+          @click="clearCode"
+        >清屏</el-button>
+        <el-button
+          class="btn"
+          type="warning"
+          @click="importModel"
+        >导入模型</el-button>
         <el-button
           class="run btn"
           type="primary"
@@ -16,6 +27,7 @@
           :disabled="runEnable"
         >运行</el-button>
       </div>
+    </div>
     <div class="code-right answer">
       <p class="text-wrapper">{{ runResult }}</p>
       <div class="pic-wrap" v-if="picSrcList.length">
@@ -45,6 +57,22 @@
         </el-dialog>
       </div>
     </div>
+    
+    <!-- 导入模型 -->
+    <el-dialog title="请选择要导入的模型" :visible.sync="modelVisible" width="400px" :close-on-click-modal="false">
+      <el-tree 
+        :data="modelData" 
+        ref="tree" 
+        @check-change="treeCheckChange" 
+        show-checkbox 
+        :check-strictly="true" 
+        node-key="id">
+      </el-tree>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="typeVisible = false">取消</el-button>
+        <el-button size="small" type="primary" @click="submit">导入</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -142,7 +170,59 @@ export default {
       inputTextReg: /^((?!#).*?(,|\(|\[|\{|\s)+)?input(?!\w)\(['|"]([\s\S]+?)['|"]\)/m, // 匹配input()
       requestList: [], // 有input的情况下，保存每个axios的对象，用于中断请求
       sourceCode: '', // 把input替换成exit函数后的代码
-      requestTimer: null // 用于中断请求的定时器
+      requestTimer: null, // 用于中断请求的定时器
+      modelVisible: false,
+
+      modelData: [
+        {
+          id: 1,
+          label: '品牌一',
+          children: [
+            {
+              id: 4,
+              label: '华东区域',
+              children: [
+                {
+                  id: 9,
+                  label: '上海'
+                },
+                {
+                  id: 10,
+                  label: '昆山'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          id: 2,
+          label: '品牌二',
+          children: [
+            {
+              id: 5,
+              label: '华东区域'
+            },
+            {
+              id: 6,
+              label: '华南区域'
+            }
+          ]
+        },
+        {
+          id: 3,
+          label: '品牌三',
+          children: [
+            {
+              id: 7,
+              label: '华北区域'
+            },
+            {
+              id: 8,
+              label: '华南区域'
+            }
+          ]
+        }
+      ]
     };
   },
   components: {
@@ -171,6 +251,34 @@ export default {
         code.showHint()
       });
     },
+    // 清屏
+    clearCode() {
+      this.codeVal = ''
+      this.isError = ''
+      this.runResult = ''
+      this.$emit('update:codeId', '') // 更新coddeId
+      this.$emit('update:answer', '') // 更新运行结果
+      this.$emit('update:retResult', '') // 更新返回结果
+    },
+    // 导入模型
+    importModel() {
+      this.modelVisible = true
+    },
+    // 多选框选择回调
+    treeCheckChange(data, checked, indeterminate) {
+      const checkKey = this.$refs.tree.getCheckedKeys()
+      // 这里要求单选，所以把多选框改成单选，选择了一个节点后把之前选的都给取消选择，再选中刚勾选的
+      if (checkKey.length > 1 && checked) {
+        this.$refs.tree.setCheckedNodes(checkKey, false)
+        this.$refs.tree.setChecked(data.id, true)
+      }
+    },
+    // 导入模型提交
+    submit() {
+      // this.$post(this.api.sourceModelClassification).then(res => {
+        
+      // }).catch(res => {})
+    },
     /**
      * python代码里如果有input函数的话，是做了单独的处理的，原理是先把所有input函数都替换成exit函数，再在exit函数里加上特定标识，再通过接口传给后端去执行
      * 因为exit函数是跟input有类似的效果，就是都会产生阻塞，所以python引擎一旦遇到exit，进程就会被停止，然后返回exit函数里面的值，而这个值，就是上面说的特定标识加上原本这个input函数里的值
@@ -514,11 +622,14 @@ export default {
   bottom: 0;
   right: 0;
 }
-.run{
+.btns {
   z-index:99;
   position:absolute;
   right: 50px; 
   bottom:15px;
+  display: flex;
+}
+.run{
   width:100px;
   color:#fff;
 }