CreateView

基于视图渲染的一级列表的页面组件

说明

表格的操作列不用代码写死，直接在视图按钮那配置，将是否操作按钮选择 true
表格操作列中需要在单独 tab 中显示时，在备注配置 showTab=[tabIcon1,tabIcon2,...]
表格中某些列需要单独在某个 tab 中显示时，在备注配置 showTab=[tabIcon1,tabIcon2,...]
表格的功能按钮需要单独在某个 tab 中显示时，在备注配置 showTab=[tabIcon1,tabIcon2,...]
表格的功能按钮的类型现在支持主，次，普通三种类型的按，默认是 default，在在备注配置 btnLevel 即可，比如 btnLevel=1
视图没有页签的需要自己手动调一下 getTableList 方法
金额范围查询框字段命名 filedCode1-filedCode2
一级列表需要行内编辑时，配置data_type后再给remark配置：isForm=1，否则不会渲染表单组件
列可点击时将列配置为链接类型，可直接使用handleItemClick执行列项的单击事件
视图上给查询条件内某个字段配置了默认值，但是页面初次查询时没有带上默认值的，需要给createview组件加上v-if="allUiViews"和searchConfigs：{defaultData:{}}

基本用法

组件演示

示例

vue

<template>
  <div>
    <create-view
      :all-ui-views="allUiViews"
      :data-source="tableData"
      :is-scan="true"
      :table-configs="tableConfigs"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
// 引用组件
import { CreateView } from 'ctj-ui-next'

const allUiViews = reactive({})
const tableData = reactive([])

const tableConfigs = reactive<tableConfig>({
  request: {
    api: '/reBill/getBillPagination',
    params: {
      busiTypeId: '801',
      menuid: 'e56aeeb645184931bc2b44bbdb39f39f',
    },
  },
  viewConfig: {
    rowKey: 'bill_no',
    pagination: false,
    showIndex: true,
    checkType: 'checkbox',
  },
  cusPagination: {
    pageSize: 10,
    current: 1,
    total: 20,
  },
  footerConfig: {
    checkedSum: {
      title: '选中合计',
      titleKey: 'bill_no',
      totalKey: ['pay_money'],
    },
    totalSum: {
      title: '总计',
      titleKey: 'bill_no',
      totalKeys: ['pay_money'],
      data: {},
    },
  },
})

</script>
<style lang="less" scoped></style>

<template>
  <div>
    <create-view
      :all-ui-views="allUiViews"
      :data-source="tableData"
      :is-scan="true"
      :table-configs="tableConfigs"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
// 引用组件
import { CreateView } from 'ctj-ui-next'

const allUiViews = reactive({})
const tableData = reactive([])

const tableConfigs = reactive<tableConfig>({
  request: {
    api: '/reBill/getBillPagination',
    params: {
      busiTypeId: '801',
      menuid: 'e56aeeb645184931bc2b44bbdb39f39f',
    },
  },
  viewConfig: {
    rowKey: 'bill_no',
    pagination: false,
    showIndex: true,
    checkType: 'checkbox',
  },
  cusPagination: {
    pageSize: 10,
    current: 1,
    total: 20,
  },
  footerConfig: {
    checkedSum: {
      title: '选中合计',
      titleKey: 'bill_no',
      totalKey: ['pay_money'],
    },
    totalSum: {
      title: '总计',
      titleKey: 'bill_no',
      totalKeys: ['pay_money'],
      data: {},
    },
  },
})

</script>
<style lang="less" scoped></style>

属性 Props

