@ajaxjs/ui 1.0.6 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/form/FileUploader/FileUploader.js +104 -0
- package/dist/components/form/FileUploader/FileUploader.js.map +1 -0
- package/dist/components/form/FileUploader/FileUploader.less +55 -0
- package/dist/components/form/FileUploader/FileUploader.ts +121 -0
- package/dist/components/form/FileUploader/FileUploader.vue +26 -0
- package/dist/components/form/HtmlEditor/HtmlEditor.js +75 -78
- package/dist/components/form/HtmlEditor/HtmlEditor.js.map +1 -1
- package/dist/components/form/HtmlEditor/HtmlEditor.less +190 -6
- package/dist/components/form/HtmlEditor/HtmlEditor.ts +83 -85
- package/dist/components/form/HtmlEditor/HtmlEditor.vue +23 -23
- package/dist/components/widgets/ImageEnlarger.vue +77 -20
- package/package.json +7 -10
- package/.browserslistrc +0 -3
- package/.eslintrc.js +0 -25
- package/babel.config.js +0 -5
- package/public/favicon.ico +0 -0
- package/public/index.html +0 -24
- package/src/App.vue +0 -32
- package/src/assets/logo.png +0 -0
- package/src/components/form/AjSelect.vue +0 -33
- package/src/components/form/HtmlEditor/HtmlEditor.less +0 -161
- package/src/components/form/HtmlEditor/HtmlEditor.ts +0 -339
- package/src/components/form/HtmlEditor/HtmlEditor.vue +0 -70
- package/src/components/form/HtmlEditor/html-editor-HtmlSanitizer.js +0 -103
- package/src/components/form/TreeLikeSelect.vue +0 -125
- package/src/components/list/attachment-picture-list.ts +0 -57
- package/src/components/list/list.js +0 -227
- package/src/components/list/list.ts +0 -261
- package/src/components/widgets/AccordionMenu.vue +0 -138
- package/src/components/widgets/AdjustFontSize.vue +0 -66
- package/src/components/widgets/AjAvatar.vue +0 -42
- package/src/components/widgets/Article.vue +0 -49
- package/src/components/widgets/BaiduSearch.vue +0 -50
- package/src/components/widgets/Expander.vue +0 -65
- package/src/components/widgets/ImageEnlarger.vue +0 -42
- package/src/components/widgets/OpacityBanner.vue +0 -124
- package/src/components/widgets/ProcessLine.vue +0 -133
- package/src/globalDeclare/shims.d.ts +0 -4
- package/src/index.ts +0 -8
- package/src/main.ts +0 -12
- package/src/pages/Nav.vue +0 -23
- package/src/pages/common.less +0 -10
- package/src/pages/demo/Article.vue +0 -30
- package/src/pages/demo/Form.vue +0 -35
- package/src/pages/demo/Wdigets.vue +0 -168
- package/src/router/index.js +0 -39
- package/src/router/index.js.map +0 -1
- package/src/router/index.ts +0 -39
- package/src/shims-tsx.d.ts +0 -13
- package/src/shims-vue.d.ts +0 -4
- package/src/style/common-functions.less +0 -171
- package/src/style/reset.less +0 -18
- package/src/views/About.vue +0 -5
- package/src/views/Home.vue +0 -49
- package/src/views/desktop/Desktop.vue +0 -251
- package/src/views/desktop/Window.vue +0 -62
- package/src/views/desktop/desktop.md +0 -14
- package/tsconfig.json +0 -30
- package/vue.config.js +0 -17
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="aj-form-html-editor">
|
|
3
|
-
<ul class="toolbar" @click="onToolBarClk">
|
|
4
|
-
<li class="dorpdown">
|
|
5
|
-
<i title="字体" class="fa-font"></i>
|
|
6
|
-
<div class="fontfamilyChoser" @click="onFontfamilyChoserClk">
|
|
7
|
-
<a style="font-family: '宋体'">宋体</a>
|
|
8
|
-
<a style="font-family: '黑体'">黑体</a>
|
|
9
|
-
<a style="font-family: '楷体'">楷体</a>
|
|
10
|
-
<a style="font-family: '隶书'">隶书</a>
|
|
11
|
-
<a style="font-family: '幼圆'">幼圆</a>
|
|
12
|
-
<a style="font-family: 'Microsoft YaHei'">Microsoft YaHei</a>
|
|
13
|
-
<a style="font-family: Arial">Arial</a>
|
|
14
|
-
<a style="font-family: 'Arial Narrow'">Arial Narrow</a>
|
|
15
|
-
<a style="font-family: 'Arial Black'">Arial Black</a>
|
|
16
|
-
<a style="font-family: 'Comic Sans MS'">Comic Sans MS</a>
|
|
17
|
-
<a style="font-family: Courier">Courier</a>
|
|
18
|
-
<a style="font-family: System">System</a>
|
|
19
|
-
<a style="font-family: 'Times New Roman'">Times New Roman</a>
|
|
20
|
-
<a style="font-family: Verdana">Verdana</a>
|
|
21
|
-
</div>
|
|
22
|
-
</li>
|
|
23
|
-
<li class="dorpdown">
|
|
24
|
-
<i title="字号" class="fa-header"></i>
|
|
25
|
-
<div class="fontsizeChoser" @click="onFontsizeChoserClk">
|
|
26
|
-
<a style="font-size: xx-small; ">极小</a>
|
|
27
|
-
<a style="font-size: x-small; ">特小</a>
|
|
28
|
-
<a style="font-size: small; ">小</a>
|
|
29
|
-
<a style="font-size: medium; ">中</a>
|
|
30
|
-
<a style="font-size: large; ">大</a>
|
|
31
|
-
<a style="font-size: x-large; ">特大</a>
|
|
32
|
-
<a style="font-size: xx-large; line-height: 140%">极大</a>
|
|
33
|
-
</div>
|
|
34
|
-
</li>
|
|
35
|
-
<li><i title="加粗" class="bold fa-bold"></i></li>
|
|
36
|
-
<li><i title="斜体" class="italic fa-italic"></i></li>
|
|
37
|
-
<li><i title="下划线" class="underline fa-underline"></i></li>
|
|
38
|
-
<li><i title="左对齐" class="justifyleft fa-align-left"></i></li>
|
|
39
|
-
<li><i title="中间对齐" class="justifycenter fa-align-center"></i></li>
|
|
40
|
-
<li><i title="右对齐" class="justifyright fa-align-right"></i></li>
|
|
41
|
-
<li><i title="数字编号" class="insertorderedlist fa-list-ol"></i></li>
|
|
42
|
-
<li><i title="项目编号" class="insertunorderedlist fa-list-ul"></i></li>
|
|
43
|
-
<li><i title="增加缩进" class="outdent fa-outdent"></i></li>
|
|
44
|
-
<li><i title="减少缩进" class="indent fa-indent"></i></li>
|
|
45
|
-
<li class="dorpdown">
|
|
46
|
-
<i title="字体颜色" class="fa-paint-brush"></i>
|
|
47
|
-
<div class="fontColor colorPicker" v-html="createColorPickerHTML()" @click="onFontColorPicker"></div>
|
|
48
|
-
</li>
|
|
49
|
-
<li class="dorpdown">
|
|
50
|
-
<i title="背景颜色" class="fa-pencil"></i>
|
|
51
|
-
<div class="bgColor colorPicker" v-html="createColorPickerHTML()" @click="onFontBgColorPicker"></div>
|
|
52
|
-
</li>
|
|
53
|
-
<li><i title="增加链接" class="createLink fa-link"></i></li>
|
|
54
|
-
<li><i title="增加图片" class="insertImage fa-file-image-o"></i></li>
|
|
55
|
-
<li><i title="一键存图" class="saveRemoteImage2Local fa-hdd-o"></i></li>
|
|
56
|
-
<li><i title="清理 HTML" class="cleanHTML fa-eraser"></i></li>
|
|
57
|
-
<li><i title="切换到代码" class="switchMode fa-code"></i></li>
|
|
58
|
-
</ul>
|
|
59
|
-
|
|
60
|
-
<div class="editorBody">
|
|
61
|
-
<iframe srcdoc="<html><body></body></html>"></iframe>
|
|
62
|
-
<slot></slot>
|
|
63
|
-
</div>
|
|
64
|
-
<!-- <aj-form-popup-upload ref="uploadLayer" :upload-url="uploadImageActionUrl"></aj-form-popup-upload> -->
|
|
65
|
-
</div>
|
|
66
|
-
</template>
|
|
67
|
-
|
|
68
|
-
<script lang="ts" src="./HtmlEditor.ts"></script>
|
|
69
|
-
|
|
70
|
-
<style lang="less" src="./HtmlEditor.less"></style>
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
// https://github.com/jitbit/HtmlSanitizer/blob/master/HtmlSanitizer.js
|
|
2
|
-
// @ts-ignore
|
|
3
|
-
HtmlSanitizer = new (function foo() {
|
|
4
|
-
var tagWhitelist_ = {
|
|
5
|
-
'A': true, 'ABBR': true, 'B': true, 'BLOCKQUOTE': true, 'BODY': true, 'BR': true, 'CENTER': true, 'CODE': true, 'DIV': true, 'EM': true, 'FONT': true,
|
|
6
|
-
'H1': true, 'H2': true, 'H3': true, 'H4': true, 'H5': true, 'H6': true, 'HR': true, 'I': true, 'IMG': true, 'LABEL': true, 'LI': true, 'OL': true, 'P': true, 'PRE': true,
|
|
7
|
-
'SMALL': true, 'SOURCE': true, 'SPAN': true, 'STRONG': true, 'TABLE': true, 'TBODY': true, 'TR': true, 'TD': true, 'TH': true, 'THEAD': true, 'UL': true, 'U': true, 'VIDEO': true
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
var contentTagWhiteList_ = { 'FORM': true }; //tags that will be converted to DIVs
|
|
11
|
-
var attributeWhitelist_ = { 'align': true, 'color': true, 'controls': true, 'height': true, 'href': true, 'src': true, 'style': false, 'target': true, 'title': true, 'type': true, 'width': true };
|
|
12
|
-
var cssWhitelist_ = { 'color': true, 'background-color': true, 'font-size': true, 'text-align': true, 'text-decoration': true, 'font-weight': true };
|
|
13
|
-
var schemaWhiteList_ = ['http:', 'https:', 'data:', 'm-files:', 'file:', 'ftp:']; //which "protocols" are allowed in "href", "src" etc
|
|
14
|
-
var uriAttributes_ = { 'href': true, 'action': true };
|
|
15
|
-
// @ts-ignore
|
|
16
|
-
this.SanitizeHtml = function (input) {
|
|
17
|
-
input = input.trim();
|
|
18
|
-
if (input == "") return ""; //to save performance and not create iframe
|
|
19
|
-
|
|
20
|
-
//firefox "bogus node" workaround
|
|
21
|
-
if (input == "<br>") return "";
|
|
22
|
-
|
|
23
|
-
var iframe = document.createElement('iframe');
|
|
24
|
-
if (iframe['sandbox'] === undefined) {
|
|
25
|
-
alert('Your browser does not support sandboxed iframes. Please upgrade to a modern browser.');
|
|
26
|
-
return '';
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
iframe['sandbox'] = 'allow-same-origin';
|
|
30
|
-
iframe.style.display = 'none';
|
|
31
|
-
document.body.appendChild(iframe); // necessary so the iframe contains a document
|
|
32
|
-
|
|
33
|
-
var iframedoc = iframe.contentDocument || iframe.contentWindow.document;
|
|
34
|
-
if (iframedoc.body == null) iframedoc.write("<body></body>"); // null in IE
|
|
35
|
-
iframedoc.body.innerHTML = input;
|
|
36
|
-
|
|
37
|
-
function makeSanitizedCopy(node) {
|
|
38
|
-
if (node.nodeType == Node.TEXT_NODE) {
|
|
39
|
-
var newNode = node.cloneNode(true);
|
|
40
|
-
} else if (node.nodeType == Node.ELEMENT_NODE && (tagWhitelist_[node.tagName] || contentTagWhiteList_[node.tagName])) {
|
|
41
|
-
|
|
42
|
-
//remove useless empty spans (lots of those when pasting from MS Outlook)
|
|
43
|
-
if ((node.tagName == "SPAN" || node.tagName == "B" || node.tagName == "I" || node.tagName == "U")
|
|
44
|
-
&& node.innerHTML.trim() == "") {
|
|
45
|
-
return document.createDocumentFragment();
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
if (contentTagWhiteList_[node.tagName])
|
|
49
|
-
newNode = iframedoc.createElement('DIV'); //convert to DIV
|
|
50
|
-
else
|
|
51
|
-
newNode = iframedoc.createElement(node.tagName);
|
|
52
|
-
|
|
53
|
-
for (var i = 0; i < node.attributes.length; i++) {
|
|
54
|
-
var attr = node.attributes[i];
|
|
55
|
-
if (attributeWhitelist_[attr.name]) {
|
|
56
|
-
if (attr.name == "style") {
|
|
57
|
-
for (s = 0; s < node.style.length; s++) {
|
|
58
|
-
var styleName = node.style[s];
|
|
59
|
-
if (cssWhitelist_[styleName])
|
|
60
|
-
newNode.style.setProperty(styleName, node.style.getPropertyValue(styleName));
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
else {
|
|
64
|
-
if (uriAttributes_[attr.name]) { //if this is a "uri" attribute, that can have "javascript:" or something
|
|
65
|
-
if (attr.value.indexOf(":") > -1 && !startsWithAny(attr.value, schemaWhiteList_))
|
|
66
|
-
continue;
|
|
67
|
-
}
|
|
68
|
-
newNode.setAttribute(attr.name, attr.value);
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
for (i = 0; i < node.childNodes.length; i++) {
|
|
73
|
-
var subCopy = makeSanitizedCopy(node.childNodes[i]);
|
|
74
|
-
newNode.appendChild(subCopy, false);
|
|
75
|
-
}
|
|
76
|
-
} else {
|
|
77
|
-
newNode = document.createDocumentFragment();
|
|
78
|
-
}
|
|
79
|
-
return newNode;
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
var resultElement = makeSanitizedCopy(iframedoc.body);
|
|
83
|
-
document.body.removeChild(iframe);
|
|
84
|
-
return resultElement.innerHTML
|
|
85
|
-
.replace(/<br[^>]*>(\S)/g, "<br>\n$1")
|
|
86
|
-
.replace(/div><div/g, "div>\n<div"); //replace is just for cleaner code
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
function startsWithAny(str, substrings) {
|
|
90
|
-
for (var i = 0; i < substrings.length; i++) {
|
|
91
|
-
if (str.indexOf(substrings[i]) == 0) {
|
|
92
|
-
return true;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
return false;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
this.AllowedTags = tagWhitelist_;
|
|
100
|
-
this.AllowedAttributes = attributeWhitelist_;
|
|
101
|
-
this.AllowedCssStyles = cssWhitelist_;
|
|
102
|
-
this.AllowedSchemas = schemaWhiteList_;
|
|
103
|
-
});
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<select :name="fieldName" class="aj-select" @change="onSelected" style="min-width:180px;"></select>
|
|
3
|
-
</template>
|
|
4
|
-
|
|
5
|
-
<script lang="ts">
|
|
6
|
-
// interface TreeOption {
|
|
7
|
-
// /**
|
|
8
|
-
// * 是否创建全部
|
|
9
|
-
// */
|
|
10
|
-
// makeAllOption?: boolean;
|
|
11
|
-
|
|
12
|
-
// /**
|
|
13
|
-
// * 默认为"所有分类", 或者你在这里自定义一个名字
|
|
14
|
-
// */
|
|
15
|
-
// allOptionName?: string;
|
|
16
|
-
// }
|
|
17
|
-
|
|
18
|
-
// /**
|
|
19
|
-
// * 下拉分类选择器,异步请求远端获取分类数据
|
|
20
|
-
// */
|
|
21
|
-
// export default {
|
|
22
|
-
// props: {
|
|
23
|
-
// fieldName: { type: String, required: false, default: "catalogId" }, // 表单 name,字段名
|
|
24
|
-
// apiUrl: {
|
|
25
|
-
// type: String,
|
|
26
|
-
// default() {
|
|
27
|
-
// return ctx + "/admin/tree-like/";
|
|
28
|
-
// },
|
|
29
|
-
// },
|
|
30
|
-
// isAutoLoad: { type: Boolean, default: true },
|
|
31
|
-
// isAutoJump: Boolean,
|
|
32
|
-
// initFieldValue: String,
|
|
33
|
-
// },
|
|
34
|
-
|
|
35
|
-
// data() {
|
|
36
|
-
// return {
|
|
37
|
-
// fieldValue: this.initFieldValue,
|
|
38
|
-
// };
|
|
39
|
-
// },
|
|
40
|
-
// mounted(): void {
|
|
41
|
-
// this.isAutoLoad && this.getData();
|
|
42
|
-
// },
|
|
43
|
-
// methods: {
|
|
44
|
-
// onSelected(ev: Event): void {
|
|
45
|
-
// let el: HTMLSelectElement = <HTMLSelectElement>ev.target;
|
|
46
|
-
// this.fieldValue = el.selectedOptions[0].value;
|
|
47
|
-
|
|
48
|
-
// if (this.isAutoJump)
|
|
49
|
-
// location.assign("?" + this.fieldName + "=" + this.fieldValue);
|
|
50
|
-
// else
|
|
51
|
-
// this.BUS && this.BUS.$emit("aj-tree-catelog-select-change", ev, this);
|
|
52
|
-
// },
|
|
53
|
-
|
|
54
|
-
// getData(): void {
|
|
55
|
-
// let fn = (j: RepsonseResult) => {
|
|
56
|
-
// let arr = [{ id: 0, name: "请选择分类" }];
|
|
57
|
-
// rendererOption(
|
|
58
|
-
// <TreeNode[]>arr.concat(j.result),
|
|
59
|
-
// <HTMLSelectElement>this.$el,
|
|
60
|
-
// this.fieldValue,
|
|
61
|
-
// { makeAllOption: false }
|
|
62
|
-
// );
|
|
63
|
-
|
|
64
|
-
// if (this.fieldValue)
|
|
65
|
-
// // 有指定的选中值
|
|
66
|
-
// //@ts-ignore
|
|
67
|
-
// form.utils.selectOption.call(this, this.fieldValue);
|
|
68
|
-
// };
|
|
69
|
-
|
|
70
|
-
// // aj.xhr.get(this.ajResources.ctx + this.apiUrl + "/admin/tree-like/getListAndSubByParentId/", fn);
|
|
71
|
-
// xhr.get(this.apiUrl, fn);
|
|
72
|
-
// },
|
|
73
|
-
// },
|
|
74
|
-
// };
|
|
75
|
-
|
|
76
|
-
// /**
|
|
77
|
-
// * 渲染 Option 标签的 DOM
|
|
78
|
-
// *
|
|
79
|
-
// * @param jsonArray
|
|
80
|
-
// * @param select
|
|
81
|
-
// * @param selectedId
|
|
82
|
-
// * @param cfg
|
|
83
|
-
// */
|
|
84
|
-
// export function rendererOption(
|
|
85
|
-
// jsonArray: TreeNode[],
|
|
86
|
-
// select: HTMLSelectElement,
|
|
87
|
-
// selectedId?: string,
|
|
88
|
-
// cfg?: TreeOption
|
|
89
|
-
// ): void {
|
|
90
|
-
// if (cfg && cfg.makeAllOption) {
|
|
91
|
-
// let option: HTMLOptionElement = document.createElement("option");
|
|
92
|
-
// option.innerHTML = cfg.allOptionName || "全部分类";
|
|
93
|
-
// select.appendChild(option);
|
|
94
|
-
// }
|
|
95
|
-
|
|
96
|
-
// let treeNode: TreeNode | null = toTreeMap(jsonArray);
|
|
97
|
-
// if (treeNode) {
|
|
98
|
-
// // 生成 option
|
|
99
|
-
// let temp: DocumentFragment = document.createDocumentFragment();
|
|
100
|
-
// console.log(treeNode);
|
|
101
|
-
|
|
102
|
-
// output(<TreeNode>treeNode, (node: TreeNode, nodeId: string) => {
|
|
103
|
-
// let option: HTMLOptionElement = document.createElement("option"); // 节点
|
|
104
|
-
// option.value = nodeId;
|
|
105
|
-
|
|
106
|
-
// if (selectedId && selectedId == nodeId)
|
|
107
|
-
// // 选中的
|
|
108
|
-
// option.selected = true;
|
|
109
|
-
|
|
110
|
-
// option.dataset["pid"] = node.pid + "";
|
|
111
|
-
// //option.style= "padding-left:" + (node.level - 1) +"rem;";
|
|
112
|
-
// option.innerHTML =
|
|
113
|
-
// new Array(node.level * 5).join(" ") +
|
|
114
|
-
// (node.level == 1 ? "" : "└─") +
|
|
115
|
-
// node.name;
|
|
116
|
-
// temp.appendChild(option);
|
|
117
|
-
// });
|
|
118
|
-
|
|
119
|
-
// select.appendChild(temp);
|
|
120
|
-
// }
|
|
121
|
-
// }
|
|
122
|
-
</script>
|
|
123
|
-
|
|
124
|
-
<style lang="less" scoped>
|
|
125
|
-
</style>
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
// interface AttachmentPictureList extends Ajax {
|
|
2
|
-
// delImgUrl: string;
|
|
3
|
-
// pics: BaseObject[];
|
|
4
|
-
// }
|
|
5
|
-
|
|
6
|
-
// /**
|
|
7
|
-
// * 相册列表
|
|
8
|
-
// */
|
|
9
|
-
// Vue.component('aj-attachment-picture-list', {
|
|
10
|
-
// template: `
|
|
11
|
-
// <table>
|
|
12
|
-
// <tr>
|
|
13
|
-
// <td>
|
|
14
|
-
// <div class="label">相册图:</div>
|
|
15
|
-
// <ul>
|
|
16
|
-
// <li v-for="pic in pics" style="float:left;margin-right:1%;text-align:center;">
|
|
17
|
-
// <a :href="picCtx + pic.path" target="_blank"><img :src="picCtx + pic.path" style="max-width: 100px;max-height: 100px;" /></a><br />
|
|
18
|
-
// <a href="###" @click="delPic(pic.id);">删 除</a>
|
|
19
|
-
// </li>
|
|
20
|
-
// </ul>
|
|
21
|
-
// </td>
|
|
22
|
-
// <td>
|
|
23
|
-
// <aj-xhr-upload ref="attachmentPictureUpload" :action="uploadUrl" :is-img-upload="true" :img-place="blankBg"></aj-xhr-upload>
|
|
24
|
-
// </td>
|
|
25
|
-
// </tr>
|
|
26
|
-
// </table>
|
|
27
|
-
// `,
|
|
28
|
-
// props: {
|
|
29
|
-
// picCtx: String,
|
|
30
|
-
// uploadUrl: String,
|
|
31
|
-
// blankBg: String,
|
|
32
|
-
// delImgUrl: String,
|
|
33
|
-
// apiUrl: String
|
|
34
|
-
// },
|
|
35
|
-
// data() {
|
|
36
|
-
// return {
|
|
37
|
-
// pics: []
|
|
38
|
-
// };
|
|
39
|
-
// },
|
|
40
|
-
// mounted(): void {
|
|
41
|
-
// this.getData();
|
|
42
|
-
// this.$refs.attachmentPictureUpload.uploadOk_callback = this.getData;
|
|
43
|
-
// },
|
|
44
|
-
// methods: {
|
|
45
|
-
// getData(this: AttachmentPictureList): void {
|
|
46
|
-
// aj.xhr.get(this.apiUrl, (j: RepsonseResult) => this.pics = j.result);
|
|
47
|
-
// },
|
|
48
|
-
// delPic(this: AttachmentPictureList, picId: string): void {
|
|
49
|
-
// aj.showConfirm("确定删除相册图片?", () => {
|
|
50
|
-
// aj.xhr.dele(this.delImgUrl + picId + "/", (j: RepsonseResult) => {
|
|
51
|
-
// if (j.isOk)
|
|
52
|
-
// this.getData();// 刷新
|
|
53
|
-
// });
|
|
54
|
-
// });
|
|
55
|
-
// }
|
|
56
|
-
// }
|
|
57
|
-
// });
|
|
@@ -1,227 +0,0 @@
|
|
|
1
|
-
// namespace aj.list {
|
|
2
|
-
// /**
|
|
3
|
-
// * 分页列表专用的结果数据
|
|
4
|
-
// */
|
|
5
|
-
// interface PageListRepsonseResult extends RepsonseResult {
|
|
6
|
-
// /**
|
|
7
|
-
// * 结果总数
|
|
8
|
-
// */
|
|
9
|
-
// total: number;
|
|
10
|
-
// }
|
|
11
|
-
// /**
|
|
12
|
-
// * 列表数据
|
|
13
|
-
// */
|
|
14
|
-
// interface DataStore extends Ajax {
|
|
15
|
-
// /**
|
|
16
|
-
// * 是否分页,false=读取所有数据
|
|
17
|
-
// */
|
|
18
|
-
// isPage: boolean;
|
|
19
|
-
// pageStart: number;
|
|
20
|
-
// pageSize: number;
|
|
21
|
-
// initPageSize: number;
|
|
22
|
-
// total: number;
|
|
23
|
-
// /**
|
|
24
|
-
// * 请求结果
|
|
25
|
-
// */
|
|
26
|
-
// result: BaseObject[];
|
|
27
|
-
// totalPage: number;
|
|
28
|
-
// currentPage: number;
|
|
29
|
-
// /**
|
|
30
|
-
// * 默认的分页参数其名字
|
|
31
|
-
// */
|
|
32
|
-
// pageParamNames: string[];
|
|
33
|
-
// /**
|
|
34
|
-
// * 计算分页
|
|
35
|
-
// */
|
|
36
|
-
// count(): void;
|
|
37
|
-
// }
|
|
38
|
-
// /**
|
|
39
|
-
// * 本地数据仓库
|
|
40
|
-
// * 一般情况下不会单独使用这个组件
|
|
41
|
-
// */
|
|
42
|
-
// export var datastore = {
|
|
43
|
-
// props: {
|
|
44
|
-
// apiUrl: { type: String, required: true }, // JSON 接口地址
|
|
45
|
-
// isPage: { type: Boolean, default: true },
|
|
46
|
-
// initPageSize: { type: Number, required: false, default: 9 },
|
|
47
|
-
// isAutoLoad: { type: Boolean, default: true },
|
|
48
|
-
// baseParam: { type: Object, default() { return {}; } },
|
|
49
|
-
// pageParamNames: { type: Array, default() { return ['start', 'limit']; } }, // 默认的分页参数其名字
|
|
50
|
-
// onLoad: Function
|
|
51
|
-
// },
|
|
52
|
-
// data(this: DataStore) {
|
|
53
|
-
// return {
|
|
54
|
-
// result: [],
|
|
55
|
-
// extraParam: {}, // 与 baseParam 合并后每次请求可发送的,可以修改的
|
|
56
|
-
// pageSize: this.initPageSize,
|
|
57
|
-
// total: 0,
|
|
58
|
-
// totalPage: 0,
|
|
59
|
-
// pageStart: 0,
|
|
60
|
-
// currentPage: 0
|
|
61
|
-
// };
|
|
62
|
-
// },
|
|
63
|
-
// methods: {
|
|
64
|
-
// /**
|
|
65
|
-
// * 分页,跳到第几页,下拉控件传入指定的页码
|
|
66
|
-
// *
|
|
67
|
-
// * @param this
|
|
68
|
-
// * @param ev
|
|
69
|
-
// */
|
|
70
|
-
// jumpPageBySelect(this: DataStore, ev: Event): void {
|
|
71
|
-
// let selectEl: HTMLSelectElement = <HTMLSelectElement>ev.target;
|
|
72
|
-
// let currentPage: string = selectEl.options[selectEl.selectedIndex].value;
|
|
73
|
-
// this.pageStart = (Number(currentPage) - 1) * this.pageSize;
|
|
74
|
-
// this.getData();
|
|
75
|
-
// },
|
|
76
|
-
// /**
|
|
77
|
-
// * PageSize 改变时候重新分页
|
|
78
|
-
// *
|
|
79
|
-
// * @param this
|
|
80
|
-
// * @param ev
|
|
81
|
-
// */
|
|
82
|
-
// onPageSizeChange(this: DataStore, ev: Event): void {
|
|
83
|
-
// this.pageSize = Number((<HTMLInputElement>ev.target).value);
|
|
84
|
-
// this.count();
|
|
85
|
-
// this.getData();
|
|
86
|
-
// },
|
|
87
|
-
// count(this: DataStore): void {
|
|
88
|
-
// let totalPage: number = this.total / this.pageSize, yushu: number = this.total % this.pageSize;
|
|
89
|
-
// this.totalPage = parseInt(String(yushu == 0 ? totalPage : totalPage + 1));
|
|
90
|
-
// //@ts-ignore
|
|
91
|
-
// this.currentPage = parseInt((this.pageStart / this.pageSize) + 1);
|
|
92
|
-
// },
|
|
93
|
-
// /**
|
|
94
|
-
// * 前一页
|
|
95
|
-
// *
|
|
96
|
-
// * @param this
|
|
97
|
-
// */
|
|
98
|
-
// previousPage(this: DataStore): void {
|
|
99
|
-
// this.pageStart -= this.pageSize;
|
|
100
|
-
// //@ts-ignore
|
|
101
|
-
// this.currentPage = parseInt((this.pageStart / this.pageSize) + 1);
|
|
102
|
-
// this.getData();
|
|
103
|
-
// },
|
|
104
|
-
// /**
|
|
105
|
-
// * 下一页
|
|
106
|
-
// *
|
|
107
|
-
// * @param this
|
|
108
|
-
// */
|
|
109
|
-
// nextPage(this: DataStore): void {
|
|
110
|
-
// this.pageStart += this.pageSize;
|
|
111
|
-
// this.currentPage = (this.pageStart / this.pageSize) + 1;
|
|
112
|
-
// this.getData();
|
|
113
|
-
// }
|
|
114
|
-
// }
|
|
115
|
-
// };
|
|
116
|
-
// /**
|
|
117
|
-
// * 列表控件
|
|
118
|
-
// */
|
|
119
|
-
// interface List extends DataStore, Vue {
|
|
120
|
-
// /**
|
|
121
|
-
// * 数据分页是否追加模式,默认不追加 = false。 App 一般采用追加模式
|
|
122
|
-
// */
|
|
123
|
-
// isDataAppend: boolean;
|
|
124
|
-
// /**
|
|
125
|
-
// * 到达底部是否自动加载下一页,通常在 移动端使用,这个应该是元素的 CSS Selector
|
|
126
|
-
// */
|
|
127
|
-
// autoLoadWhenReachedBottom: boolean;
|
|
128
|
-
// }
|
|
129
|
-
// Vue.component('aj-list', {
|
|
130
|
-
// mixins: [datastore],
|
|
131
|
-
// template: html`
|
|
132
|
-
// <div class="aj-list">
|
|
133
|
-
// <slot name="header" v-if="total != 0"></slot>
|
|
134
|
-
// <ul v-if="showDefaultUi && (total != 0)">
|
|
135
|
-
// <li v-for="(item, index) in result">
|
|
136
|
-
// <slot v-bind="item">
|
|
137
|
-
// <a href="#" @click="show(item.id, index, $event)" :id="item.id">{{item.name}}</a>
|
|
138
|
-
// </slot>
|
|
139
|
-
// </li>
|
|
140
|
-
// </ul>
|
|
141
|
-
// <div class="no-data" v-show="isPage && total == 0">未有任何数据</div>
|
|
142
|
-
// <footer v-if="isPage" class="pager">
|
|
143
|
-
// <a v-if="pageStart > 0" href="#" @click="previousPage">上一页</a>
|
|
144
|
-
// <a v-if="(pageStart > 0 ) && (pageStart + pageSize < total)" style="text-decoration: none;"> | </a>
|
|
145
|
-
// <a v-if="pageStart + pageSize < total" href="#" @click="nextPage">下一页</a>
|
|
146
|
-
// <a href="javascript:;" @click="getData"><i class="fa fa-refresh" aria-hidden="true"></i> 刷新</a>
|
|
147
|
-
// <input type="hidden" name="start" :value="pageStart" />
|
|
148
|
-
// 页数:{{currentPage}}/{{totalPage}} 记录数:{{pageStart}}/{{total}}
|
|
149
|
-
// 每页记录数: <input size="2" title="输入一个数字确定每页记录数" type="text" :value="pageSize" @change="onPageSizeChange" />
|
|
150
|
-
// 跳转:
|
|
151
|
-
// <select @change="jumpPageBySelect">
|
|
152
|
-
// <option :value="n" v-for="n in totalPage">{{n}}</option>
|
|
153
|
-
// </select>
|
|
154
|
-
// </footer>
|
|
155
|
-
// <div v-show="!!autoLoadWhenReachedBottom" class="buttom"></div>
|
|
156
|
-
// </div>
|
|
157
|
-
// `,
|
|
158
|
-
// props: {
|
|
159
|
-
// showDefaultUi: { type: Boolean, default: true }, // 如果只是单纯作为分页组件,那么则不需要 UI
|
|
160
|
-
// isShowFooter: { type: Boolean, default: true }, // 是否显示分页 UI
|
|
161
|
-
// hrefStr: { type: String, required: false },
|
|
162
|
-
// autoLoadWhenReachedBottom: { type: String, default: '' },
|
|
163
|
-
// isDataAppend: { type: Boolean, default: false }
|
|
164
|
-
// },
|
|
165
|
-
// mounted(this: List): void {
|
|
166
|
-
// this.isAutoLoad && this.getData();
|
|
167
|
-
// // this.BUS.$on('base-param-change', this.onExtraParamChange.bind(this));
|
|
168
|
-
// if (!!this.autoLoadWhenReachedBottom) {
|
|
169
|
-
// // var scrollSpy = new aj.scrollSpy({ scrollInElement: aj(this.autoLoadWhenReachedBottom), spyOn: thish.$el.$('.buttom') });
|
|
170
|
-
// // scrollSpy.onScrollSpyBackInSight = e => this.nextPage();
|
|
171
|
-
// }
|
|
172
|
-
// },
|
|
173
|
-
// methods: {
|
|
174
|
-
// getData(this: List): void {
|
|
175
|
-
// this.lastRequestParam = {};
|
|
176
|
-
// aj.apply(this.lastRequestParam, this.baseParam);
|
|
177
|
-
// aj.apply(this.lastRequestParam, this.extraParam);
|
|
178
|
-
// initPageParams.call(this);
|
|
179
|
-
// xhr.get(this.apiUrl, this.onLoad || ((j: PageListRepsonseResult) => {
|
|
180
|
-
// if (j.result) {
|
|
181
|
-
// if (this.isPage && j.total === undefined)
|
|
182
|
-
// aj.alert('JSON 缺少 total 字段');
|
|
183
|
-
// if (j.total == 0 || j.result.length == 0)
|
|
184
|
-
// aj.alert('没有找到任何记录');
|
|
185
|
-
// this.result = j.result;
|
|
186
|
-
// if (this.isPage) {
|
|
187
|
-
// this.total = j.total;
|
|
188
|
-
// this.count();
|
|
189
|
-
// }
|
|
190
|
-
// }
|
|
191
|
-
// this.$emit('pager-result', this.result);
|
|
192
|
-
// }), this.lastRequestParam);
|
|
193
|
-
// },
|
|
194
|
-
// /**
|
|
195
|
-
// * 复位
|
|
196
|
-
// *
|
|
197
|
-
// * @param this
|
|
198
|
-
// */
|
|
199
|
-
// reset(this: List): void {
|
|
200
|
-
// this.total = this.totalPage = this.pageStart = this.currentPage = 0;
|
|
201
|
-
// this.pageSize = this.initPageSize;
|
|
202
|
-
// },
|
|
203
|
-
// onExtraParamChange(this: List, params: JsonParam): void {
|
|
204
|
-
// aj.apply(this.extraParam, params);
|
|
205
|
-
// this.pageStart = 0; // 每次 extraParam 被改变,都是从第一笔开始
|
|
206
|
-
// this.getData();
|
|
207
|
-
// }
|
|
208
|
-
// },
|
|
209
|
-
// watch: {
|
|
210
|
-
// extraParam(this: List): void {
|
|
211
|
-
// this.getData();
|
|
212
|
-
// }
|
|
213
|
-
// }
|
|
214
|
-
// });
|
|
215
|
-
// /**
|
|
216
|
-
// * 生成分页参数的名字
|
|
217
|
-
// *
|
|
218
|
-
// * @param this
|
|
219
|
-
// */
|
|
220
|
-
// function initPageParams(this: List) {
|
|
221
|
-
// let params: { [key: string]: number } = {};
|
|
222
|
-
// params[this.pageParamNames[0]] = this.pageStart;
|
|
223
|
-
// params[this.pageParamNames[1]] = this.pageSize;
|
|
224
|
-
// this.isPage && aj.apply(this.lastRequestParam, params);
|
|
225
|
-
// }
|
|
226
|
-
// }
|
|
227
|
-
//# sourceMappingURL=list.js.map
|