|
|
@@ -196,7 +196,7 @@
|
|
|
</el-button>
|
|
|
</el-tooltip>
|
|
|
<el-tooltip effect="light" content="文件列表" placement="top">
|
|
|
- <el-button v-if="!readonly" :icon="List" circle style="margin-right: 10px" @click="filelist = !filelist">
|
|
|
+ <el-button v-if="!readonly" :icon="List" circle style="margin-right: 10px" @click="handleButtonClick">
|
|
|
</el-button>
|
|
|
</el-tooltip>
|
|
|
<el-tooltip effect="light" content="模板库" placement="top">
|
|
|
@@ -278,11 +278,11 @@
|
|
|
</el-dialog>
|
|
|
<!-- 文件列表 -->
|
|
|
<el-dialog v-model="filelist" title="文件列表" :width="800">
|
|
|
- <el-switch v-model="filetype" size="small" active-text="文件" inactive-text="模板" @click="templateItmes" />
|
|
|
+ <el-switch v-model="filetype" size="small" active-text="文件" inactive-text="模板" @click="templateItems" />
|
|
|
<div class="demo-image">
|
|
|
- <div v-for="fit in fits" :key="fit" class="block">
|
|
|
- <span class="demonstration">{{ fit }}</span>
|
|
|
- <el-image style="width: 100px; height: 100px" :src="url" @click="templateItmes" />
|
|
|
+ <div v-for="name in names" :key="name.id" class="block">
|
|
|
+ <span class="demonstration">{{ name[1].id }}</span>
|
|
|
+ <el-image style="width: 100px; height: 100px" :src="name[1].url" @click="importFromJsonServer" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
@@ -300,6 +300,8 @@
|
|
|
</el-dialog>
|
|
|
<!-- 右键菜单 -->
|
|
|
<Contextmenu v-if="appInstance" :app="appInstance"></Contextmenu>
|
|
|
+ <!-- <TemplateItems v-if="showOtherComponent"></TemplateItems> -->
|
|
|
+ <span v-for="name in names"> {{ name }}</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -329,9 +331,11 @@ import {
|
|
|
QuestionFilled
|
|
|
} from '@element-plus/icons-vue'
|
|
|
import Contextmenu from './components/Contextmenu.vue'
|
|
|
+import TemplateItems from './components/TemplateItems.vue'
|
|
|
import { fontFamilyList, fontSizeList } from './constants'
|
|
|
import { ElMessage } from 'element-plus'
|
|
|
const currentInstance = getCurrentInstance();
|
|
|
+const showOtherComponent = ref(false);
|
|
|
const { axios } = currentInstance.appContext.config.globalProperties;
|
|
|
// 当前操作类型
|
|
|
const currentType = ref('selection')
|
|
|
@@ -601,7 +605,7 @@ const save = async () => {
|
|
|
// 'Content-Type': 'application/x-www-form-urlencoded',
|
|
|
},
|
|
|
body: JSON.stringify({
|
|
|
- // type: filetype.value, // true:代表普通保存,false:代表模板保存
|
|
|
+ type: filetype.value, // true:代表普通保存,false:代表模板保存
|
|
|
name: saveFileName.value,
|
|
|
data: app.exportJson()
|
|
|
})
|
|
|
@@ -613,53 +617,82 @@ const save = async () => {
|
|
|
}
|
|
|
}
|
|
|
//导入
|
|
|
-const fits = ['fill', 'contain', 'cover', 'none', 'scale-down']
|
|
|
-const url =
|
|
|
- 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
|
|
|
+const handleButtonClick = async () => {
|
|
|
+ await templateItems();
|
|
|
+ filelist.value = !filelist.value; // 设置为true以显示弹窗
|
|
|
+};
|
|
|
+let names = reactive(new Map())
|
|
|
+// const templateItems = async () => {
|
|
|
+// const requestBody = {
|
|
|
+// type: filetype.value,
|
|
|
+// };
|
|
|
+// try {
|
|
|
+// const response = await fetch('http://localhost:8080/api/template', {
|
|
|
+// method: 'POST',
|
|
|
+// headers: {
|
|
|
+// 'Content-Type': 'application/json',
|
|
|
+// },
|
|
|
+// body: JSON.stringify(requestBody), // 修改：使用JSON.stringify将requestBody对象转换为JSON字符串
|
|
|
+// });
|
|
|
|
|
|
-let items = ['']
|
|
|
-const templateItmes = async () => {
|
|
|
+// if (response.ok) {
|
|
|
+// const jsonData = await response.json();
|
|
|
+// // jsonData.data // 可以保留，用于存储模板项的键列表
|
|
|
+// const keyValuePairs = Object.entries(jsonData.data).map(([key, value]) => ({ key, value }));
|
|
|
+// for (let i = 0; i < keyValuePairs.length; i++) {
|
|
|
+// const { key, value } = keyValuePairs[i]; // 使用解构赋值简化变量声明
|
|
|
+// const json = JSON.parse(value).data.elements;
|
|
|
+// if (json.length === 2) {// 使用三等号（===）进行严格相等比较
|
|
|
+// url = json[0].url;
|
|
|
+// console.log(url);
|
|
|
+// } else {
|
|
|
+// console.log(json);
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// ElMessage.success('获取成功');
|
|
|
+// } catch (error) {
|
|
|
+// ElMessage.error('获取模板失败');
|
|
|
+// console.log(error);
|
|
|
+// }
|
|
|
+// };
|
|
|
+
|
|
|
+const templateItems = async () => {
|
|
|
const requestBody = {
|
|
|
type: filetype.value,
|
|
|
- }
|
|
|
+ };
|
|
|
+
|
|
|
+ const defaultUrl = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'; // 替换为实际的默认URL
|
|
|
+
|
|
|
try {
|
|
|
const response = await fetch('http://localhost:8080/api/template', {
|
|
|
method: 'POST',
|
|
|
headers: {
|
|
|
- 'Content-Type': 'application/json'
|
|
|
- // 'Content-Type': 'application/x-www-form-urlencoded',
|
|
|
+ 'Content-Type': 'application/json',
|
|
|
},
|
|
|
- body: { type: requestBody, }
|
|
|
- })
|
|
|
+ body: JSON.stringify(requestBody),
|
|
|
+ });
|
|
|
+
|
|
|
if (response.ok) {
|
|
|
- const jsonData = await response.json()
|
|
|
- items = Object.keys(jsonData.data)
|
|
|
- Object.values(jsonData.data)
|
|
|
- const keyValuePairs = Object.entries(jsonData.data).map(([key, value]) => ({ key, value }));
|
|
|
- // console.log(keyValuePairs)
|
|
|
- for (let i = 0; i < keyValuePairs.length; i++) {
|
|
|
- const key = keyValuePairs[i].key;
|
|
|
- const value = keyValuePairs[i].value;
|
|
|
- // console.log(key, value);
|
|
|
- // Object.prototype.hasOwnProperty.call()
|
|
|
- const json = JSON.parse(value).data.elements
|
|
|
- if (json.length == 2) {
|
|
|
- console.log(json[0].url)
|
|
|
- } else {
|
|
|
- console.log(json)
|
|
|
- }
|
|
|
+ const jsonData = await response.json();
|
|
|
+
|
|
|
+ for (const [key, value] of Object.entries(jsonData.data)) {
|
|
|
+ const json = JSON.parse(value).data.elements;
|
|
|
|
|
|
+ const url = json.length === 2 && json[0].url ? json[0].url : defaultUrl;
|
|
|
+
|
|
|
+ names.set(key, { id: key, url });
|
|
|
}
|
|
|
- filelist.value = true
|
|
|
+ console.log([...names.values()]); // 打印Map的值列表以查看结果
|
|
|
+ console.log([...names.values()]); // 打印Map的值列表以查看结果
|
|
|
}
|
|
|
- ElMessage.success('获取成功')
|
|
|
+ ElMessage.success('获取成功');
|
|
|
} catch (error) {
|
|
|
- ElMessage.error('获取模板失败')
|
|
|
- console.log(error)
|
|
|
+ ElMessage.error('获取模板失败');
|
|
|
+ console.log(error);
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
-// 重新生成导出图片
|
|
|
const reRenderExportImage = () => {
|
|
|
exportImageUrl.value = app.exportImage({
|
|
|
renderBg: exportRenderBackground.value,
|