参数	说明	类型	可选值	默认值
allUiViews	视图数据(必填)	UiData	-	-
dataSource	表格数据（api 和 dataSource 两个必传其中一个）	any[]	-	-
selectList	新增需要的单据数据	any[]	-	-
tableConfigs	表格配置数据	tableConfig	参考tableConfigs 配置	-
isScan	是否需要使用扫描仪	boolean	-	false
options	搜索框的下拉数据	EleData	-	-
defaultActiveTab	默认高亮的 tab	string	tab 的 icon 或者 status	第一个 tab 的 tab 的 icon
tabCountParams	请求页签数的接口参数	TabCountParams	参考tabCountParams 配置	-
searchConfigs	搜索框的配置	SearchConfig	参考SearchConfig 配置	-
isTransferQuery	是否转换查询参数	boolean	-	false
tableExport	导入的参数	TableExportType	参考tableExport 配置	false
queryExtra	通用的接口参数	QueryExtra	参考queryExtra 配置	-
isCalcHeight	是否在create-view计算表格高度	boolean	-	true
tabsCountData	页签数量数据	Record<string, any>	-	-
columnVisibleSet	控制列显隐的按钮是否显示	Boolean	true ｜ fasle	true

事件 Events

事件名	说明	回调参数	参数说明
tabChange	tab 标签 change 事件	(tabs_status:string,activeTab)	tabs_status 当前 tab 的 tabs_status,activeTab是当前页签
doSearch	搜索事件	(queries:query)	queries 当前页面所有的查询值
scanSearch	扫描仪搜索事件	(queries:query)	queries 当前页面所有的查询值
resetQuery	重置事件	-	-
billChecked	单据点击事件	(menuitem:any)	menuitem:当前点击的单据信息
btnClick	按钮点击事件	({icon,dataSource}:BtnClickParams)	icon:当前点击的按钮的 icon，dataSource 当前页签下的表格数据
operate	操作列点击事件	(type, row, index, item)	type:当前点击的按钮type，row 当前行数据， index序号，item当前点击按钮的全部信息
handlePageChange	分页 change 事件	(page,pageSize)	page:当前页，pageSize 当前分页 size
handleItemClick	表格列的点击事件	(record, rowIndex, column)	record:当前行数据，rowIndex 当前行 index，column:当前点击的 column
handleSelection	选择 change 事件	(selectedRows)	selectedRows:选中的行数据
onExpand	行展开时触发	(expanded: boolean, record: any)	expanded 是否展开 / record 展开的行的数据
formChange	搜索框表单change事件	(params: tableFormParams)	-
importFulfill	导入文件完成事件，没传tempType时的导入完成事件	formData	文件数据
downloadTemplate	下载按钮点击事件，不传templatePath，tempType时抛出的事件	-	-
tableFormChange	表格可编辑时的change事件	({value, column, index, record})	value 当前值 / record 当前行数据 / index 当前行序号 / column 当前列

tableConfigs 配置

参数	说明	类型	可选值	默认值
request	请求参数的设置,这个参数与 dataSource 两个必传其中一个，api 为列表的请求接口，params 为接口除了查询，分页额外需要传的参数	ApiRequest	参考request 配置	默认请求method为get
viewConfig	antd-vue 表格的配置参数	tableViewConfig	参考viewConfig 配置	-
cusPagination	分页配置	pageConfig	参考pageConfig 配置	-
footerConfig	合计行，选中合计配置	summarys	参考footerConfig 配置	-
columnConfigs	自定义列	Record<string,CusColumn>	参考columnConfigs 配置	-
tableRequestCallback	接口请求参数提前处理函数	TableDataCallback	参考tableRequestCallback 详情	-
tableDataCallback	接口返回数据处理函数	TableDataCallback	参考tableDataCallback 详情	-

viewConfig 配置

参数	说明	类型	可选值	默认值
pagination	是否需要自带分页	boolean	-	false
scroll	表格 Scroll 参数	'{x:number,y:number}'	-	-
customRow	同 antd-vue 的 customRow	Function(record, index)	-	-
bordered	是否需要边框	boolean	-	true
rowSelection	同 gap-table	-	-	-
size	同 gap-table	string	-	-
isSticky	同 gap-table	boolean	-	-
stripe	同 gap-table	boolean	-	-
checkType	同 gap-table	'' / 'checkbox' /'radio'	-	-
rowKey	同 gap-table	string	-	-
showIndex	同 gap-table	boolean	-	-

