|
|
|
|
@ -0,0 +1,178 @@
|
|
|
|
|
<!--
|
|
|
|
|
* @Desc: 东胜文本框
|
|
|
|
|
* @Author: lijj
|
|
|
|
|
* @Date: 2024-08-05 16:16:08
|
|
|
|
|
-->
|
|
|
|
|
<template>
|
|
|
|
|
<div class="ds-textarea">
|
|
|
|
|
<div class="ds-textarea-opt">
|
|
|
|
|
<span title="放大(big)" class="iconfont icon-ic_search24px" @click="toBig"></span>
|
|
|
|
|
<span v-for="item in cutList" :key="item" class="ds-cut-btn" @click="changeCode(item)">{{ item }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<a-textarea
|
|
|
|
|
v-bind="$attrs"
|
|
|
|
|
:disabled="props.disabled"
|
|
|
|
|
v-model:value="state"
|
|
|
|
|
@blur="textareaBlur"
|
|
|
|
|
/>
|
|
|
|
|
<a-modal
|
|
|
|
|
class="ds-modal-small"
|
|
|
|
|
:title="props.label"
|
|
|
|
|
width="70%"
|
|
|
|
|
v-model:visible="contentFlag"
|
|
|
|
|
>
|
|
|
|
|
<a-form
|
|
|
|
|
layout="vertical"
|
|
|
|
|
>
|
|
|
|
|
<a-form-item>
|
|
|
|
|
<a-textarea v-model:value="state" :disabled="props.disabled" style="min-height: 50vh;"></a-textarea>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-form>
|
|
|
|
|
<template #footer></template>
|
|
|
|
|
</a-modal>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
import { defineComponent, ref, unref, watch } from 'vue'
|
|
|
|
|
import { useRuleFormItem } from '/@/hooks/component/useFormItem'
|
|
|
|
|
import { useAttrs } from '/@/hooks/core/useAttrs'
|
|
|
|
|
import { useI18n } from '/@/hooks/web/useI18n'
|
|
|
|
|
export default defineComponent({
|
|
|
|
|
name: 'InputTextArea',
|
|
|
|
|
inheritAttrs: false,
|
|
|
|
|
props: {
|
|
|
|
|
value: [Array, Object, String, Number],
|
|
|
|
|
disabled: {
|
|
|
|
|
type: Boolean
|
|
|
|
|
},
|
|
|
|
|
label: { type: String }
|
|
|
|
|
},
|
|
|
|
|
emits: ['change', 'update:value'],
|
|
|
|
|
setup(props, { emit }) {
|
|
|
|
|
const attrs = useAttrs()
|
|
|
|
|
const { t } = useI18n()
|
|
|
|
|
const [state] = useRuleFormItem(props, 'value', 'change')
|
|
|
|
|
// 切割的字符数组
|
|
|
|
|
const cutList = attrs.value.slice || []
|
|
|
|
|
function emitChange() {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
// 放大
|
|
|
|
|
const contentFlag = ref(false)
|
|
|
|
|
const toBig = () => {
|
|
|
|
|
contentFlag.value = true
|
|
|
|
|
}
|
|
|
|
|
// function handleChange(_, ...args) {
|
|
|
|
|
// emit('change', _, ...args)
|
|
|
|
|
// emitData.value = args
|
|
|
|
|
// }
|
|
|
|
|
// 切割字符
|
|
|
|
|
const changeCode = (len) => {
|
|
|
|
|
const value = state.value
|
|
|
|
|
var textArr: any = value.match(/.+[\n]*/g)
|
|
|
|
|
var subValue = ''
|
|
|
|
|
for (var j = 0; j < textArr.length; j++) {
|
|
|
|
|
var subArr = textArr[j].match(/[\w]+[ ]*[\n]*|[\d]+[ ]*[\n]*|[^\w\d]+[ ]*[\n]*/g)
|
|
|
|
|
var count = 0
|
|
|
|
|
for (var i = 0; i < subArr.length; i++) {
|
|
|
|
|
count += subArr[i].replace(/\n/g, '').length
|
|
|
|
|
while (count > len) {
|
|
|
|
|
subValue += '\n'
|
|
|
|
|
count = subArr[i].replace(/\n/g, '').length
|
|
|
|
|
if (count > len) {
|
|
|
|
|
subValue += subArr[i].substring(0, len)
|
|
|
|
|
subValue += '\n'
|
|
|
|
|
subArr[i] = subArr[i].substring(len)
|
|
|
|
|
count = subArr[i].replace(/\n/g, '').length
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
subValue += subArr[i]
|
|
|
|
|
}
|
|
|
|
|
if (j + 1 < textArr.length) {
|
|
|
|
|
subValue += '\n'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
subValue = subValue.replace(/[\n]+/g, '\n')
|
|
|
|
|
subValue = subValue.replace(/[ ]+[\n]+/g, '\n')
|
|
|
|
|
subValue = subValue.replace(/[ ]+$/g, '')
|
|
|
|
|
subValue = subValue.replace(/^\s+/, '')
|
|
|
|
|
state.value = subValue
|
|
|
|
|
}
|
|
|
|
|
function ToCDB(str) {
|
|
|
|
|
var tmp = ''
|
|
|
|
|
for (var i = 0; i < str.length; i++) {
|
|
|
|
|
if (str.charCodeAt(i) > 65248 && str.charCodeAt(i) < 65375) {
|
|
|
|
|
tmp += String.fromCharCode(str.charCodeAt(i) - 65248)
|
|
|
|
|
} else {
|
|
|
|
|
tmp += String.fromCharCode(str.charCodeAt(i))
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
tmp = tmp.replace(/，/gi, ',')
|
|
|
|
|
tmp = tmp.replace(/。/gi, '.')
|
|
|
|
|
tmp = tmp.replace(/；/gi, ';')
|
|
|
|
|
tmp = tmp.replace(/：/gi, ':')
|
|
|
|
|
tmp = tmp.replace(/？/gi, '?')
|
|
|
|
|
tmp = tmp.replace(/！/gi, '!')
|
|
|
|
|
tmp = tmp.replace(/《/gi, '<<')
|
|
|
|
|
tmp = tmp.replace(/》/gi, '>>')
|
|
|
|
|
tmp = tmp.replace(/‘/gi, "'")
|
|
|
|
|
tmp = tmp.replace(/’/gi, "'")
|
|
|
|
|
tmp = tmp.replace(/、/gi, ',')
|
|
|
|
|
// tab键转换暂时屏蔽，看后台转换的效果，再放开
|
|
|
|
|
tmp = tmp.replace(/\t/gi, ' ')
|
|
|
|
|
return tmp
|
|
|
|
|
}
|
|
|
|
|
// 转换大写
|
|
|
|
|
const textareaBlur = () => {
|
|
|
|
|
if (cutList.length == 0) return
|
|
|
|
|
state.value = ToCDB(state.value).toUpperCase()
|
|
|
|
|
}
|
|
|
|
|
watch(
|
|
|
|
|
() => state.value,
|
|
|
|
|
(v) => {
|
|
|
|
|
emit('update:value', v)
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
return { attrs, t, props, state, toBig, contentFlag, cutList, changeCode, textareaBlur }
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.ds-textarea {
|
|
|
|
|
position: relative;
|
|
|
|
|
&-opt {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: -22px;
|
|
|
|
|
.iconfont {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
height: 16px;
|
|
|
|
|
width: 16px;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
background: #F5F9FC;
|
|
|
|
|
color: @primary-color;
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
margin-left: 4px;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.ds-cut-btn {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 32px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
line-height: 16px;
|
|
|
|
|
margin-left: 4px;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
background: #F5F9FC;
|
|
|
|
|
color: @primary-color;
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
