icop

全局组件或配置

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) {
    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 {temp}
  }

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
中间的“手机”，因为内容和逻辑基本相同，所以使用了工厂的形式，

          {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)
                }
              })
            }
          })}
        

通过传参的方式来实现功能的个性化

2.buildTemplate

这部分基本是业务逻辑，因此没有什么很值得说的地方，逻辑和vntt的基本相同