viewConfig 的配置参考 gap-table 配置

pageConfig 配置

viewConfig 的配置参考 gap-table pageConfig 配置

footerConfig 配置

viewConfig 的配置参考 gap-table footerConfig 配置

columnConfigs 配置

参数	说明	类型	可选值	默认值
visible	是否显示	boolean	-	-
slotName	插槽名称	string	-	-
control_type	column 类型	string	-	-
customEllipsis	是否显示提示	boolean	-	false

操作列的配置 key 值为 operation

其余参数参考 gap-table column 配置

tabCountParams 配置

参数	说明	类型	可选值	默认值
businessType	业务类型	string	-	-
其余参数	-	-	any	-

SearchConfig 配置

参数	说明	类型	可选值	默认值
isConvert	是否需要将搜索框内数组类的转成','连接	boolean	-	内部默认会根据 method 去判断，get 为 true，post 为 false
columnConfigs	查询项的配置	columnConfigs	-	-
buttonConfigs	查询区按钮的配置	'{icon:{visible:boolean,loading:boolean}}'	-	visible控制显隐，loading控制按钮的加载状态
defaultData	查询表单默认值	any	-	-

其余参数参考 gic-search-form formConfig 配置

tableExport 配置

参数	说明	类型	可选值	默认值
visible	是否需要显示导出	boolean	-	先需要在视图上配一下导出，视图上显示导出的时候，这个visible会进一步控制显隐
request	接口参数	ApiRequest	参考request 配置	传了这个，导出的接口包括传参完全按这个来
dataCallback	接口成功后的回调	(data)=>{}	-	传了这个，接口请求的后续操作自己处理
excelCallback	前端excel导出特殊列处理函数	(row,column)=>{}	-	在函数里处理需要处理的列

request 配置

参数	说明	类型	可选值	默认值	是否必传
servicePre	接口服务前缀	string	-	-	否
api	接口	string	-	-	是
method	请求方式	'get' / 'post'	'get' / 'post'	'get'	否
params	接口params	Record<string, any>	-	-	-
body	接口body	Record<string, any>	-	-	-

queryExtra 配置

因为create-view组件内部现在有很多内部请求，有很多接口用的参数有相同的，为了避免重复传，公共的参数放在这里

参数	说明	类型	可选值	默认值
businessType	业务id	string	-	-
menuId	菜单id	string	-	-

tableRequestCallback 详情

tableRequestCallback 函数主要用于接口请求不是queryDto的形式，自己通过该函数处理请求的参数

const tableConfigs = reactive<tableConfig>({
  tableRequestCallback: (data:any) => {
    // data 是组件传出来的查询条件，当前分页数据，页签状态
    return {
      query: { // 查询query
        ...data
      },
      body:{ // 接口body

      }
    }
  },
})

const tableConfigs = reactive<tableConfig>({
  tableRequestCallback: (data:any) => {
    // data 是组件传出来的查询条件，当前分页数据，页签状态
    return {
      query: { // 查询query
        ...data
      },
      body:{ // 接口body

      }
    }
  },
})

tableDataCallback 详情

tableDataCallback 函数主要用于表格接口返回的格式不是统一的格式，自己处理返回数据的格式

const tableConfigs = reactive<tableConfig>({
  tableDataCallback: (data: any) => {
    // data 是接口请求的返回数据
    const resultList = data?.resultList?.map((item: any) => item.kpiTemplateDTO)
    return {
      resultList: resultList || [], // 表格数据字段
      totalRows: data?.totalRows, // 总条数
      footer: [], // 底部总计数据
    }
  },
})

