SanHQin 1 settimana fa
parent
commit
9c417f4bb5

+ 201 - 0
src/components/pages/dialog/selectHtmlPageDialog.vue

@@ -0,0 +1,201 @@
+<template>
+	<div>
+		<el-dialog
+			:center="true"
+			:visible.sync="show"
+			:close-on-click-modal="true"
+			:modal="true"
+			width="auto"
+			height="auto"
+      top="10vh"
+			:append-to-body="true"
+			class="dialog"
+		>
+			<div class="box">
+				<div class="b_head">
+					<span>选择主页面</span>
+					<svg
+						@click="close()"
+						t="1748587270371"
+						class="icon"
+						viewBox="0 0 1024 1024"
+						version="1.1"
+						xmlns="http://www.w3.org/2000/svg"
+						p-id="5023"
+						width="200"
+						height="200"
+					>
+						<path
+							d="M0 0h1024v1024H0z"
+							fill="#FF0033"
+							fill-opacity="0"
+							p-id="5024"
+						></path>
+						<path
+							d="M240.448 168l2.346667 2.154667 289.92 289.941333 279.253333-279.253333a42.666667 42.666667 0 0 1 62.506667 58.026666l-2.133334 2.346667-279.296 279.210667 279.274667 279.253333a42.666667 42.666667 0 0 1-58.005333 62.528l-2.346667-2.176-279.253333-279.253333-289.92 289.962666a42.666667 42.666667 0 0 1-62.506667-58.005333l2.154667-2.346667 289.941333-289.962666-289.92-289.92a42.666667 42.666667 0 0 1 57.984-62.506667z"
+							fill="#fff"
+							p-id="5025"
+						></path>
+					</svg>
+				</div>
+				<div class="b_main" v-loading="loading" v-if="data">
+          <el-table
+            :data="tableData"
+            style="width: 100%;"
+            border
+          >
+            <el-table-column label="文件名称" align="center" prop="fileName" />
+            <el-table-column label="操作" width="200" align="center">
+              <template slot-scope="scope">
+                <el-button type="primary" v-if="!scope.row.isSelect" size="small" @click="select(scope.row)">选择</el-button>
+                <el-button v-if="scope.row.isSelect" size="small" @click="close()">已选</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+				</div>
+			</div>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			loading: false,
+			show: false,
+			data: null,
+      tableData:[],
+		};
+	},
+	methods: {
+		open(data) {
+			this.data = JSON.parse(JSON.stringify(data));
+			this.loading = false;
+			this.show = true;
+		},
+		close() {
+			this.show = false;
+			this.init();
+		},
+		init() {
+			this.data = null;
+			this.loading = false;
+		},
+    submit(){
+      this.$message.info("选择确定")
+    },
+    select(row){
+      console.log("选择",row)
+    },
+	},
+};
+</script>
+
+<style scoped>
+.dialog >>> .el-dialog {
+	width: 600px !important;
+	border-radius: 8px;
+	padding: 0;
+	background-color: #fff;
+	overflow: hidden;
+}
+
+.dialog >>> .el-dialog__body {
+	width: 600px !important;
+  height: 500px;
+	height: auto;
+	flex-shrink: 0;
+	padding: 0;
+	box-sizing: border-box;
+	overflow: auto;
+}
+
+.dialog >>> .el-dialog__header {
+	display: none !important;
+}
+
+.box {
+	width: 600px;
+	height: 500px;
+	background: #fff;
+	border-radius: 15px;
+	box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05),
+		0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
+
+}
+
+.b_head {
+	width: 100%;
+	height: 50px;
+	/* border-radius: 15px 15px 0 0; */
+	background: #1A1A1A;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	box-sizing: border-box;
+	padding: 0 20px;
+  color: #fff;
+}
+
+.b_head > span {
+	font-size: 18px;
+	font-weight: bold;
+	color: #fff;
+}
+
+.b_head > img {
+	width: 20px;
+	height: 20px;
+	cursor: pointer;
+}
+
+.b_head > svg {
+	width: 20px;
+	height: 20px;
+	cursor: pointer;
+}
+
+.b_main {
+	width: 100%;
+	height: calc(100% - 50px);
+	background: #fff;
+	padding: 20px 20px 20px 20px;
+	box-sizing: border-box;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.b_bottom {
+	width: 100%;
+	height: 70px;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	box-sizing: border-box;
+	padding: 0 20px;
+}
+
+.b_bottom>div{
+  padding: 10px 25px;
+  background: #fff;
+  color: #000;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: solid 1px #EEEEEE;
+  margin-left: 15px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.b_bottom>.b_b_submit{
+  background: #1A1A1A;
+  color: #D4D4D4;
+  border-color: #1A1A1A;
+}
+
+</style>

+ 46 - 42
src/components/pages/easy/addCourse.vue

@@ -8237,6 +8237,7 @@
     ></EnglishVoice>
     <appDialog ref="appDialog" @success="selectAppSuccess"></appDialog>
     <CodeEditor ref="CodeEditorRef" @success="addHtmlSuccess"></CodeEditor>
+    <selectHtmlPageDialog ref="selectHtmlPageDialogRef"/>
   </div>
 </template>
 
@@ -8265,6 +8266,7 @@ let converter = OpenCC.Converter({
   to: "cn"
 });
 import JSZip from 'jszip'
+import selectHtmlPageDialog from '../dialog/selectHtmlPageDialog.vue'
 
 export default {
   mixins: [ myMixin,uploadFileMixin],
@@ -8280,7 +8282,8 @@ export default {
     interVideo,
     englishRight,
     EnglishVoice,
-    appDialog
+    appDialog,
+    selectHtmlPageDialog
   },
   data() {
     return {
@@ -14108,48 +14111,49 @@ export default {
     },
     // zip压缩文件上传
     uploadZIPFile(i){
-      this.lineCount = i;
-      // 只支持上传zip文件
-      let input = document.createElement('input');
-      input.type = 'file';
-      input.accept = '.zip';
-      input.style.display = 'none';
-      // 只允许上传一个文件
-      input.multiple = false;
-      input.onchange = async (e) => {
-        let file = e.target.files[0];
-        if (!file) return;
-        if (file.type !== 'application/zip' && !file.name.endsWith('.zip')) {
-          this.$message.error('只支持上传zip文件');
-          return;
-        }
-        // this.awsupload({file:file,path:"zip/"+file.name}).then(res=>{
-        //   console.log('uploadZIPFile', res);
-        //   // 转成正常的网址
-        //   let url = res && res.Location ? decodeURIComponent(res.Location) : "";
-        //   console.log('正常网址:', url);
-
-        // })
-        // 这里可以根据实际需求进行上传处理
-        try{
-          const zip = new JSZip();
-          const content = await zip.loadAsync(file);
-          let _fileStructure = this.buildFileStructure(file,content);
-          let _time = new Date().getTime();
-          let _resultList = await this.uploadZipFileFn(_fileStructure.files,`${_time}_${_fileStructure.folderName}`);
-          console.log("_resultList",_resultList)
-
-        }catch(e){
-          console.log(e)
-          this.$message.error("解析zip文件失败")
-        }
+      this.$refs.selectHtmlPageDialogRef.open("测试");
+      // this.lineCount = i;
+      // // 只支持上传zip文件
+      // let input = document.createElement('input');
+      // input.type = 'file';
+      // input.accept = '.zip';
+      // input.style.display = 'none';
+      // // 只允许上传一个文件
+      // input.multiple = false;
+      // input.onchange = async (e) => {
+      //   let file = e.target.files[0];
+      //   if (!file) return;
+      //   if (file.type !== 'application/zip' && !file.name.endsWith('.zip')) {
+      //     this.$message.error('只支持上传zip文件');
+      //     return;
+      //   }
+      //   // this.awsupload({file:file,path:"zip/"+file.name}).then(res=>{
+      //   //   console.log('uploadZIPFile', res);
+      //   //   // 转成正常的网址
+      //   //   let url = res && res.Location ? decodeURIComponent(res.Location) : "";
+      //   //   console.log('正常网址:', url);
+
+      //   // })
+      //   // 这里可以根据实际需求进行上传处理
+      //   try{
+      //     const zip = new JSZip();
+      //     const content = await zip.loadAsync(file);
+      //     let _fileStructure = this.buildFileStructure(file,content);
+      //     let _time = new Date().getTime();
+      //     let _resultList = await this.uploadZipFileFn(_fileStructure.files,`${_time}_${_fileStructure.folderName}`);
+      //     console.log("_resultList",_resultList)
+
+      //   }catch(e){
+      //     console.log(e)
+      //     this.$message.error("解析zip文件失败")
+      //   }
 
-      };
-      document.body.appendChild(input);
-      input.click();
-      setTimeout(() => {
-        document.body.removeChild(input);
-      }, 1000);
+      // };
+      // document.body.appendChild(input);
+      // input.click();
+      // setTimeout(() => {
+      //   document.body.removeChild(input);
+      // }, 1000);
     },
     // 构建文件结构树
     buildFileStructure(file,zip) {