vue2-client 1.9.49 → 1.9.50
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/docs//345/207/275/346/225/260/344/275/277/347/224/250/347/233/270/345/205/263.md +1 -0
- package/package.json +1 -1
- package/src/base-client/components/common/XAddNativeForm/XAddNativeForm.vue +1 -2
- package/src/base-client/components/common/XFormGroup/demo.vue +40 -40
- package/src/base-client/components/common/XReport/index.js +3 -3
- package/src/pages/DynamicStatistics/FavoriteList.vue +50 -50
- package/src/services/api/entity.js +18 -18
- package/src/services/api/workFlow.js +63 -63
- package/src/utils/waterMark.js +31 -31
|
@@ -26,6 +26,7 @@ this.openDialog('xxx', 5, {}, {}, {})
|
|
|
26
26
|
- getSelectedId 获取获取selectedid
|
|
27
27
|
- refreshTable 重新查询
|
|
28
28
|
- clearRowKeys 清除选中的行
|
|
29
|
+
- getTableData() 获取全部数据
|
|
29
30
|
- 事件相关
|
|
30
31
|
- afterSubmit( type(新增/修改/擦和讯), id: (所操作的主键id), form: (请求的表单内容)) 提交后触发
|
|
31
32
|
- afterQuery( res (查询后数据), querparams (查询参数)) 查询后触发
|
package/package.json
CHANGED
|
@@ -114,13 +114,12 @@
|
|
|
114
114
|
</template>
|
|
115
115
|
<script>
|
|
116
116
|
import XFormItem from '@vue2-client/base-client/components/common/XForm/XFormItem'
|
|
117
|
-
import { formatDate, setDataByRealKey } from '@vue2-client/utils/util'
|
|
117
|
+
import util, { formatDate, setDataByRealKey } from '@vue2-client/utils/util'
|
|
118
118
|
import { mapState } from 'vuex'
|
|
119
119
|
import { addOrModify, getConfigByName, getConfigByNameAsync, runLogic } from '@vue2-client/services/api/common'
|
|
120
120
|
import { checkIdNumber, REG_EMAIL, REG_LANDLINE, REG_PHONE } from '@vue2-client/utils/reg'
|
|
121
121
|
import moment from 'moment/moment'
|
|
122
122
|
import { executeStrFunction } from '@vue2-client/utils/runEvalFunction'
|
|
123
|
-
import util from '@/utils/util'
|
|
124
123
|
|
|
125
124
|
export default {
|
|
126
125
|
name: 'XAddNativeForm',
|
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import XFormGroup from '@vue2-client/base-client/components/common/XFormGroup/XFormGroup.vue'
|
|
3
|
-
import { getConfigByNameAsync } from '@vue2-client/services/api/common'
|
|
4
|
-
|
|
5
|
-
export default {
|
|
6
|
-
name: 'Demo',
|
|
7
|
-
components: { XFormGroup },
|
|
8
|
-
created () {
|
|
9
|
-
getConfigByNameAsync('addUserGeneralInfoFrom', 'af-revenue').then(res => {
|
|
10
|
-
this.$refs.xFormGroupDemo.init({
|
|
11
|
-
...res,
|
|
12
|
-
serviceName: 'af-revenue',
|
|
13
|
-
showLeftTab: true,
|
|
14
|
-
})
|
|
15
|
-
})
|
|
16
|
-
},
|
|
17
|
-
methods: {
|
|
18
|
-
submitForm () {
|
|
19
|
-
this.$refs.xFormGroupDemo.onSubmit().then(res => {
|
|
20
|
-
console.log('所有表单的结果', res)
|
|
21
|
-
})
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
</script>
|
|
26
|
-
|
|
27
|
-
<template>
|
|
28
|
-
<a-modal
|
|
29
|
-
:visible="true"
|
|
30
|
-
:bodyStyle="{height:'70vh'}"
|
|
31
|
-
title="测试表单组"
|
|
32
|
-
@ok="submitForm"
|
|
33
|
-
width="85vw">
|
|
34
|
-
<x-form-group ref="xFormGroupDemo"></x-form-group>
|
|
35
|
-
</a-modal>
|
|
36
|
-
</template>
|
|
37
|
-
|
|
38
|
-
<style scoped lang="less">
|
|
39
|
-
|
|
40
|
-
</style>
|
|
1
|
+
<script>
|
|
2
|
+
import XFormGroup from '@vue2-client/base-client/components/common/XFormGroup/XFormGroup.vue'
|
|
3
|
+
import { getConfigByNameAsync } from '@vue2-client/services/api/common'
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
name: 'Demo',
|
|
7
|
+
components: { XFormGroup },
|
|
8
|
+
created () {
|
|
9
|
+
getConfigByNameAsync('addUserGeneralInfoFrom', 'af-revenue').then(res => {
|
|
10
|
+
this.$refs.xFormGroupDemo.init({
|
|
11
|
+
...res,
|
|
12
|
+
serviceName: 'af-revenue',
|
|
13
|
+
showLeftTab: true,
|
|
14
|
+
})
|
|
15
|
+
})
|
|
16
|
+
},
|
|
17
|
+
methods: {
|
|
18
|
+
submitForm () {
|
|
19
|
+
this.$refs.xFormGroupDemo.onSubmit().then(res => {
|
|
20
|
+
console.log('所有表单的结果', res)
|
|
21
|
+
})
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
<template>
|
|
28
|
+
<a-modal
|
|
29
|
+
:visible="true"
|
|
30
|
+
:bodyStyle="{height:'70vh'}"
|
|
31
|
+
title="测试表单组"
|
|
32
|
+
@ok="submitForm"
|
|
33
|
+
width="85vw">
|
|
34
|
+
<x-form-group ref="xFormGroupDemo"></x-form-group>
|
|
35
|
+
</a-modal>
|
|
36
|
+
</template>
|
|
37
|
+
|
|
38
|
+
<style scoped lang="less">
|
|
39
|
+
|
|
40
|
+
</style>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import XReport from './XReport'
|
|
2
|
-
|
|
3
|
-
export default XReport
|
|
1
|
+
import XReport from './XReport'
|
|
2
|
+
|
|
3
|
+
export default XReport
|
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<a-list v-show="!loading" size="small" :data-source="data">
|
|
4
|
-
<a-list-item slot="renderItem" slot-scope="item">
|
|
5
|
-
<div>
|
|
6
|
-
<p><a @click="$emit('openFavorites', item.uuid)">{{ item.question }} </a></p>
|
|
7
|
-
<p>{{ item.date }}</p>
|
|
8
|
-
</div>
|
|
9
|
-
<a class="delete_item">
|
|
10
|
-
<a-icon type="close" @click="$emit('saveToFavorites', item.uuid)"/>
|
|
11
|
-
</a>
|
|
12
|
-
</a-list-item>
|
|
13
|
-
</a-list>
|
|
14
|
-
</div>
|
|
15
|
-
</template>
|
|
16
|
-
|
|
17
|
-
<script>
|
|
18
|
-
import { indexedDB } from '@vue2-client/utils/indexedDB'
|
|
19
|
-
|
|
20
|
-
export default {
|
|
21
|
-
name: 'FavoriteList',
|
|
22
|
-
data () {
|
|
23
|
-
return {
|
|
24
|
-
data: [],
|
|
25
|
-
loading: false
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
mounted () {
|
|
29
|
-
this.loadData()
|
|
30
|
-
},
|
|
31
|
-
methods: {
|
|
32
|
-
loadData () {
|
|
33
|
-
indexedDB.getAll((data) => {
|
|
34
|
-
const realData = data.filter(item => item.data && item.data.uuid)
|
|
35
|
-
.map(item => item.data)
|
|
36
|
-
this.data = realData
|
|
37
|
-
})
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
</script>
|
|
42
|
-
<style lang="less" scoped>
|
|
43
|
-
.delete_item {
|
|
44
|
-
margin-left: 8px;
|
|
45
|
-
color: #333;
|
|
46
|
-
}
|
|
47
|
-
p {
|
|
48
|
-
margin: 0
|
|
49
|
-
}
|
|
50
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<a-list v-show="!loading" size="small" :data-source="data">
|
|
4
|
+
<a-list-item slot="renderItem" slot-scope="item">
|
|
5
|
+
<div>
|
|
6
|
+
<p><a @click="$emit('openFavorites', item.uuid)">{{ item.question }} </a></p>
|
|
7
|
+
<p>{{ item.date }}</p>
|
|
8
|
+
</div>
|
|
9
|
+
<a class="delete_item">
|
|
10
|
+
<a-icon type="close" @click="$emit('saveToFavorites', item.uuid)"/>
|
|
11
|
+
</a>
|
|
12
|
+
</a-list-item>
|
|
13
|
+
</a-list>
|
|
14
|
+
</div>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script>
|
|
18
|
+
import { indexedDB } from '@vue2-client/utils/indexedDB'
|
|
19
|
+
|
|
20
|
+
export default {
|
|
21
|
+
name: 'FavoriteList',
|
|
22
|
+
data () {
|
|
23
|
+
return {
|
|
24
|
+
data: [],
|
|
25
|
+
loading: false
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
mounted () {
|
|
29
|
+
this.loadData()
|
|
30
|
+
},
|
|
31
|
+
methods: {
|
|
32
|
+
loadData () {
|
|
33
|
+
indexedDB.getAll((data) => {
|
|
34
|
+
const realData = data.filter(item => item.data && item.data.uuid)
|
|
35
|
+
.map(item => item.data)
|
|
36
|
+
this.data = realData
|
|
37
|
+
})
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
</script>
|
|
42
|
+
<style lang="less" scoped>
|
|
43
|
+
.delete_item {
|
|
44
|
+
margin-left: 8px;
|
|
45
|
+
color: #333;
|
|
46
|
+
}
|
|
47
|
+
p {
|
|
48
|
+
margin: 0
|
|
49
|
+
}
|
|
50
|
+
</style>
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { post } from '@vue2-client/services/api/restTools'
|
|
2
|
-
|
|
3
|
-
const entityApi = {
|
|
4
|
-
// 根据ID查询数据
|
|
5
|
-
getById: (entityName, id, data = {}, serviceName = process.env.VUE_APP_SYSTEM_NAME) => {
|
|
6
|
-
return post(`/api/${serviceName}/entity/query/${entityName}/${id}`, data)
|
|
7
|
-
},
|
|
8
|
-
// 根据ID集合查询所有数据
|
|
9
|
-
findAllByIds: (entityName, data, serviceName = process.env.VUE_APP_SYSTEM_NAME) => {
|
|
10
|
-
return post(`/api/${serviceName}/entity/query/${entityName}`, data)
|
|
11
|
-
},
|
|
12
|
-
// 查询实体的总数量
|
|
13
|
-
getCount: (entityName, serviceName = process.env.VUE_APP_SYSTEM_NAME) => {
|
|
14
|
-
return post(`/api/${serviceName}/entity/queryCount/${entityName}`, {})
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export { entityApi }
|
|
1
|
+
import { post } from '@vue2-client/services/api/restTools'
|
|
2
|
+
|
|
3
|
+
const entityApi = {
|
|
4
|
+
// 根据ID查询数据
|
|
5
|
+
getById: (entityName, id, data = {}, serviceName = process.env.VUE_APP_SYSTEM_NAME) => {
|
|
6
|
+
return post(`/api/${serviceName}/entity/query/${entityName}/${id}`, data)
|
|
7
|
+
},
|
|
8
|
+
// 根据ID集合查询所有数据
|
|
9
|
+
findAllByIds: (entityName, data, serviceName = process.env.VUE_APP_SYSTEM_NAME) => {
|
|
10
|
+
return post(`/api/${serviceName}/entity/query/${entityName}`, data)
|
|
11
|
+
},
|
|
12
|
+
// 查询实体的总数量
|
|
13
|
+
getCount: (entityName, serviceName = process.env.VUE_APP_SYSTEM_NAME) => {
|
|
14
|
+
return post(`/api/${serviceName}/entity/queryCount/${entityName}`, {})
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export { entityApi }
|
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
// 工单专用api
|
|
2
|
-
const workFlowViewApi = {
|
|
3
|
-
// 查询:获取工作流基本数据
|
|
4
|
-
getWorkFlowBasicInfo: '/logic/getWorkFlowBasicInfo',
|
|
5
|
-
// 保存工作流流程定义
|
|
6
|
-
saveWorkFlowWorkflowDefine: '/logic/saveWorkFlowWorkflowDefine',
|
|
7
|
-
// 获取工作流流程定义
|
|
8
|
-
getWorkFlowDefine: '/logic/getWorkFlowDefine',
|
|
9
|
-
// 获取工作流当前步骤
|
|
10
|
-
getWorkFlowCurrentSubState: '/logic/getWorkFlowCurrentSubState',
|
|
11
|
-
// 保存用户每一步输入的表单内容
|
|
12
|
-
saveWorkFlowStepFormData: '/logic/saveWorkFlowStepFormData',
|
|
13
|
-
// 获取已经完成步骤的用户填写数据
|
|
14
|
-
getWorkFlowCompletedStepData: '/logic/getWorkFlowCompletedStepData',
|
|
15
|
-
// 改变工作流进度
|
|
16
|
-
updateWorkFlowState: '/logic/updateWorkFlowState',
|
|
17
|
-
// 完工确认后更改工作流状态
|
|
18
|
-
afterWorkFlowFinalStepSubmit: '/logic/afterWorkFlowFinalStepSubmit',
|
|
19
|
-
// 获取步骤留言和表单填写人姓名
|
|
20
|
-
getStepNoteAndHandler: '/logic/getStepNoteAndHandler',
|
|
21
|
-
// 更新步骤信息
|
|
22
|
-
updateWorkFlowStepData: '/logic/updateWorkFlowStepData',
|
|
23
|
-
// 保存工作流日志
|
|
24
|
-
saveWorkFlowLog: '/logic/saveWorkFlowLog',
|
|
25
|
-
// 获取工作流日志
|
|
26
|
-
getWorkFlowLog: '/logic/getWorkFlowLog',
|
|
27
|
-
// 获取员工任务详情信息
|
|
28
|
-
getEmployeeTaskDetail: '/logic/getEmployeeTaskDetail',
|
|
29
|
-
// 根据条件查询任务
|
|
30
|
-
getWorkFlowListByCondition: '/logic/getWorkFlowListByCondition',
|
|
31
|
-
// 根据流程名称获取所有步骤名称
|
|
32
|
-
getWorkFlowStepNames: '/logic/getWorkFlowStepNames',
|
|
33
|
-
// 获取工作流任务留言
|
|
34
|
-
getWorkFlowLeaveMessage: '/logic/getWorkFlowLeaveMessage',
|
|
35
|
-
// 更新任务完成时间
|
|
36
|
-
updateWorkFlowCompleteTime: '/logic/updateWorkFlowCompleteTime',
|
|
37
|
-
// 获取任务完成时间更改记录
|
|
38
|
-
getWorkFlowCompleteTimeChange: '/logic/getWorkFlowCompleteTimeChange',
|
|
39
|
-
// 修改工单
|
|
40
|
-
updateWorkFlow: '/logic/updateWorkFlow',
|
|
41
|
-
// 获取工作流流程图设计
|
|
42
|
-
getWorkFlowPaintWorkFlowDefine: '/logic/getWorkFlowPaintWorkFlowDefine',
|
|
43
|
-
// 简单添加字典项
|
|
44
|
-
simpleInsertIntoDictionary: '/logic/simpleInsertIntoDictionary',
|
|
45
|
-
// 删除工作流项目
|
|
46
|
-
deleteWorkFlow: '/logic/deleteWorkFlow',
|
|
47
|
-
// 获取流程分类数据
|
|
48
|
-
getWorkFlowCategoryTree: '/logic/getWorkFlowCategoryTree',
|
|
49
|
-
// 创建任务
|
|
50
|
-
createWorkflowTask: '/logic/createWorkflowTask',
|
|
51
|
-
// 获取部门选择框数据
|
|
52
|
-
getDepartmentList: '/logic/getDepartmentList',
|
|
53
|
-
// 获取人员任务汇总数据
|
|
54
|
-
getEmployeeSummary: '/logic/getEmployeeSummary',
|
|
55
|
-
// 获取逾期任务排行榜
|
|
56
|
-
getOverdueRanking: '/logic/getOverdueRanking',
|
|
57
|
-
// 根据人查询对应的t_workflow_step中字段f_workflow_id的数据组
|
|
58
|
-
getWorkFlowStepWorkFlowId: '/logic/getWorkFlowStepWorkFlowId',
|
|
59
|
-
// 表单提交到下一步
|
|
60
|
-
submitToNextStep: '/logic/submitToNextStep'
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
export { workFlowViewApi }
|
|
1
|
+
// 工单专用api
|
|
2
|
+
const workFlowViewApi = {
|
|
3
|
+
// 查询:获取工作流基本数据
|
|
4
|
+
getWorkFlowBasicInfo: '/logic/getWorkFlowBasicInfo',
|
|
5
|
+
// 保存工作流流程定义
|
|
6
|
+
saveWorkFlowWorkflowDefine: '/logic/saveWorkFlowWorkflowDefine',
|
|
7
|
+
// 获取工作流流程定义
|
|
8
|
+
getWorkFlowDefine: '/logic/getWorkFlowDefine',
|
|
9
|
+
// 获取工作流当前步骤
|
|
10
|
+
getWorkFlowCurrentSubState: '/logic/getWorkFlowCurrentSubState',
|
|
11
|
+
// 保存用户每一步输入的表单内容
|
|
12
|
+
saveWorkFlowStepFormData: '/logic/saveWorkFlowStepFormData',
|
|
13
|
+
// 获取已经完成步骤的用户填写数据
|
|
14
|
+
getWorkFlowCompletedStepData: '/logic/getWorkFlowCompletedStepData',
|
|
15
|
+
// 改变工作流进度
|
|
16
|
+
updateWorkFlowState: '/logic/updateWorkFlowState',
|
|
17
|
+
// 完工确认后更改工作流状态
|
|
18
|
+
afterWorkFlowFinalStepSubmit: '/logic/afterWorkFlowFinalStepSubmit',
|
|
19
|
+
// 获取步骤留言和表单填写人姓名
|
|
20
|
+
getStepNoteAndHandler: '/logic/getStepNoteAndHandler',
|
|
21
|
+
// 更新步骤信息
|
|
22
|
+
updateWorkFlowStepData: '/logic/updateWorkFlowStepData',
|
|
23
|
+
// 保存工作流日志
|
|
24
|
+
saveWorkFlowLog: '/logic/saveWorkFlowLog',
|
|
25
|
+
// 获取工作流日志
|
|
26
|
+
getWorkFlowLog: '/logic/getWorkFlowLog',
|
|
27
|
+
// 获取员工任务详情信息
|
|
28
|
+
getEmployeeTaskDetail: '/logic/getEmployeeTaskDetail',
|
|
29
|
+
// 根据条件查询任务
|
|
30
|
+
getWorkFlowListByCondition: '/logic/getWorkFlowListByCondition',
|
|
31
|
+
// 根据流程名称获取所有步骤名称
|
|
32
|
+
getWorkFlowStepNames: '/logic/getWorkFlowStepNames',
|
|
33
|
+
// 获取工作流任务留言
|
|
34
|
+
getWorkFlowLeaveMessage: '/logic/getWorkFlowLeaveMessage',
|
|
35
|
+
// 更新任务完成时间
|
|
36
|
+
updateWorkFlowCompleteTime: '/logic/updateWorkFlowCompleteTime',
|
|
37
|
+
// 获取任务完成时间更改记录
|
|
38
|
+
getWorkFlowCompleteTimeChange: '/logic/getWorkFlowCompleteTimeChange',
|
|
39
|
+
// 修改工单
|
|
40
|
+
updateWorkFlow: '/logic/updateWorkFlow',
|
|
41
|
+
// 获取工作流流程图设计
|
|
42
|
+
getWorkFlowPaintWorkFlowDefine: '/logic/getWorkFlowPaintWorkFlowDefine',
|
|
43
|
+
// 简单添加字典项
|
|
44
|
+
simpleInsertIntoDictionary: '/logic/simpleInsertIntoDictionary',
|
|
45
|
+
// 删除工作流项目
|
|
46
|
+
deleteWorkFlow: '/logic/deleteWorkFlow',
|
|
47
|
+
// 获取流程分类数据
|
|
48
|
+
getWorkFlowCategoryTree: '/logic/getWorkFlowCategoryTree',
|
|
49
|
+
// 创建任务
|
|
50
|
+
createWorkflowTask: '/logic/createWorkflowTask',
|
|
51
|
+
// 获取部门选择框数据
|
|
52
|
+
getDepartmentList: '/logic/getDepartmentList',
|
|
53
|
+
// 获取人员任务汇总数据
|
|
54
|
+
getEmployeeSummary: '/logic/getEmployeeSummary',
|
|
55
|
+
// 获取逾期任务排行榜
|
|
56
|
+
getOverdueRanking: '/logic/getOverdueRanking',
|
|
57
|
+
// 根据人查询对应的t_workflow_step中字段f_workflow_id的数据组
|
|
58
|
+
getWorkFlowStepWorkFlowId: '/logic/getWorkFlowStepWorkFlowId',
|
|
59
|
+
// 表单提交到下一步
|
|
60
|
+
submitToNextStep: '/logic/submitToNextStep'
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
export { workFlowViewApi }
|
package/src/utils/waterMark.js
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @description: createWaterMark.js 加水印功能
|
|
3
|
-
*/
|
|
4
|
-
let waterMarkDOM
|
|
5
|
-
|
|
6
|
-
const clearWaterMark = () => {
|
|
7
|
-
if (waterMarkDOM) waterMarkDOM.remove()
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* @description: 创建水印
|
|
11
|
-
* @param waterMarkName 水印内容
|
|
12
|
-
*/
|
|
13
|
-
export default function createWaterMark (waterMarkName) {
|
|
14
|
-
clearWaterMark()
|
|
15
|
-
if (!waterMarkName) {
|
|
16
|
-
return
|
|
17
|
-
}
|
|
18
|
-
const width = window.parseInt(document.body.clientWidth)
|
|
19
|
-
const canvasWidth = width / window.parseInt(width / 320)
|
|
20
|
-
const fontFamily = window.getComputedStyle(document.body)['font-family']
|
|
21
|
-
const fragment = document.createDocumentFragment()
|
|
22
|
-
waterMarkDOM = document.createElement('div')
|
|
23
|
-
waterMarkDOM.className = 'water-mark-wrap'
|
|
24
|
-
let spanStr = ''
|
|
25
|
-
for (let i = 0; i < 100; i++) {
|
|
26
|
-
spanStr += `<span class="water-word" style=width:${canvasWidth}px;height:200px;font: ${fontFamily}>${waterMarkName}</span>`
|
|
27
|
-
}
|
|
28
|
-
waterMarkDOM.innerHTML = spanStr
|
|
29
|
-
fragment.appendChild(waterMarkDOM)
|
|
30
|
-
document.body.appendChild(fragment)
|
|
31
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* @description: createWaterMark.js 加水印功能
|
|
3
|
+
*/
|
|
4
|
+
let waterMarkDOM
|
|
5
|
+
|
|
6
|
+
const clearWaterMark = () => {
|
|
7
|
+
if (waterMarkDOM) waterMarkDOM.remove()
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* @description: 创建水印
|
|
11
|
+
* @param waterMarkName 水印内容
|
|
12
|
+
*/
|
|
13
|
+
export default function createWaterMark (waterMarkName) {
|
|
14
|
+
clearWaterMark()
|
|
15
|
+
if (!waterMarkName) {
|
|
16
|
+
return
|
|
17
|
+
}
|
|
18
|
+
const width = window.parseInt(document.body.clientWidth)
|
|
19
|
+
const canvasWidth = width / window.parseInt(width / 320)
|
|
20
|
+
const fontFamily = window.getComputedStyle(document.body)['font-family']
|
|
21
|
+
const fragment = document.createDocumentFragment()
|
|
22
|
+
waterMarkDOM = document.createElement('div')
|
|
23
|
+
waterMarkDOM.className = 'water-mark-wrap'
|
|
24
|
+
let spanStr = ''
|
|
25
|
+
for (let i = 0; i < 100; i++) {
|
|
26
|
+
spanStr += `<span class="water-word" style=width:${canvasWidth}px;height:200px;font: ${fontFamily}>${waterMarkName}</span>`
|
|
27
|
+
}
|
|
28
|
+
waterMarkDOM.innerHTML = spanStr
|
|
29
|
+
fragment.appendChild(waterMarkDOM)
|
|
30
|
+
document.body.appendChild(fragment)
|
|
31
|
+
}
|