const tableConfigs = reactive<tableConfig>({
  tableDataCallback: (data: any) => {
    // data 是接口请求的返回数据
    const resultList = data?.resultList?.map((item: any) => item.kpiTemplateDTO)
    return {
      resultList: resultList || [], // 表格数据字段
      totalRows: data?.totalRows, // 总条数
      footer: [], // 底部总计数据
    }
  },
})

插槽

插槽名称	说明
tableButtons	搜索区按钮
tableInfo	表格上的信息插槽
table	表格区的插槽，自定义内容时可以使用这个
createViewEllipsis	表格列显示tip的插槽
expandedRowRender	表格展开的插槽

方法和数据

方法名	说明	参数	参数说明
dataSource	表格的数据	-	-
queries	搜索的数据	-	-
transferQueryData	模糊查询转化的数据	-	-
getTableList	获取表格数据的方法	(isScan,isUpdateTab,isDelete)	isScan 是否是扫描仪的获取数据，isUpdateTab 是否更新 tab 页签数,isDelete是否是删除之后调的更新
setSearchFieldValue	设置查询项的值	(fieldCode,value)	fieldCode 需要设置的项 value 设置的值

接口形式以及参数说明

接口查询支持 get 和 post 请求，分页、totalRowColumns、taskStatus、查询条件在 get 请求时放在 params，post 请求放在 body
接口获取方式

let queries = {
  nowPage: 1, // 当前页
  nowPageNo: 10, // pageSize
  taskStatus: 001, // 页签 taskStatus
  totalRowColumns, // 总计列
}
let body = {}
if(tableRequestCallback){
  const data = tableRequestCallback(queries);
  query = data.query || {}
  body = data.body || {}
} else if (method == 'post') {
  body = Object.assign({}, queries, body)
} else {
  query = Object.assign({}, queries, query)
}
const res = await getTableData(api, { query, body }, method)
if (res.status === ResStatus.success) {
  cusPagination.total = res.data.totalRows // 总行数
  totalSum.data = res.data.footer && res.data.footer[0] // 总计
  dataSource = res.data.resultList // 表数据
}

let queries = {
  nowPage: 1, // 当前页
  nowPageNo: 10, // pageSize
  taskStatus: 001, // 页签 taskStatus
  totalRowColumns, // 总计列
}
let body = {}
if(tableRequestCallback){
  const data = tableRequestCallback(queries);
  query = data.query || {}
  body = data.body || {}
} else if (method == 'post') {
  body = Object.assign({}, queries, body)
} else {
  query = Object.assign({}, queries, query)
}
const res = await getTableData(api, { query, body }, method)
if (res.status === ResStatus.success) {
  cusPagination.total = res.data.totalRows // 总行数
  totalSum.data = res.data.footer && res.data.footer[0] // 总计
  dataSource = res.data.resultList // 表数据
}

接口请求标准格式

// get 请求 主要参数放在params
{
  nowPage: number
  nowPageNo: number
  taskStatus:string,
  totalRowColumns:string[]
  queryField?: {
    [key: string]: any
  }
}
// post请求 主要参数放在body
{
  paging?: {
    nowPage: number
    nowPageNo: number
  }
  queryMap?: {
    [key: string]: any
  }
  fuzzyMap?: {
    [key: string]: any
  }
  queryField?: {
    [key: string]: any
  }
  taskStatus:string,
  totalRowColumns:string[]
}

// get 请求 主要参数放在params
{
  nowPage: number
  nowPageNo: number
  taskStatus:string,
  totalRowColumns:string[]
  queryField?: {
    [key: string]: any
  }
}
// post请求 主要参数放在body
{
  paging?: {
    nowPage: number
    nowPageNo: number
  }
  queryMap?: {
    [key: string]: any
  }
  fuzzyMap?: {
    [key: string]: any
  }
  queryField?: {
    [key: string]: any
  }
  taskStatus:string,
  totalRowColumns:string[]
}

接口返回标准格式

