全局组件或配置
1. 表格查询页搜索框
点击reset或点击下拉选择框的清空按钮需要专为实体默认选中
位置：src\components\SearchPageCore\search_field\select\index.tsx
在配置下拉选择框的内容时，placeholder一般会写为"Search By XXX"或者是"All XXX"的形式，而清空后所需要留下的实体默认选项的格式为"All XXX"，所以写了一个方法来过滤掉pleaseholder并且获取"XXX"的内容，同时这个方法还是用于获取UI检视时鼠标悬浮在搜索框的toast内容
位置：src\components\SearchPageCore\search_field\utils.ts
const optionsArr = JSON.parse(JSON.stringify(config.options))
if (
config.defalutFirstItem &&
Object.prototype.toString.call(config.defalutFirstItem) ===
'[object Object]'
) {
optionsArr.unshift(config.defalutFirstItem)
} else if (config.defalutFirstItem && config.defalutFirstItem === 'none') {
} else {
optionsArr.unshift({
id: -1, // All代表为-1
name: this.$t(
config.placeholder
? `All ${getToastTitle(config.placeholder)}`
: 'All'
)
})
}
过滤placeholder后获取的实体选项名赋值为-1，在搜索的时候将-1的值转换为undefined即可
转-1为undefined
注意，由于是在搜索栏才会将-1转为undefined，因此在某些页面的导出表格按钮需要自行手动转换一下
手动转换
2. 搜索框日期默认值
2.3.3改版后，大部分的搜索框日期精度由时间变为了日，但搜索时仍需要默认为00:00:00至23:59:59，因此在原本的全局方法中新增了该功能的改版
位置：src\components\SearchPageCore\date_formatter.ts
public transferCloseDateFieldArrayByDate(rawField: Array<string>) {
if (!rawField || rawField.length < 2) {
return null
}
return [
moment(rawField[0]).format('YYYY-MM-DD 00:00:00'),
moment(rawField[1]).format('YYYY-MM-DD 23:59:59')
]
}
3. 表格空白处为横线，超三行打点
位置：src\components\ExtendTable\index.vue
private transformCellTextFn({ text, column, record }: any) {
let temp = text || '-'
return <table-ellipsis v-model={temp}>{temp}</table-ellipsis>
}
antdv的表格有一个方法属性为transformCellText可以统一调试输出格式，这里用了一个组件来处理传入的文案，如果是纯文字，就判断字数（这里可以优化为超三行，但UI没严格要求）打点，如果是空就显示-
4. 表格操作栏
操作栏
原Imos只有左侧固定，而icop新增了右侧固定，所以拿几个重要的地方出来讲一下
位置：src\components\ExtendTable\colSet.vue
首先操作栏的实现主要通过sortablejs，可以通过sortablejs地址查看配置项
colSet组件是通过v-model来相应的，所以每次拖拽之后都需要$emit(input)最新的数据。和平常的组件不太相同的是，sortablejs所操作的currentData，并不是渲染整个拖拽列表的参数，渲染列表的参数是checkboxGroupData，这两个参数之间是没有响应联系的，也就是说，拖拽操作后，currentData会记录哪列固定在左侧哪列固定在右侧等，但是负责渲染的checkboxGroupData却没有变化，它打印出来的还是初始值
但是icop新增了固定到左侧和固定到右侧的按钮
固定到左侧按钮
这两个按钮直接操作
currentData是没用的，还需要通过filterCols方法把数据更新到表格，以及changeCheckboxGroupData方法重置一下checkboxGroupData而固定左侧和固定右侧文案的显示也是操作checkboxGroupData`才能实现了
5.skui_drawer右侧弹窗组件
位置：src\components\skui_drawer.vue
逻辑比较简单，需要注意的是，UI要求弹窗内大部分情况的表单输入框长度为480px，因此增加了一个prop属性originFormWidth来进行区分
6.skui_base_space自定义间隔组件
位置：src\components\skui_base_space\index.vue
逻辑一样简单，这个组件是所有表格操作列的间隔组件，并且根据UI要求右侧增加了margin
.skui_base_space
局部组件、页面或配置
HyperSMS Build Template页面
位置：src\views\HyperSMS\template\buildTemplate.vue
该页面根据页面结构通过继承分成了两个文件，左边的Material栏和中间的“手机”划分为一个页面，而右侧的主要操作区域和页面的主要逻辑比如回显，提交等作为一个文件，先讲讲左边部分
1.baseTemplate
位置：src\views\HyperSMS\template\templateUtils\baseTemplate.vue
中间的“手机”，因为内容和逻辑基本相同，所以使用了工厂的形式，
<div class="inner hyper-sms-mobile-inner">
{this.smsTpl.map((el: any, index: number) => {
if (innerItemFactory.isSupportType(el.type)) {
return innerItemFactory.build(el.type, {
fn: (e: any) => {
e.stopPropagation()
return this.editInnerItem(el, index)
},
isActive: index === this.editIndex,
isMask: index === this.maskIndex,
text: el.text,
media_path_content: el.media_path_content,
name: el.name,
size: el.size,
type: el.type,
media_path_poster: el.media_path_poster,
mouseoverFn: () => {
this.maskIndex = index
},
mouseLeaveFn: () => {
this.maskIndex = null
},
upFn: () => {
return this.sortUp(index)
},
downFn: () => {
return this.sortDown(index)
},
deleteFn: (e: any) => {
e.stopPropagation()
return this.del(index, el)
}
})
}
})}
</div>
通过传参的方式来实现功能的个性化
2.buildTemplate
这部分基本是业务逻辑，因此没有什么很值得说的地方，逻辑和vntt的基本相同
网友评论