|
|
@@ -1,182 +1,193 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <el-dialog
|
|
|
- :title="type == 0 ? '添加HTML' : '修改HTML'"
|
|
|
- :visible.sync="CodeVisible"
|
|
|
- :append-to-body="true"
|
|
|
- width="70%"
|
|
|
- :before-close="handleClose"
|
|
|
- class="dialog_diy"
|
|
|
- >
|
|
|
- <template v-loading="loading">
|
|
|
- <el-form>
|
|
|
- <el-form-item label="标题">
|
|
|
- <el-input
|
|
|
- ref="fuInput"
|
|
|
- v-model="titCon"
|
|
|
- auto-complete="off"
|
|
|
- placeholder="请输入标题..."
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- <!-- <div>代码编辑器</div> -->
|
|
|
- <ace-editor
|
|
|
- v-model="code"
|
|
|
- :options="editorOptions"
|
|
|
- style="height: 300px; width: 100%;"
|
|
|
- ></ace-editor>
|
|
|
- </el-form>
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="handleClose">取 消</el-button>
|
|
|
- <el-button type="primary" @click="upLoad">确定</el-button>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <el-dialog
|
|
|
+ :title="type == 0 ? '添加HTML' : '修改HTML'"
|
|
|
+ :visible.sync="CodeVisible"
|
|
|
+ :append-to-body="true"
|
|
|
+ width="70%"
|
|
|
+ :before-close="handleClose"
|
|
|
+ class="dialog_diy"
|
|
|
+ >
|
|
|
+ <div v-loading="loading">
|
|
|
+ <el-form>
|
|
|
+ <el-form-item label="标题">
|
|
|
+ <el-input
|
|
|
+ ref="fuInput"
|
|
|
+ v-model="titCon"
|
|
|
+ auto-complete="off"
|
|
|
+ placeholder="请输入标题..."
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <div>代码编辑器</div> -->
|
|
|
+ <ace-editor
|
|
|
+ v-model="code"
|
|
|
+ :options="editorOptions"
|
|
|
+ style="height: 300px; width: 100%;"
|
|
|
+ ></ace-editor>
|
|
|
+ </el-form>
|
|
|
+ <div style="width: 100%;display: flex;justify-content: flex-end;margin-top: 20px;">
|
|
|
+ <el-button @click="handleClose">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="upLoad">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import AceEditor from 'vue2-ace-editor';
|
|
|
-import 'ace-builds/src-noconflict/ace';
|
|
|
-import 'ace-builds/src-noconflict/mode-javascript';
|
|
|
-import 'ace-builds/src-noconflict/theme-monokai';
|
|
|
-import axios from "axios"
|
|
|
-
|
|
|
- export default {
|
|
|
- components: { AceEditor },
|
|
|
- data(){
|
|
|
- return {
|
|
|
- CodeVisible:false,
|
|
|
- titCon:'',
|
|
|
- loading:false,
|
|
|
- type:'',
|
|
|
- code: '',
|
|
|
- itemTaskIndex:'',
|
|
|
- unitIndex:'',
|
|
|
- index1:'',
|
|
|
- editorOptions: {
|
|
|
- theme: 'ace/theme/monokai',
|
|
|
- mode: 'ace/mode/javascript',
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- methods:{
|
|
|
- upLoad(){
|
|
|
- if (!this.titCon.trim()) return this.$message.info('请将名称信息补充完整')
|
|
|
- if (!this.code.trim()) return this.$message.info('请将代码信息补充完整')
|
|
|
-
|
|
|
- this.loading=true
|
|
|
- // console.log(this.code)
|
|
|
- // 创建Blob对象
|
|
|
-
|
|
|
- const blob = new Blob([this.code], { type: 'text/html' });
|
|
|
- const file = new File([blob], `${this.titCon}.html`, {
|
|
|
- type: 'text/html',
|
|
|
- lastModified: Date.now() // 使用当前时间戳
|
|
|
- });
|
|
|
- this.beforeUpload(file)
|
|
|
- console.log('file',file);
|
|
|
- },
|
|
|
- loadHtmlFile(url) {
|
|
|
- axios.get(url)
|
|
|
- .then(response => {
|
|
|
- console.log('response',response.data);
|
|
|
-
|
|
|
- this.code = JSON.parse(JSON.stringify( response.data)); // 更新内容
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- console.error('加载 HTML 文件时出错:', error);
|
|
|
+import AceEditor from "vue2-ace-editor";
|
|
|
+import "ace-builds/src-noconflict/ace";
|
|
|
+import "ace-builds/src-noconflict/mode-javascript";
|
|
|
+import "ace-builds/src-noconflict/theme-monokai";
|
|
|
+import axios from "axios";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: { AceEditor },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ CodeVisible: false,
|
|
|
+ titCon: "",
|
|
|
+ loading: false,
|
|
|
+ type: "",
|
|
|
+ code: "",
|
|
|
+ itemTaskIndex: "",
|
|
|
+ unitIndex: "",
|
|
|
+ index1: "",
|
|
|
+ editorOptions: {
|
|
|
+ theme: "ace/theme/monokai",
|
|
|
+ mode: "ace/mode/javascript"
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ upLoad() {
|
|
|
+ if (!this.titCon.trim())
|
|
|
+ return this.$message.info("请将名称信息补充完整");
|
|
|
+ if (!this.code.trim()) return this.$message.info("请将代码信息补充完整");
|
|
|
+
|
|
|
+ this.loading = true;
|
|
|
+ // console.log(this.code)
|
|
|
+ // 创建Blob对象
|
|
|
+
|
|
|
+ const blob = new Blob([this.code], { type: "text/html" });
|
|
|
+ const file = new File([blob], `${this.titCon}.html`, {
|
|
|
+ type: "text/html",
|
|
|
+ lastModified: Date.now() // 使用当前时间戳
|
|
|
+ });
|
|
|
+ this.beforeUpload(file);
|
|
|
+ console.log("file", file);
|
|
|
+ },
|
|
|
+ loadHtmlFile(url) {
|
|
|
+ axios
|
|
|
+ .get(url)
|
|
|
+ .then(response => {
|
|
|
+ console.log("response", response.data);
|
|
|
+
|
|
|
+ this.code = JSON.parse(JSON.stringify(response.data)); // 更新内容
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.loading = false;
|
|
|
+
|
|
|
+ console.error("加载 HTML 文件时出错:", error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeUpload(file) {
|
|
|
+ // this.$refs.upload1.uploadFiles;
|
|
|
+ // this.uploadLoading1 = true;
|
|
|
+ // var file = data;
|
|
|
+ var credentials = {
|
|
|
+ accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
+ secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR"
|
|
|
+ }; //秘钥形式的登录上传
|
|
|
+ window.AWS.config.update(credentials);
|
|
|
+ window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
+
|
|
|
+ var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
|
|
|
+ var _this = this;
|
|
|
+
|
|
|
+ if (file) {
|
|
|
+ var params = {
|
|
|
+ Key:
|
|
|
+ file.name.split(".")[0] +
|
|
|
+ new Date().getTime() +
|
|
|
+ "." +
|
|
|
+ file.name.split(".")[file.name.split(".").length - 1],
|
|
|
+ ContentType: file.type,
|
|
|
+ Body: file,
|
|
|
+ "Access-Control-Allow-Credentials": "*",
|
|
|
+ ACL: "public-read"
|
|
|
+ }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
|
|
|
+ var options = {
|
|
|
+ partSize: 2048 * 1024 * 1024,
|
|
|
+ queueSize: 2,
|
|
|
+ leavePartsOnError: true
|
|
|
+ };
|
|
|
+ bucket
|
|
|
+ .upload(params, options)
|
|
|
+ .on("httpUploadProgress", function(evt) {
|
|
|
+ //这里可以写进度条
|
|
|
+ // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
|
|
|
+ })
|
|
|
+ .send(function(err, data) {
|
|
|
+ // _this.uploadLoading1 = false;
|
|
|
+ if (err) {
|
|
|
+ // var a = _this.$refs.upload1.uploadFiles;
|
|
|
+ // a.splice(a.length - 1, a.length);
|
|
|
+ this.loading = false;
|
|
|
+
|
|
|
+ _this.$message.error("上传失败");
|
|
|
+ } else {
|
|
|
+ //上传成功处理
|
|
|
+ // _this.unitJson[_this.unitIndex].chapterInfo[0].fileList1.push({
|
|
|
+ // name: file.name,
|
|
|
+ // url: data.Location,
|
|
|
+ // uid: file.uid
|
|
|
+ // });
|
|
|
+ // _this.imgChange();
|
|
|
+
|
|
|
+ // console.log('333',_this.titCon,data.Location);
|
|
|
+
|
|
|
+ _this.$emit("success", {
|
|
|
+ Tname: _this.titCon,
|
|
|
+ url: data.Location,
|
|
|
+ type: _this.type,
|
|
|
+ unitIndex: _this.unitIndex,
|
|
|
+ itemTaskIndex: _this.itemTaskIndex,
|
|
|
+ index1: _this.index1
|
|
|
});
|
|
|
- },
|
|
|
- beforeUpload(file) {
|
|
|
- // this.$refs.upload1.uploadFiles;
|
|
|
- // this.uploadLoading1 = true;
|
|
|
- // var file = data;
|
|
|
- var credentials = {
|
|
|
- accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
- secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR"
|
|
|
- }; //秘钥形式的登录上传
|
|
|
- window.AWS.config.update(credentials);
|
|
|
- window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
-
|
|
|
- var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
|
|
|
- var _this = this;
|
|
|
-
|
|
|
- if (file) {
|
|
|
- var params = {
|
|
|
- Key:
|
|
|
- file.name.split(".")[0] +
|
|
|
- new Date().getTime() +
|
|
|
- "." +
|
|
|
- file.name.split(".")[file.name.split(".").length - 1],
|
|
|
- ContentType: file.type,
|
|
|
- Body: file,
|
|
|
- "Access-Control-Allow-Credentials": "*",
|
|
|
- ACL: "public-read"
|
|
|
- }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
|
|
|
- var options = {
|
|
|
- partSize: 2048 * 1024 * 1024,
|
|
|
- queueSize: 2,
|
|
|
- leavePartsOnError: true
|
|
|
- };
|
|
|
- bucket
|
|
|
- .upload(params, options)
|
|
|
- .on("httpUploadProgress", function(evt) {
|
|
|
- //这里可以写进度条
|
|
|
- // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
|
|
|
- })
|
|
|
- .send(function(err, data) {
|
|
|
- // _this.uploadLoading1 = false;
|
|
|
- if (err) {
|
|
|
- // var a = _this.$refs.upload1.uploadFiles;
|
|
|
- // a.splice(a.length - 1, a.length);
|
|
|
- this.loading=false
|
|
|
-
|
|
|
- _this.$message.error("上传失败");
|
|
|
- } else {
|
|
|
- //上传成功处理
|
|
|
- // _this.unitJson[_this.unitIndex].chapterInfo[0].fileList1.push({
|
|
|
- // name: file.name,
|
|
|
- // url: data.Location,
|
|
|
- // uid: file.uid
|
|
|
- // });
|
|
|
- // _this.imgChange();
|
|
|
-
|
|
|
- // console.log('333',_this.titCon,data.Location);
|
|
|
-
|
|
|
- _this.$emit("success",{Tname:_this.titCon,url:data.Location,type:_this.type,unitIndex:_this.unitIndex,itemTaskIndex:_this.itemTaskIndex,index1:_this.index1})
|
|
|
- _this.handleClose()
|
|
|
- this.loading=false
|
|
|
-
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- open(type,data, unitIndex,itemTaskIndex,index1){
|
|
|
- if (type == 1) {
|
|
|
- this.titCon = data.name;
|
|
|
- this.loadHtmlFile(data.url)
|
|
|
- }
|
|
|
- console.log('itemTaskIndex',itemTaskIndex);
|
|
|
-
|
|
|
- this.index1=index1
|
|
|
- this.itemTaskIndex=itemTaskIndex
|
|
|
- this.unitIndex = unitIndex
|
|
|
- this.type = type
|
|
|
- this.CodeVisible = true
|
|
|
- },
|
|
|
- handleClose(){
|
|
|
- this.CodeVisible = false
|
|
|
- this.loading=false
|
|
|
- this.code = ''
|
|
|
- this.type = ''
|
|
|
- this.titCon = ''
|
|
|
- this.unitIndex = ''
|
|
|
- this.index1 = ''
|
|
|
- this.itemTaskIndex = ''
|
|
|
+ _this.handleClose();
|
|
|
+ this.loading = false;
|
|
|
}
|
|
|
- }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ open(type, data, unitIndex, itemTaskIndex, index1) {
|
|
|
+ if (type == 1) {
|
|
|
+ this.loading = true;
|
|
|
+ this.titCon = data.name;
|
|
|
+ this.loadHtmlFile(data.url);
|
|
|
+ }
|
|
|
+ console.log("itemTaskIndex", itemTaskIndex);
|
|
|
+
|
|
|
+ this.index1 = index1;
|
|
|
+ this.itemTaskIndex = itemTaskIndex;
|
|
|
+ this.unitIndex = unitIndex;
|
|
|
+ this.type = type;
|
|
|
+ this.CodeVisible = true;
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.CodeVisible = false;
|
|
|
+ this.loading = false;
|
|
|
+ this.code = "";
|
|
|
+ this.type = "";
|
|
|
+ this.titCon = "";
|
|
|
+ this.unitIndex = "";
|
|
|
+ this.index1 = "";
|
|
|
+ this.itemTaskIndex = "";
|
|
|
}
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -205,4 +216,4 @@ import axios from "axios"
|
|
|
.dialog_diy >>> .el-dialog__footer {
|
|
|
background: #fafafa;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
11wqe1