{
   status_code: "0000",
    reason: "查询成功",
    data: { // 只列了使用到了的数据
      totalRows: 1,
      resultList:[]
      footer:[]
    }
}

{
   status_code: "0000",
    reason: "查询成功",
    data: { // 只列了使用到了的数据
      totalRows: 1,
      resultList:[]
      footer:[]
    }
}

Demo

表格列显示自定义气泡提示

columnConfigs 对应类加上 customEllipsis 属性

vue

const tableConfigs = reactive<tableConfig>({
  columnConfigs: {
    bill_status_display: {
      customEllipsis: true,
    },
  },
})

const tableConfigs = reactive<tableConfig>({
  columnConfigs: {
    bill_status_display: {
      customEllipsis: true,
    },
  },
})

组件那自定义气泡内容插槽,插槽名称 createViewEllipsis,内容写的时候需要判断一下 column 是否是需要显示气泡的列

vue

<create-view
  ref="BillCreateView"
  v-if="allUiViews"
  :all-ui-views="allUiViews"
  :data-source="tableData"
  :selectList="selectData"
  :is-scan="true"
  :table-configs="tableConfigs"
  :search-configs="searchConfig"
  @billChecked="handleBillChecked"
  @tabChange="handleTabChange"
  @handleSelection="handleSelection"
  @btn-click="handleBtnClick"
>
    <template #createViewEllipsis="scope">
      <div>
        <div v-if="scope?.data?.column?.dataIndex === 'bill_status_display'">
          bill_status_display_test
        </div>
      </div>
    </template>
  </create-view>

<create-view
  ref="BillCreateView"
  v-if="allUiViews"
  :all-ui-views="allUiViews"
  :data-source="tableData"
  :selectList="selectData"
  :is-scan="true"
  :table-configs="tableConfigs"
  :search-configs="searchConfig"
  @billChecked="handleBillChecked"
  @tabChange="handleTabChange"
  @handleSelection="handleSelection"
  @btn-click="handleBtnClick"
>
    <template #createViewEllipsis="scope">
      <div>
        <div v-if="scope?.data?.column?.dataIndex === 'bill_status_display'">
          bill_status_display_test
        </div>
      </div>
    </template>
  </create-view>

表格前端导出特殊列处理

前端导出默认是数据没有处理过的值，比如状态列表格数据是code，页面代码根据code转化了name，导出时如果没做处理，就只会显示code，可以在excelCallback里面处理一下

const tableExport = reactive<TableExportType>({
  visible: true,
  excelCallback: (row: any, column: any) => {
    if (column.dataIndex === 'is_accept') {
      return row?.is_accept === 1 ? '已受理' : '待受理'; // 返回处理后的数据
    }
  },
});

const tableExport = reactive<TableExportType>({
  visible: true,
  excelCallback: (row: any, column: any) => {
    if (column.dataIndex === 'is_accept') {
      return row?.is_accept === 1 ? '已受理' : '待受理'; // 返回处理后的数据
    }
  },
});

FAQ

导出功能的使用

一, 使用内部导出

传queryExtra 里面 businessType 和 menuId
传 tableExport 的 visible 为true

二, 自己处理导出接口参数，接口路径

传 tableExport 的 request

CreateView ​

基本用法 ​

属性 Props ​

事件 Events ​

tableConfigs 配置 ​

viewConfig 配置 ​

pageConfig 配置 ​

footerConfig 配置 ​

columnConfigs 配置 ​

tabCountParams 配置 ​

SearchConfig 配置 ​

tableExport 配置 ​

request 配置 ​

queryExtra 配置 ​

tableRequestCallback 详情 ​

tableDataCallback 详情 ​

插槽 ​

方法和数据 ​

接口形式以及参数 说明 ​

Demo ​

表格列显示自定义气泡提示 ​

表格前端导出特殊列处理 ​

FAQ ​

导出功能的使用 ​