@zscreate/zhxy-app-component 1.0.81 → 1.0.83
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/components/evan-form-item/evan-form-item.vue +98 -13
- package/components/evan-form-item/mixins/pubSubMixin.js +1 -0
- package/components/form-container/form-container.vue +105 -16
- package/components/l-file/l-file.vue +1 -0
- package/components/m-textarea/m-textarea.vue +89 -0
- package/components/rich-editor/assets/iconfont.css +240 -0
- package/components/rich-editor/editor.css +46 -0
- package/components/rich-editor/index.vue +318 -0
- package/components/rich-editor/t-color-picker.vue +786 -0
- package/package.json +1 -1
|
@@ -426,7 +426,7 @@
|
|
|
426
426
|
{{ widget.name }}
|
|
427
427
|
</view>
|
|
428
428
|
<view class="evan-form-item-container__main" :style="mContentStyle"
|
|
429
|
-
@click.stop="selectUserByRole(widget
|
|
429
|
+
@click.stop="selectUserByRole(widget)">
|
|
430
430
|
<user-select-by-role ref="userSelectByRole" @ok="handleSelectRoleUserOk"/>
|
|
431
431
|
<!-- <input class="form-input" placeholder-class="form-input-placeholder" v-model="dataModelShow"
|
|
432
432
|
:placeholder="widget.options.placeholder" :disabled="widget.options.disabled" /> -->
|
|
@@ -464,6 +464,39 @@
|
|
|
464
464
|
</view>
|
|
465
465
|
</view>
|
|
466
466
|
</view>
|
|
467
|
+
|
|
468
|
+
|
|
469
|
+
<!-- richEditor -->
|
|
470
|
+
<view v-else-if="widget.type === 'hnkj-richEditor'" class="evan-form-item-container"
|
|
471
|
+
:class="'evan-form-item-container--' + labelPosition" :style="{borderWidth:border?'1upx':0}">
|
|
472
|
+
<view class="evan-form-item-container__label"
|
|
473
|
+
:class="{showAsteriskRect:hasRequiredAsterisk,isRequired:showRequiredAsterisk}" :style="mLabelStyle">
|
|
474
|
+
{{widget.name}}
|
|
475
|
+
</view>
|
|
476
|
+
<view class="evan-form-item-container__main" :style="mContentStyle"
|
|
477
|
+
style="width: 100%;box-sizing: border-box">
|
|
478
|
+
<rich-text v-if="widget.options.disabled" :nodes="dataModel" style="width: 100%;"></rich-text>
|
|
479
|
+
<richEditor v-else v-model="dataModel"
|
|
480
|
+
:maxLength="widget.options.wordLimits ? widget.options.maxLength: 0" style="width: 100%;">
|
|
481
|
+
</richEditor>
|
|
482
|
+
</view>
|
|
483
|
+
</view>
|
|
484
|
+
|
|
485
|
+
|
|
486
|
+
<!-- nameSignature 签名 -->
|
|
487
|
+
<view v-if="widget.type ==='hnkj-nameSignature'" class="evan-form-item-container"
|
|
488
|
+
:class="'evan-form-item-container--' + labelPosition" :style="{borderWidth:border?'1upx':0}">
|
|
489
|
+
<view class="evan-form-item-container__label"
|
|
490
|
+
:class="{showAsteriskRect:hasRequiredAsterisk,isRequired:showRequiredAsterisk}" :style="mLabelStyle">
|
|
491
|
+
{{widget.name}}
|
|
492
|
+
</view>
|
|
493
|
+
<view class="evan-form-item-container__main" :style="mContentStyle">
|
|
494
|
+
<image v-if="nameSign" :src="imgUrl + nameSign" @error="nameSignLoadError"
|
|
495
|
+
style="width: 280rpx; height: 100rpx; "></image>
|
|
496
|
+
<view v-else>{{ dataModel }}</view>
|
|
497
|
+
</view>
|
|
498
|
+
</view>
|
|
499
|
+
|
|
467
500
|
<view class="error-message" v-if="showFalse">{{ showFalseMsg }}</view>
|
|
468
501
|
</view>
|
|
469
502
|
</template>
|
|
@@ -480,6 +513,8 @@ import jinEdit from '../../components/jin-edit/jin-edit.vue';
|
|
|
480
513
|
import LbPicker from '../../components/lb-picker/index.vue';
|
|
481
514
|
import MyPicker from '../../components/dying318-picker/Pickers.vue';
|
|
482
515
|
import UniRate from '../../components/uni-rate/uni-rate.vue';
|
|
516
|
+
|
|
517
|
+
import richEditor from '../rich-editor/index.vue';
|
|
483
518
|
import Pubsub from 'pubsub-js'
|
|
484
519
|
import {
|
|
485
520
|
computedMixin
|
|
@@ -509,7 +544,8 @@ export default {
|
|
|
509
544
|
LbPicker,
|
|
510
545
|
MyPicker,
|
|
511
546
|
jinEdit,
|
|
512
|
-
uniDatetimePicker
|
|
547
|
+
uniDatetimePicker,
|
|
548
|
+
richEditor
|
|
513
549
|
},
|
|
514
550
|
name: 'EvanFormItem',
|
|
515
551
|
props: {
|
|
@@ -579,6 +615,7 @@ export default {
|
|
|
579
615
|
},
|
|
580
616
|
data() {
|
|
581
617
|
return {
|
|
618
|
+
nameSign: '',
|
|
582
619
|
isClickByUser: false, //是否用户点击
|
|
583
620
|
single: null,
|
|
584
621
|
showFalse: false,
|
|
@@ -652,6 +689,29 @@ export default {
|
|
|
652
689
|
uni.$off(this.widget.model);
|
|
653
690
|
},
|
|
654
691
|
methods: {
|
|
692
|
+
// 图片加载失败,就显示dataModel
|
|
693
|
+
nameSignLoadError() {
|
|
694
|
+
this.nameSign = ''
|
|
695
|
+
},
|
|
696
|
+
// 获取签名签章
|
|
697
|
+
getUserSign() {
|
|
698
|
+
if (this.dataModel) {
|
|
699
|
+
// 签名图片回填
|
|
700
|
+
this.nameSign = this.dataModel
|
|
701
|
+
return
|
|
702
|
+
}
|
|
703
|
+
if (this.widget.options.disabled) return
|
|
704
|
+
const userInfo = uni.getStorageSync('userinfo')
|
|
705
|
+
this.$u.get("workhall/userseal/queryById").then((res) => {
|
|
706
|
+
if (res.success) {
|
|
707
|
+
this.nameSign = res.result.userSign
|
|
708
|
+
this.dataModel = res.result.userSign || userInfo.realname
|
|
709
|
+
if (this.widget.type === 'sealSignature') {
|
|
710
|
+
this.dataModel = res.result.userSeal || ""
|
|
711
|
+
}
|
|
712
|
+
}
|
|
713
|
+
})
|
|
714
|
+
},
|
|
655
715
|
//文件删除
|
|
656
716
|
fileDelete(idx) {
|
|
657
717
|
this.dataModel.splice(idx, 1)
|
|
@@ -678,16 +738,16 @@ export default {
|
|
|
678
738
|
callback()
|
|
679
739
|
}
|
|
680
740
|
if (options.condition == '小于') {
|
|
681
|
-
if (moment(value).unix()
|
|
741
|
+
if (moment(value).unix() <= moment(time).unix()) {
|
|
682
742
|
callback()
|
|
683
743
|
} else {
|
|
684
|
-
callback("
|
|
744
|
+
callback("开始时间必须小于等于结束时间");
|
|
685
745
|
}
|
|
686
746
|
} else {
|
|
687
|
-
if (moment(value).unix()
|
|
747
|
+
if (moment(value).unix() >= moment(time).unix()) {
|
|
688
748
|
callback()
|
|
689
749
|
} else {
|
|
690
|
-
callback("
|
|
750
|
+
callback("开始时间必须小于等于结束时间");
|
|
691
751
|
}
|
|
692
752
|
}
|
|
693
753
|
},
|
|
@@ -807,6 +867,7 @@ export default {
|
|
|
807
867
|
if (this.widget.type === 'relateSub') {
|
|
808
868
|
this.showLabels(this.dataModel)
|
|
809
869
|
}
|
|
870
|
+
if (['nameSignature', 'sealSignature'].includes(this.widget.type)) this.getUserSign()
|
|
810
871
|
},
|
|
811
872
|
|
|
812
873
|
updateRadioOrCheckboxModel(arr) {
|
|
@@ -896,7 +957,10 @@ export default {
|
|
|
896
957
|
},
|
|
897
958
|
/****更新*userSelector**/
|
|
898
959
|
updateUserSelectorModal() {
|
|
899
|
-
if (!this.dataModel || !Array.isArray(this.dataModel) || this.dataModel.length == 0)
|
|
960
|
+
if (!this.dataModel || !Array.isArray(this.dataModel) || this.dataModel.length == 0) {
|
|
961
|
+
this.dataModelShow = ""
|
|
962
|
+
return;
|
|
963
|
+
}
|
|
900
964
|
var str = '';
|
|
901
965
|
//是否展示详情信息
|
|
902
966
|
if (this.widget.options.showfield) {
|
|
@@ -915,7 +979,10 @@ export default {
|
|
|
915
979
|
updatedeptSelectorModal() {
|
|
916
980
|
if (!this.dataModel || !(Object.prototype.toString.call(this.dataModel) === '[object Array]') || this
|
|
917
981
|
.dataModel.length ==
|
|
918
|
-
0)
|
|
982
|
+
0) {
|
|
983
|
+
this.dataModelShow = ""
|
|
984
|
+
return;
|
|
985
|
+
}
|
|
919
986
|
var str = '';
|
|
920
987
|
this.dataModel.forEach(item => {
|
|
921
988
|
str += ',' + item.departName;
|
|
@@ -1111,8 +1178,8 @@ export default {
|
|
|
1111
1178
|
if (this.widget.options.departRelation) {
|
|
1112
1179
|
const userInfo = uni.getStorageSync('userinfo')
|
|
1113
1180
|
console.log("userInfo: ", userInfo)
|
|
1114
|
-
departId = userInfo.departId || userInfo.depart_id
|
|
1115
|
-
departName = userInfo.departName || userInfo.depart_name
|
|
1181
|
+
departId = this.widget.options.departId || userInfo.departId || userInfo.depart_id
|
|
1182
|
+
departName = this.widget.options.departName || userInfo.departName || userInfo.depart_name
|
|
1116
1183
|
}
|
|
1117
1184
|
uni.navigateTo({
|
|
1118
1185
|
url: '/pages/picker/picker?departRelation=' + (this.widget.options.departRelation ? 1 : 0) + '&departId=' + departId + '&departName=' + departName + '&sign=' + PubsubSign + '&multiple=' + flag + '&roleId=' + (this
|
|
@@ -1121,10 +1188,10 @@ export default {
|
|
|
1121
1188
|
});
|
|
1122
1189
|
},
|
|
1123
1190
|
|
|
1124
|
-
selectUserByRole() {
|
|
1125
|
-
if (
|
|
1191
|
+
selectUserByRole(widget) {
|
|
1192
|
+
if (widget.options.disabled) return
|
|
1126
1193
|
this.isClickByUser = true
|
|
1127
|
-
this.$refs.userSelectByRole.init(
|
|
1194
|
+
this.$refs.userSelectByRole.init(widget, this.dataModel)
|
|
1128
1195
|
},
|
|
1129
1196
|
handleSelectRoleUserOk(value) {
|
|
1130
1197
|
this.dataModelShow = ""
|
|
@@ -1266,11 +1333,28 @@ export default {
|
|
|
1266
1333
|
} else {
|
|
1267
1334
|
this.models[this.widget.model] = v
|
|
1268
1335
|
if (this.widget.type === 'userSelector') {
|
|
1336
|
+
if (v === "") {
|
|
1337
|
+
this.dataModel = []
|
|
1338
|
+
this.models[this.widget.model] = []
|
|
1339
|
+
}
|
|
1269
1340
|
this.updateUserSelectorModal()
|
|
1270
1341
|
}
|
|
1271
1342
|
if (this.widget.type === 'deptSelector') {
|
|
1272
1343
|
this.updatedeptSelectorModal()
|
|
1273
1344
|
}
|
|
1345
|
+
if (this.widget.type === 'codeControl') {
|
|
1346
|
+
const randomNum = String(Math.random())
|
|
1347
|
+
const dateStr = String(new Date().getFullYear()).slice(2)
|
|
1348
|
+
+ (new Date().getMonth() + 1 > 9 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1))
|
|
1349
|
+
+ (new Date().getDate() > 9 ? new Date().getDate() : '0' + new Date().getDate())
|
|
1350
|
+
+ randomNum.slice(-4)
|
|
1351
|
+
if (!v) {
|
|
1352
|
+
v = this.widget.key = dateStr + ''
|
|
1353
|
+
} else {
|
|
1354
|
+
this.widget.key = v
|
|
1355
|
+
}
|
|
1356
|
+
this.$emit('upDateWidget', this.widget)
|
|
1357
|
+
}
|
|
1274
1358
|
this.$emit("update:models", {
|
|
1275
1359
|
...this.models,
|
|
1276
1360
|
[this.widget.model]: v
|
|
@@ -1408,6 +1492,7 @@ checkbox-group label {
|
|
|
1408
1492
|
overflow: hidden;
|
|
1409
1493
|
justify-content: flex-start;
|
|
1410
1494
|
padding-left: $uni-form-padding-left;
|
|
1495
|
+
z-index: 10;
|
|
1411
1496
|
|
|
1412
1497
|
.form-input {
|
|
1413
1498
|
font-size: $uni-form-content-font-size;
|
|
@@ -54,10 +54,52 @@
|
|
|
54
54
|
<template v-else-if="item.type === 'grid-lay-out' && item.options.canView">
|
|
55
55
|
<view v-for="(colItem, colIndex) in item.columns" :key="colIndex">
|
|
56
56
|
<view v-for="(col, itemIndex) in colItem.list" :key="itemIndex">
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
57
|
+
<template v-if="col.type == 'hnkj-verify' && item.options.canView">
|
|
58
|
+
<view class="verify">
|
|
59
|
+
<view class="verify-step">{{col.name }}</view>
|
|
60
|
+
<view class="verify-cot">
|
|
61
|
+
<m-textarea
|
|
62
|
+
:value="models[col.model].comments"
|
|
63
|
+
show-word-limit
|
|
64
|
+
:max-length="col.options.commentsLength"
|
|
65
|
+
:disabled="col.model !== verifyNode" :placeholder="'请输入您的意见'"
|
|
66
|
+
@change="val => handlerText(val, col.model)">
|
|
67
|
+
</m-textarea>
|
|
68
|
+
</view>
|
|
69
|
+
<view v-if="col.model == verifyNode" class="verify-cot">
|
|
70
|
+
<view class="verify-title">{{col.options.operation}}</view>
|
|
71
|
+
<view style="width:200rpx;">
|
|
72
|
+
<u-input id="suggestSelect" :border="false" type="select" :select-open="selectShow"
|
|
73
|
+
input-align="right" v-model="suggestType" placeholder="请点击选择"
|
|
74
|
+
@click="selectShow = true"></u-input>
|
|
75
|
+
<u-select mode="single-column" :list="selectList" v-model="selectShow"
|
|
76
|
+
@confirm="selectConfirm($event,col)"></u-select>
|
|
77
|
+
<!-- <picker @change="bindPickerChange($event, item.model)" :value="pickerIndex" :range="selectDataTransForm(suggest)">
|
|
78
|
+
<view class="uni-input">{{models[item.model].operation ? models[item.model].operation : '请选择'}}</view>
|
|
79
|
+
</picker> -->
|
|
80
|
+
</view>
|
|
81
|
+
</view>
|
|
82
|
+
<view v-if="col.model !== verifyNode" class="verify-cot">
|
|
83
|
+
<view class="verify-title">{{col.options.operation}}</view>
|
|
84
|
+
<view>{{models[col.model].operation}}</view>
|
|
85
|
+
</view>
|
|
86
|
+
<view class="verify-cot">
|
|
87
|
+
<view class="verify-title">{{ col.options.operator }}</view>
|
|
88
|
+
<view>{{ models[col.model].operator }}</view>
|
|
89
|
+
</view>
|
|
90
|
+
<view class="verify-cot">
|
|
91
|
+
<view class="verify-title">{{ col.options.operationTime }}</view>
|
|
92
|
+
<view>{{ models[col.model].operationTime }}</view>
|
|
93
|
+
</view>
|
|
94
|
+
</view>
|
|
95
|
+
</template>
|
|
96
|
+
<template v-else>
|
|
97
|
+
<evan-form-item :isCorrect="isCorrect" :prop="col.model"
|
|
98
|
+
:labelPosition="labelPosition"
|
|
99
|
+
:ref="String(Math.random()).split('.')[1]" :models.sync="models" :rules="rules"
|
|
100
|
+
:widget="col" :isDraft="isDraft" :formId="formId" :linkage="linkage" :isApply="isApply">
|
|
101
|
+
</evan-form-item>
|
|
102
|
+
</template>
|
|
61
103
|
</view>
|
|
62
104
|
</view>
|
|
63
105
|
</template>
|
|
@@ -73,14 +115,38 @@
|
|
|
73
115
|
</view>
|
|
74
116
|
</template>
|
|
75
117
|
|
|
76
|
-
<template v-else-if="
|
|
118
|
+
<template v-else-if="['verify', 'hnkj-verify'].includes(item.type) && item.options.canView">
|
|
119
|
+
|
|
77
120
|
<view class="verify">
|
|
78
121
|
<view class="verify-step">{{item.name }}</view>
|
|
122
|
+
<view v-if="item.options.supportMulti && (verifyLogs && verifyLogs[item.model])" >
|
|
123
|
+
<view v-for="(v_log, idx) in verifyLogsList(item.model)" :key="idx">
|
|
124
|
+
<view class="verify-cot">
|
|
125
|
+
<textarea :value="v_log.note" disabled>
|
|
126
|
+
</textarea>
|
|
127
|
+
</view>
|
|
128
|
+
<view class="verify-cot">
|
|
129
|
+
<view class="verify-title">{{item.options.operation}}</view>
|
|
130
|
+
<view>{{v_log['shenpiYijian']}}</view>
|
|
131
|
+
</view>
|
|
132
|
+
<view class="verify-cot">
|
|
133
|
+
<view class="verify-title">{{item.options.operator}}</view>
|
|
134
|
+
<view>{{v_log['realname']}}</view>
|
|
135
|
+
</view>
|
|
136
|
+
<view class="verify-cot">
|
|
137
|
+
<view class="verify-title">{{item.options.operationTime}}</view>
|
|
138
|
+
<view>{{v_log['shenpiTime']}}</view>
|
|
139
|
+
</view>
|
|
140
|
+
</view>
|
|
141
|
+
</view>
|
|
79
142
|
<view class="verify-cot">
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
143
|
+
<m-textarea
|
|
144
|
+
:max-length="item.options.commentsLength"
|
|
145
|
+
show-word-limit
|
|
146
|
+
:value="models[item.model].comments"
|
|
147
|
+
:disabled="item.model !== verifyNode" :placeholder="'请输入您的意见'"
|
|
148
|
+
@change="val => handlerText(val, item.model)">
|
|
149
|
+
</m-textarea>
|
|
84
150
|
</view>
|
|
85
151
|
<view v-if="item.model == verifyNode" class="verify-cot">
|
|
86
152
|
<view class="verify-title">{{item.options.operation}}</view>
|
|
@@ -89,7 +155,7 @@
|
|
|
89
155
|
input-align="right" v-model="suggestType" placeholder="请点击选择"
|
|
90
156
|
@click="selectShow = true"></u-input>
|
|
91
157
|
<u-select mode="single-column" :list="selectList" v-model="selectShow"
|
|
92
|
-
@confirm="selectConfirm($event,item
|
|
158
|
+
@confirm="selectConfirm($event,item)"></u-select>
|
|
93
159
|
<!-- <picker @change="bindPickerChange($event, item.model)" :value="pickerIndex" :range="selectDataTransForm(suggest)">
|
|
94
160
|
<view class="uni-input">{{models[item.model].operation ? models[item.model].operation : '请选择'}}</view>
|
|
95
161
|
</picker> -->
|
|
@@ -133,12 +199,13 @@
|
|
|
133
199
|
import Pubsub from 'pubsub-js'
|
|
134
200
|
import evanFormItem from "../evan-form-item/evan-form-item";
|
|
135
201
|
import evanForm from "../evan-form/evan-form";
|
|
202
|
+
import mTextarea from "../m-textarea/m-textarea";
|
|
136
203
|
export default {
|
|
137
204
|
name: 'formContainer',
|
|
138
|
-
props: ['dataObj', 'value', 'isButton', 'verifyNode', 'suggest', 'isCorrect', 'isDraft', 'formId', 'linkage', "labelPosition",
|
|
205
|
+
props: ['dataObj', 'value', 'isButton', 'verifyNode', 'verifyLogs', 'suggest', 'isCorrect', 'isDraft', 'formId', 'linkage', "labelPosition",
|
|
139
206
|
'isApply'
|
|
140
207
|
],
|
|
141
|
-
components: { evanFormItem ,evanForm },
|
|
208
|
+
components: { evanFormItem ,evanForm, mTextarea },
|
|
142
209
|
data() {
|
|
143
210
|
return {
|
|
144
211
|
timer: null,
|
|
@@ -263,6 +330,11 @@
|
|
|
263
330
|
// this.initPo();
|
|
264
331
|
},
|
|
265
332
|
methods: {
|
|
333
|
+
verifyLogsList(model) {
|
|
334
|
+
const list = this.verifyLogs[model]
|
|
335
|
+
if (model !== this.verifyNode && list.length >= 1) return list.slice(0, list.length - 1)
|
|
336
|
+
return list
|
|
337
|
+
},
|
|
266
338
|
//回显关联组件的操作
|
|
267
339
|
getchildren() {
|
|
268
340
|
// console.log(this.$children[0])
|
|
@@ -305,11 +377,28 @@
|
|
|
305
377
|
this.tableData[tableKey][tableIndex].columns.splice(key, 1, widget)
|
|
306
378
|
},
|
|
307
379
|
// 选择操作类型
|
|
308
|
-
selectConfirm(e,
|
|
380
|
+
selectConfirm(e, item) {
|
|
381
|
+
const { model, options, type } = item
|
|
309
382
|
e.map((val, index) => {
|
|
310
383
|
this.models[model].operation = val.label;
|
|
311
384
|
})
|
|
312
385
|
this.suggestType = this.models[model].operation
|
|
386
|
+
if (type === 'hnkj-verify') {
|
|
387
|
+
const select = this.selectList.find(item => item.label === this.suggestType)
|
|
388
|
+
const { enableSign , enableSeal } = options
|
|
389
|
+
if (select.description === 'TIJIAO') {
|
|
390
|
+
this.$u.get('workhall/userseal/queryById').then(res => {
|
|
391
|
+
if (res.success) {
|
|
392
|
+
this.models[model].userSign = enableSign ? res.result.userSign : ''
|
|
393
|
+
this.models[model].userSeal = enableSeal ? res.result.userSeal : ''
|
|
394
|
+
}
|
|
395
|
+
})
|
|
396
|
+
} else {
|
|
397
|
+
this.models[model].userSign = ''
|
|
398
|
+
this.models[model].userSeal = ''
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
|
|
313
402
|
},
|
|
314
403
|
scrollToTop(top) {
|
|
315
404
|
const _this = this
|
|
@@ -343,8 +432,8 @@
|
|
|
343
432
|
this.models[model].operation = this.suggest[e.target.value].value;
|
|
344
433
|
console.log(this.models)
|
|
345
434
|
},
|
|
346
|
-
handlerText(
|
|
347
|
-
this.models[model].comments =
|
|
435
|
+
handlerText(value, model) {
|
|
436
|
+
this.models[model].comments = value
|
|
348
437
|
},
|
|
349
438
|
/***单选修改赋值***/
|
|
350
439
|
selectorOption(picked, model) {
|
|
@@ -736,7 +825,7 @@
|
|
|
736
825
|
justify-content: space-between;
|
|
737
826
|
align-items: center;
|
|
738
827
|
|
|
739
|
-
textarea {
|
|
828
|
+
m-textarea, .textarea-wrapper {
|
|
740
829
|
display: block;
|
|
741
830
|
width: 100%;
|
|
742
831
|
height: 120rpx;
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="textarea-wrapper">
|
|
3
|
+
<textarea
|
|
4
|
+
:maxlength="maxLength"
|
|
5
|
+
v-model="modelValue"
|
|
6
|
+
:disabled="disabled"
|
|
7
|
+
:placeholder="placeholder"
|
|
8
|
+
>
|
|
9
|
+
</textarea>
|
|
10
|
+
<view v-if="showWordLimit && !disabled" class="no-print textarea-wrapper__count">
|
|
11
|
+
{{ textLength }} <text v-if="textMaxLength">/{{ textMaxLength }}</text>
|
|
12
|
+
</view>
|
|
13
|
+
</view>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script>
|
|
17
|
+
export default {
|
|
18
|
+
name: "mTextarea",
|
|
19
|
+
props: {
|
|
20
|
+
disabled: Boolean,
|
|
21
|
+
maxLength: Number,
|
|
22
|
+
value: {
|
|
23
|
+
type: String,
|
|
24
|
+
default: ""
|
|
25
|
+
},
|
|
26
|
+
placeholder: String,
|
|
27
|
+
// 是否展示字数统计
|
|
28
|
+
showWordLimit: {
|
|
29
|
+
type: Boolean,
|
|
30
|
+
default: false,
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
data() {
|
|
34
|
+
return {
|
|
35
|
+
modelValue: this.value
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
created() {
|
|
39
|
+
this.modelValue = this.value
|
|
40
|
+
},
|
|
41
|
+
computed: {
|
|
42
|
+
// 长度控制
|
|
43
|
+
textLength() {
|
|
44
|
+
const textLength = (this.modelValue || "").length;
|
|
45
|
+
if (this.textMaxLength === 0) return ''
|
|
46
|
+
return textLength
|
|
47
|
+
},
|
|
48
|
+
textMaxLength() {
|
|
49
|
+
const maxLength = parseInt(this.maxLength || '0')
|
|
50
|
+
if (maxLength >= Number.MAX_SAFE_INTEGER) {
|
|
51
|
+
return 0
|
|
52
|
+
}
|
|
53
|
+
return maxLength
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
watch: {
|
|
57
|
+
modelValue(val) {
|
|
58
|
+
this.$emit('change', val)
|
|
59
|
+
},
|
|
60
|
+
value(val) {
|
|
61
|
+
this.modelValue = val
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
}
|
|
65
|
+
</script>
|
|
66
|
+
|
|
67
|
+
<style lang="scss" scoped>
|
|
68
|
+
textarea {
|
|
69
|
+
height: 100%;
|
|
70
|
+
width: 100%;
|
|
71
|
+
}
|
|
72
|
+
.textarea-wrapper {
|
|
73
|
+
z-index: 999;
|
|
74
|
+
position: relative;
|
|
75
|
+
display: block;
|
|
76
|
+
height: 100%;
|
|
77
|
+
box-sizing: border-box;
|
|
78
|
+
|
|
79
|
+
.textarea-wrapper__count {
|
|
80
|
+
color: #808080;
|
|
81
|
+
background: #fff;
|
|
82
|
+
position: absolute;
|
|
83
|
+
font-size: 12px;
|
|
84
|
+
bottom: -12rpx;
|
|
85
|
+
right: 10rpx;
|
|
86
|
+
line-height: 12px;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
</style>
|