Merge branch 'master' into NPC-lhd

src/components/Adult/common/SentenceModule.vue

@@ -29,7 +29,7 @@
         @blur="onBlur(curQueItem, 'number')"
       ></el-input>
     </div>
-    <div class="Big-Book-top" v-if="curQue.ChildType == 'sentence_answer'">
+    <div class="Big-Book-top">
       <span>答案</span>
       <el-input
         type="textarea"
@@ -39,7 +39,15 @@
         @blur="onBlur(curQueItem, 'answer')"
       ></el-input>
     </div>
-    <div class="Big-Book-top">
+    <div class="Big-Book-top" v-if="type == 'recordHZ_inputPY_chs'">
+      <span>录音</span>
+      <el-radio v-model="curQueItem.IsRecord" :label="true">需要</el-radio>
+      <el-radio v-model="curQueItem.IsRecord" :label="false">不需要</el-radio>
+    </div>
+    <div
+      class="Big-Book-top"
+      v-if="type == 'recordHZ_inputPY_chs' && curQueItem.IsRecord"
+    >
       <img src="../../../assets/adult/pro-plus.png" alt="" />
     </div>
     <!-- <div class="Big-Book-mp3">
@@ -67,6 +75,7 @@ export default {
     "changAnswer",
     "deleteOptionOne",
     "checkList",
+    "type",
   ],
   data() {
     return {
@@ -214,7 +223,7 @@ export default {
   &-top {
     display: flex;
     justify-content: flex-start;
-    align-items: flex-start;
+    align-items: center;
     margin-top: 10px;
     > span {
       width: 50px;
@@ -233,7 +242,7 @@ export default {
     .Big-Book-input {
       display: flex;
       justify-content: flex-start;
-      align-items: flex-start;
+      align-items: center;
       > span {
         line-height: 32px;
         margin-right: 6px;
@@ -248,7 +257,7 @@ export default {
     > div {
       display: flex;
       justify-content: flex-start;
-      align-items: flex-start;
+      align-items: center;
       margin-right: 10px;
       > span {
         line-height: 32px;

src/components/Adult/common/UploadView.vue

@@ -0,0 +1,180 @@
+<!--  -->
+<template>
+  <div class="upload">
+    <el-upload
+      :accept="accept"
+      class="upload-demo"
+      :action="url"
+      :on-preview="handlePreview"
+      :on-remove="handleRemove"
+      :before-remove="beforeRemove"
+      multiple
+      :before-upload="handlebeforeUplaod"
+      :on-exceed="handleExceed"
+      :on-success="handleSuccess"
+      :on-change="handleChange"
+      :file-list="currentfileList"
+      :limit="filleNumber"
+      :show-file-list="false"
+    >
+      <div class="uploadBtn">
+        <img
+          style="width: 24px; height: 24px"
+          src="../../../assets/adult/uploadview.png"
+          alt=""
+        />
+        上传文件
+      </div>
+    </el-upload>
+    <!-- <div class="zhezhao" v-loading.fullscreen.lock="fullscreenLoading"></div> -->
+  </div>
+</template>
+
+<script>
+import { getToken } from "@/utils/auth";
+export default {
+  components: {},
+  props: [
+    "uploadType",
+    "filleNumber",
+    "datafileList",
+    "changeFillId",
+    "deleteImg",
+    "index",
+    "uiType",
+    "fileList",
+    "accept",
+  ],
+  data() {
+    return {
+      currentfileList: [],
+      fileTypeName: "",
+      loading: false,
+    };
+  },
+  computed: {
+    url() {
+      let userInfor = getToken();
+      let UserCode = "",
+        UserType = "",
+        SessionID = "";
+      if (userInfor) {
+        let user = JSON.parse(getToken());
+        UserCode = user.user_code;
+        UserType = user.user_type;
+        SessionID = user.session_id;
+      }
+      return (
+        process.env.VUE_APP_BASE_API +
+        "/GCLSFileServer/WebFileUpload?UserCode=" +
+        UserCode +
+        "&UserType=" +
+        UserType +
+        "&SessionID=" +
+        SessionID +
+        "&SecurityLevel=Mid"
+      );
+    },
+  },
+  watch: {
+    datafileList: {
+      handler: function (val, oldVal) {
+        this.initUpload();
+      },
+      // 深度观察监听
+      deep: true,
+    },
+    fileList(newval,oldval){
+      this.currentfileList = newval
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.currentfileList = this.fileList;
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.initUpload();
+  },
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {}, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {},
+  // 方法集合
+  methods: {
+    handleChange(file, fileList) {},
+    handleSuccess(response, file, fileList) {
+      if (response.status == 1) {
+        response.duration = response.file_info_list[0].media_duration
+          ? response.file_info_list[0].media_duration
+          : 10;
+        this.$message.success("用户上传成功");
+
+        this.changeFillId(fileList, response.duration, this.index);
+
+        this.loading.close();
+      } else {
+        this.fileList = [];
+        this.$message.warning(response.msg);
+        this.loading.close();
+      }
+    },
+    handlebeforeUplaod(file) {
+      this.loading = this.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+    },
+    handleRemove(file, fileList) {
+      console.log(fileList);
+      this.changeFillId(fileList);
+      this.$message.success("移除成功");
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    handlePreview(file) {},
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 ${
+          this.filleNumber ? this.filleNumber : 1
+        } 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`
+      );
+    },
+    initUpload() {
+ 
+    },
+  }, // 如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类;
+.uploadBtn {
+  width: 141px;
+  height: 39px;
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  line-height: 150%;
+  color: #000000;
+
+  img {
+    margin-right: 13px;
+  }
+}
+</style>
+<style lang="scss">
+</style>

src/components/Adult/common/data.js

@@ -417,6 +417,14 @@ let fnData = [{
         type: "recordHZ_inputPY_chs",
         name: "读汉字写拼音",
     },
+    {
+        type: "inputItem_chs",
+        name: "输入选项",
+    },
+    {
+        type: "upload_control_chs",
+        name: "上传控件",
+    },
     // {
     //     type: "inputItem_chs",
     //     name: "输入选项",
@@ -845,25 +853,6 @@ let fnData = [{
     //     name: "画图题",
     // },
     {
-        type: "upload_control",
-        name: "上传控件",
-        data_structure: {
-            type: "upload_control",
-            name: "上传控件",
-            uploadType: "",
-            list: [{
-                    name: "图片",
-                },
-                {
-                    name: "pdf",
-                },
-                {
-                    name: "其它",
-                },
-            ]
-        }
-    },
-    {
         type: "text_item",
         name: "文本条",
         data_structure: {

src/components/Adult/inputModules/InputRecord.vue

@@ -1,12 +1,13 @@
 <!--  -->
 <template>
-  <div class="Big-Book-Record">
+  <div class="Big-Book-Record" v-if="curQue">
     <!-- <img
       src="../../../assets/adult/maikefeng-red.png"
       class="Big-Book-Record-icon"
     /> -->
     <div class="Big-Book-con">
-                <span>标题：</span>           <el-input
+      <span>标题：</span>           
+      <el-input
         style="width: 300px"
         type="textarea"
         autosize
@@ -61,16 +62,7 @@ export default {
   methods: {
     //添加一个选项
     addOption() {
-      let leg = this.curQue.option.length;
-      let last = this.curQue.option[leg - 1];
-      // if (!last.hanzi && !last.pinyin && !last.definition_list[0]) {
-      //   this.$message.warning("数据不能全是空");
-      //   return;
-      // }
-      let type = this.curQue.type;
-      let cur_fn_data_arr = this.fn_data.filter((item) => item.type == type);
-      let cur_fn_data = JSON.parse(JSON.stringify(cur_fn_data_arr[0]));
-      let obj = cur_fn_data.data_structure.option[0];
+      let obj = JSON.parse(JSON.stringify(this.data_structure.option[0]));
       this.curQue.option.push(obj);
     },
     deleteOptionOne(index) {
@@ -82,14 +74,13 @@ export default {
     },
     initcurQue() {
       let data = JSON.parse(JSON.stringify(this.data_structure));
-      this.changeCurQue(data)
+      this.changeCurQue(data);
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    console.log(this.curQue);
-    if(!this.curQue){
-      this.initcurQue()
+    if (!this.curQue) {
+      this.initcurQue();
     }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）

src/components/Adult/inputModules/Sentence.vue

@@ -27,6 +27,7 @@
           :curQue="curQue"
           :deleteOptionOne="deleteOptionOne"
           :index="index"
+          :type="type"
         />
       </div>
       <div class="Big-Book-addrole">
@@ -41,7 +42,7 @@ import SentenceModule from "../common/SentenceModule.vue";
 
 export default {
   name: "Single",
-  props: ["curQue", "fn_data", "changeCurQue"],
+  props: ["curQue", "fn_data", "changeCurQue", "type"],
   components: {
     SentenceModule,
   },
@@ -68,6 +69,19 @@ export default {
             number: "",
             con: "",
             answer: "",
+            IsRecord: false,
+          },
+        ],
+      },
+      data_structure2: {
+        type: "inputItem_chs",
+        name: "输入选项",
+        title: "",
+        option: [
+          {
+            number: "",
+            con: "",
+            answer: "",
           },
         ],
       },
@@ -98,11 +112,12 @@ export default {
     },
     // 新增选项
     addOption() {
-      // if (!last.hanzi && !last.pinyin) {
-      //   this.$message.warning("数据不能全是空");
-      //   return;
-      // }
-      let obj = this.data_structure.option[0];
+      let obj;
+      if (this.type == "recordHZ_inputPY_chs") {
+        obj = JSON.parse(JSON.stringify(this.data_structure.option[0]));
+      } else if (this.type == "inputItem_chs") {
+        obj = JSON.parse(JSON.stringify(this.data_structure2.option[0]));
+      }
       this.curQue.option.push(obj);
     },
     // 更多配置选择
@@ -122,7 +137,12 @@ export default {
       //   });
     },
     initcurQue() {
-      let data = JSON.parse(JSON.stringify(this.data_structure));
+      let data = null;
+      if (this.type == "recordHZ_inputPY_chs") {
+        data = JSON.parse(JSON.stringify(this.data_structure));
+      } else if (this.type == "inputItem_chs") {
+        data = JSON.parse(JSON.stringify(this.data_structure2));
+      }
       this.changeCurQue(data);
     },
   },
@@ -211,10 +231,10 @@ export default {
       }
     }
   }
-  .Big-Book-con{
+  .Big-Book-con {
     display: flex;
     align-items: center;
-        > span {
+    > span {
       width: 50px;
     }
   }

src/components/Adult/inputModules/UploadControl.vue

@@ -1,48 +1,146 @@
 <!--  -->
 <template>
-  <div class="Big-Book-MatrixSingle">
-    <div
-      class="Big-Book-MatrixSingle-content"
-      style=" margin-top: 20px"
-    >
-      <div class="Big-Book-MatrixSingle-main">
-        <span style="margin-right:10px">选择上传类型</span>
-        <el-radio-group v-model="curQue.uploadType">
-          <el-radio v-for="(item,i) in curQue.list" :key="i" :label="item.name">{{item.name}}</el-radio>
-        </el-radio-group>
+  <div class="Big-Book-prev-Textdes Tinydemo" v-if="curQue">
+    <UploadView
+      :changeFillId="changeFillId"
+      :accept="accept"
+      :filleNumber="1"
+      :fileList="fileList"
+    />
+    <div class="dv">
+      <div class="main">
+        <div class="content">
+          <template v-if="curQue.data">
+            <template
+              v-if="
+                curQue.data.file_name.indexOf('png') != -1 ||
+                curQue.data.file_name.indexOf('jpg') != -1
+              "
+            >
+              <img :src="curQue.data.file_url" alt="" />
+            </template>
+            <template v-else-if="curQue.data.file_name.indexOf('pdf') != -1">
+              <pdf
+                ref="pdf"
+                :src="curQue.data.fileRelativePath"
+                v-for="i in numPages"
+                :key="i"
+                :page="i"
+              >
+              </pdf>
+            </template>
+            <template v-else>
+              <iframe
+                :src="
+                  'https://view.officeapps.live.com/op/view.aspx?src=' +
+                  `${curQue.data.file_url}`
+                "
+                width="100%"
+                height="1000px"
+                id="if"
+              >
+              </iframe>
+            </template>
+          </template>
+        </div>
+      </div>
+      <div class="remove" @click="remove">
+        <img src="../../../assets/adult/red_remove.png" alt="" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import UploadView from "../common/UploadView.vue";
+import pdf from "vue-pdf";
 export default {
-  name: "Single",
-  props: ["curQue", "fn_data"],
-  components: {},
+  components: {
+    UploadView,
+    pdf,
+  },
+  props: ["curQue", "changeCurQue"],
   data() {
     return {
-      form: {
-        stem: {
-          con: "",
-          pinyin: "",
-          english: "",
-          highlight: "",
-          underline: "",
-          img_url: [],
-          mp3_url: [],
-        },
+      uploadType: "",
+      fileList: [],
+      data: null,
+      numPages: null,
+      accept: ".png,.jpg,.pdf",
+      data_structure: {
+        type: "recordHZ_inputPY_chs",
+        name: "读汉字写拼音",
+        title: "",
+        option: [
+          {
+            number: "",
+            con: "",
+            answer: "",
+          },
+        ],
       },
     };
   },
   computed: {},
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    remove() {
+      this.data = null;
+      tis.curQue.data = null;
+      this.fileList = [];
+    },
+    changeFillId(fileList, item, index) {
+      this.fileList = fileList;
+      this.curQue.data = this.fileList[0].response.file_info_list[0];
+      if (this.curQue.data.file_name.indexOf("pdf" != -1)) {
+        this.curQue.data.fileRelativePath =
+          process.env.VUE_APP_BASE_API + this.curQue.data.file_relative_path;
+        this.curQue.data = this.fileList[0].response.file_info_list[0];
+        this.getNumPages();
+      }
+    },
+    // 获取pdf的页数
+    getNumPages() {
+      let _this = this;
+      let loadingTask = pdf.createLoadingTask(
+        _this.curQue.data.fileRelativePath
+      );
+      loadingTask.promise
+        .then((pdf) => {
+          _this.numPages = pdf.numPages;
+        })
+        .catch((err) => {
+          console.error("pdf 加载失败", err);
+        });
+    },
+    initcurQue() {
+      let data = JSON.parse(JSON.stringify(this.data_structure));
+      this.changeCurQue(data);
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    if (!this.curQue) {
+      this.initcurQue();
+    }
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    if (this.curQue.data && this.curQue.data.file_name.indexOf("pdf") != -1) {
+      let _this = this;
+      let loadingTask = pdf.createLoadingTask(
+        _this.curQue.data.fileRelativePath
+      );
+      loadingTask.promise
+        .then((pdf) => {
+          _this.numPages = pdf.numPages;
+        })
+        .catch((err) => {
+          console.error("pdf 加载失败", err);
+        });
+    }
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -52,56 +150,56 @@ export default {
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scope>
+<style lang='scss' scoped>
 //@import url(); 引入公共css类
-.Big-Book-MatrixSingle {
-  &-content {
-    .Big-Book-MatrixSingle-main {
-      display: flex;
-    }
-    .answer {
-      margin-left: 40px;
-    }
-    .add {
-      width: 78%;
-      margin: 0 auto;
-      height: 40px;
-      text-align: center;
-      line-height: 40px;
-      background: #f3f3f3;
-      border: 1px dashed rgba(0, 0, 0, 0.15);
+.Big-Book-prev-Textdes {
+  padding: 24px 0 24px 24px;
+  background: #f7f7f7;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  .dv {
+    display: flex;
+    align-items: center;
+    .remove {
+      width: 40px;
+      height: 39px;
+      background: #ffffff;
+      border: 1px solid rgba(0, 0, 0, 0.1);
       box-sizing: border-box;
-      border-radius: 4px;
-      margin-top: 8px;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 32px;
       cursor: pointer;
+      img {
+        width: 24px;
+        height: 24px;
+      }
     }
   }
-  .Big-Book-divide {
-    > div {
-      width: 100%;
-    }
-    .answerList {
-      > div {
-        margin-top: 16px;
-        display: flex;
-        align-items: center;
-        > :nth-child(1) {
-          display: inline-block;
-          width: 100px;
-          margin-right: 10px;
-          word-break: break-all;
-        }
-
-        .checkbox-group {
-          > :not(:nth-child(1)) {
-            display: inline-block;
-            margin-left: 29px;
-          }
-        }
+  .main {
+    margin-top: 23px;
+    width: 477px;
+    height: 292px;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .content {
+      width: 445px;
+      height: 260px;
+      border-radius: 4px;
+      box-sizing: border-box;
+      background: linear-gradient(0deg, #ebebeb, #ebebeb);
+      overflow-y: scroll;
+      img {
+        max-width: 100%;
+        max-height: 100%;
       }
     }
   }
 }
 </style>
-<style lang="scss">
-</style>

src/components/Adult/preview/UploadControlView.vue

@@ -0,0 +1,231 @@
+<!--  -->
+<template>
+  <div class="Big-Book-prev-Textdes Tinydemo" v-if="curQue">
+    <div style="display: flex">
+      <UploadView
+        :changeFillId="changeFillId"
+        :accept="accept"
+        :filleNumber="1"
+        :fileList="fileList"
+      />
+      <div class="uploadBtn">
+        <img
+          style="width: 24px; height: 24px"
+          src="../../../assets/adult/download.png"
+          alt=""
+        />
+        下载表格
+      </div>
+    </div>
+
+    <div class="dv">
+      <div class="main">
+        <div class="content">
+          <template v-if="curQue.data">
+            <template
+              v-if="
+                curQue.data.file_name.indexOf('png') != -1 ||
+                curQue.data.file_name.indexOf('jpg') != -1
+              "
+            >
+              <img :src="curQue.data.file_url" alt="" />
+            </template>
+            <template v-else-if="curQue.data.file_name.indexOf('pdf') != -1">
+              <pdf
+                ref="pdf"
+                :src="curQue.data.fileRelativePath"
+                v-for="i in numPages"
+                :key="i"
+                :page="i"
+              >
+              </pdf>
+            </template>
+            <template v-else>
+              <iframe
+                :src="
+                  'https://view.officeapps.live.com/op/view.aspx?src=' +
+                  `${curQue.data.file_url}`
+                "
+                width="100%"
+                height="1000px"
+                id="if"
+              >
+              </iframe>
+            </template>
+          </template>
+        </div>
+      </div>
+      <div class="remove" @click="remove">
+        <img src="../../../assets/adult/red_remove.png" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import UploadView from "../common/UploadView.vue";
+import pdf from "vue-pdf";
+export default {
+  components: {
+    UploadView,
+    pdf,
+  },
+  props: ["curQue", "changeCurQue"],
+  data() {
+    return {
+      uploadType: "",
+      fileList: [],
+      data: null,
+      numPages: null,
+      accept: ".png,.jpg,.pdf",
+      data_structure: {
+        type: "recordHZ_inputPY_chs",
+        name: "读汉字写拼音",
+        title: "",
+        option: [
+          {
+            number: "",
+            con: "",
+            answer: "",
+          },
+        ],
+      },
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+    remove() {
+      this.data = null;
+      tis.curQue.data = null;
+      this.fileList = [];
+    },
+    changeFillId(fileList, item, index) {
+      this.fileList = fileList;
+      this.curQue.data = this.fileList[0].response.file_info_list[0];
+      if (this.curQue.data.file_name.indexOf("pdf" != -1)) {
+        this.curQue.data.fileRelativePath =
+          process.env.VUE_APP_BASE_API + this.curQue.data.file_relative_path;
+        this.curQue.data = this.fileList[0].response.file_info_list[0];
+        this.getNumPages();
+      }
+    },
+    // 获取pdf的页数
+    getNumPages() {
+      let _this = this;
+      let loadingTask = pdf.createLoadingTask(
+        _this.curQue.data.fileRelativePath
+      );
+      loadingTask.promise
+        .then((pdf) => {
+          _this.numPages = pdf.numPages;
+        })
+        .catch((err) => {
+          console.error("pdf 加载失败", err);
+        });
+    },
+    initcurQue() {
+      let data = JSON.parse(JSON.stringify(this.data_structure));
+      this.changeCurQue(data);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    if (!this.curQue) {
+      this.initcurQue();
+    } else {
+      if (this.curQue.data && this.curQue.data.file_name.indexOf("pdf") != -1) {
+        let _this = this;
+        let loadingTask = pdf.createLoadingTask(
+          _this.curQue.data.fileRelativePath
+        );
+        loadingTask.promise.then((pdf) => {
+          _this.numPages = pdf.numPages;
+        });
+      }
+    }
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.Big-Book-prev-Textdes {
+  padding: 24px 0 24px 24px;
+  background: #f7f7f7;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  .dv {
+    display: flex;
+    align-items: center;
+    .remove {
+      width: 40px;
+      height: 39px;
+      background: #ffffff;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      box-sizing: border-box;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 32px;
+      cursor: pointer;
+      img {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+  .uploadBtn {
+    width: 141px;
+    height: 39px;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    line-height: 150%;
+    color: #000000;
+    margin-left: 16px;
+    img {
+      margin-right: 13px;
+    }
+  }
+  .main {
+    margin-top: 23px;
+    width: 477px;
+    height: 292px;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .content {
+      width: 445px;
+      height: 260px;
+      border-radius: 4px;
+      box-sizing: border-box;
+      background: linear-gradient(0deg, #ebebeb, #ebebeb);
+      overflow-y: scroll;
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+  }
+}
+</style>

src/views/adultInput.vue

@@ -163,16 +163,38 @@
                       </template>
                       <template v-else> </template>
                     </template>
-                       <template v-if="topicIitem.type == 'recordHZ_inputPY_chs'">
+                    <template
+                      v-if="
+                        topicIitem.type == 'recordHZ_inputPY_chs' ||
+                        topicIitem.type == 'inputItem_chs'
+                      "
+                    >
                       <template v-if="topicIitem.is_edit">
                         <Sentence
                           :curQue="topicIitem.data"
+                          :type="topicIitem.type"
                           :fn_data="fn_data"
                           :changeCurQue="changeCurQue"
                         />
                       </template>
                       <template v-else> </template>
                     </template>
+                    <template v-if="topicIitem.type == 'upload_control_chs'">
+                      <template v-if="topicIitem.is_edit">
+                        <UploadControl
+                          :curQue="topicIitem.data"
+                          :type="topicIitem.type"
+                          :fn_data="fn_data"
+                          :changeCurQue="changeCurQue"
+                        />
+                      </template>
+                      <template v-else>
+                        <UploadControlView
+                          :curQue="topicIitem.data"
+                          :fn_data="fn_data"
+                        />
+                      </template>
+                    </template>
                   </div>
                   <div
                     class="addoption"
@@ -194,7 +216,7 @@
                     选择模板
                   </div>
                   <div
-                    v-if="!topicIitem.data && topicIitem.is_addModule"
+                    v-if="!topicIitem.data && topicIitem.is_add_module"
                     class="addoption"
                     @click="addModule(toindex, rowIndex, lineIndex, topicIitem)"
                   >
@@ -307,6 +329,7 @@ import Ligatureview from "@/components/Adult/preview/Ligature.vue";
 import InputRecordview from "@/components/Adult/preview/InputRecord.vue";
 import BgControlview from "@/components/Adult/preview/BgControl.vue";
 import NewordPhraseview from "@/components/Adult/preview/WordPhrase.vue";
+import UploadControlView from "@/components/Adult/preview/UploadControlView.vue";
 
 import Preview from "@/components/Adult/Preview.vue";
 import fn from "@/components/Adult/common/data.js";
@@ -350,6 +373,7 @@ export default {
     UploadControl,
     TextItem,
     Sentence,
+    UploadControlView,
   },
   data() {
     return {
@@ -434,7 +458,7 @@ export default {
           for (let j = 0; j < this.line; j++) {
             let obj = {
               text: `第${i + 1}行,第${j + 1}列`,
-              is_addModule: true,
+              is_add_module: true,
               is_edit: true,
             };
             rowArr.push(obj);
@@ -453,7 +477,7 @@ export default {
       this.TopicIndex = topicIndex;
       this.RowIndex = rowindex;
       this.LineIndex = lineIndex;
-      item.is_addModule = false;
+      item.is_add_module = false;
     },
     // 删除模板
     remoeModule(topicIndex, rowindex, lineIndex, item) {
@@ -472,7 +496,7 @@ export default {
       this.TopicIndex = null;
       this.RowIndex = null;
       this.LineIndex = null;
-      item.is_addModule = true;
+      item.is_add_module = true;
     },
     handleClosePre() {
       if (window.stopAudioVoice) window.stopAudioVoice();
@@ -558,7 +582,6 @@ export default {
       ) {
         this.$message.warning("每列只能添加一个模板");
       } else {
-        debugger;
         console.log("不存在");
         this.module_type = item.type;
         this.$set(
@@ -674,7 +697,6 @@ export default {
     //编辑当前题型
     editCurQue(curItem) {
       curItem.is_edit = true;
-      console.log(curItem);
       // if (!curItem.isEdit) {
       //   let count = 0;
       //   let tabIndex = this.tabIndex;