1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<template>
<a-page-header-wrapper title="转换为C语言字符串">
<a-card :bordered="false">
<a-row :gutter="{ sm: 24, md: 24, lg: 24, xl: 24 }">
<a-col :md="12" :sm="24">
<a-textarea
v-model="source"
placeholder="请将需要转换的文本粘贴到这里"
:auto-size="{ minRows: 25, maxRows: 25 }"
/>
<div style="margin: 10px">
<a-button @click="getConvertString">开始转换</a-button>
</div>
</a-col>
<a-col :md="12" :sm="24">
<a-textarea
v-model="target"
:disabled="true"
placeholder="这里是转换后的结果"
:auto-size="{ minRows: 25, maxRows: 25 }"
/>
<div style="margin: 10px">
<a-form layout="inline">
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
<a-col :md="16" :sm="24">
<a-form-item label="文件名" v-decorator="['filename']" :required="true">
<a-input v-model="filename" placeholder="请输入" />
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<span class="submitButtons">
<a-button
type="primary"
@click="downloadFile"
>
下载文件
</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
</a-col>
</a-row>
</a-card>
</a-page-header-wrapper>
</template>
<script>
import {
Avatar,
Row,
Col,
Card,
List,
Button,
Form,
Icon,
Table,
Divider,
Dropdown,
Input,
Select,
Modal,
DatePicker,
message,
} from "ant-design-vue";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import DescriptionItem from "@/components/DescriptionItem";
import { getConvertString } from "@/api/openapi";
export default {
name: "ToolIndex",
data: () => ({
visible: false,
confirmLoading: false,
filename: null,
source: null,
target: null,
}),
components: {
APageHeaderWrapper: PageHeaderWrapper,
ARow: Row,
ACol: Col,
ACard: Card,
ATextarea: Input.TextArea,
AModal: Modal,
AAvatar: Avatar,
ACardGrid: Card.Grid,
ACardMeta: Card.Meta,
AList: List,
AButton: Button,
AForm: Form,
AFormItem: Form.Item,
AIcon: Icon,
ATable: Table,
ADescriptionItem: DescriptionItem,
ADivider: Divider,
ADropdown: Dropdown,
AInput: Input,
ASelect: Select,
AOption: Select.Option,
ARangePicker: DatePicker.RangePicker,
},
methods: {
createFile(content, filename) {
const a = document.createElement("a");
const blob = new Blob([content]);
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
},
downloadFile() {
this.visible = true;
if (!this.source) return message.error("输入内容不能为空");
this.createFile(this.target, this.filename);
},
getConvertString() {
getConvertString({ string: this.source })
.then((res) => {
this.target = res.data;
message.success(res.msg);
})
.catch((err) => {
message.error(err.msg);
});
},
},
created() {},
};
</script>
<style lang="less">
@import url("styles/tableList.less");
</style>