-
- {{$t('全局过滤')}}
-
-
+
+
+
+ {{$t('全局过滤')}}
+
+
+
+
+
+
+ {{ $t('全局过滤') }}
+
+
+
@@ -311,7 +326,7 @@
watch,
getCurrentInstance
} from 'vue'
-
+ import TypeJson from '@/element-materials/modifier/component/props/components/strategy/json-view.vue'
const generateColumn = (index) => ({
label: window.i18n.t('选项{0}', { n: index }),
prop: `prop${index}`,
@@ -366,7 +381,8 @@
name: 'slot-table',
components: {
- EditFunctionDialog
+ EditFunctionDialog,
+ TypeJson
},
props: {
@@ -400,9 +416,18 @@
{ id: 'status', name: window.i18n.t('状态列') }
]
if (this.projectDetail.framework === 'vue3') {
- list.splice(1, 2)
+ const addType = []
+ if (this.slotConfig?.name.includes('vxe-table-column')) {
+ addType.push({ id: 'seq', name: window.i18n.t('索引序号列（从 1 开始）') }, { id: 'status', name: window.i18n.t('状态列') })
+ }
+ list.splice(2, 2, ...addType)
}
return list
+ },
+ isAllSort () {
+ return (item) => {
+ return item.type !== 'customCol' ? (this.projectDetail.framework !== 'vue3' ? true : !!this.slotConfig?.name.includes('vxe-table-column')) : false
+ }
}
},
diff --git a/lib/client/src/element-materials/modifier/component/slots/render-config/vue3/bk/index.js b/lib/client/src/element-materials/modifier/component/slots/render-config/vue3/bk/index.js
index 54df1fe66..b905a01e2 100644
--- a/lib/client/src/element-materials/modifier/component/slots/render-config/vue3/bk/index.js
+++ b/lib/client/src/element-materials/modifier/component/slots/render-config/vue3/bk/index.js
@@ -122,6 +122,48 @@ const bkRenderMap = {
`
},
+ 'vxe-table-column' ({ val, valueKeys }) {
+ const displayVal = getVal(val)
+ const labelKey = valueKeys?.label || 'label'
+ const fieldKey = valueKeys?.field || 'prop'
+ const sortableKey = valueKeys?.sortable || 'sortable'
+ const filterableKey = valueKeys?.filterable || 'filterable'
+ const props = `
+ :type="item.type"
+ :label="item.${labelKey}"
+ :field="item.${fieldKey}"
+ :status="item.status"
+ :sortable="item.${sortableKey}"
+ :filterable="item.${filterableKey}"
+ :align="item.align"
+ :width="item.width"
+ :index="index"
+ `
+ return `
+
+
+
+
+
+
+
+
+ `
+ },
'bk-collapse-panel' ({ val, valueKeys }) {
const displayVal = getVal(val)
const nameKey = valueKeys?.name || 'name'
diff --git a/lib/client/src/preview/component.js b/lib/client/src/preview/component.js
index 6e6a5b5e8..ead040fbd 100644
--- a/lib/client/src/preview/component.js
+++ b/lib/client/src/preview/component.js
@@ -18,8 +18,10 @@ import '@/common/element'
// 注入全局组件
import renderHtml from '@/components/render/pc/widget/html/index'
import widgetBkTable from '@/components/render/pc/widget/table/table'
+import widgetBluekingTable from '@/components/render/pc/widget/blueking-table/table'
import widgetElTable from '@/components/patch/widget-el-table/index.vue'
import widgetTableColumn from '@/components/render/pc/widget/table/table-column'
+import widgetBluekingTableColumn from '@/components/render/pc/widget/blueking-table/table-column'
import widgetVanPicker from '@/components/render/pc/widget/van-picker'
import bkCharts from '@/components/render/pc/widget/bk-charts/bk-charts'
import chart from '@/components/render/pc/widget/chart/chart'
@@ -73,8 +75,10 @@ const registerSysComponents = () => {
// 注入全局组件
registerComponent('render-html', renderHtml)
registerComponent('widget-bk-table', widgetBkTable)
+ registerComponent('widget-blueking-table', widgetBluekingTable)
registerComponent('widget-el-table', widgetElTable)
registerComponent('widget-table-column', widgetTableColumn)
+ registerComponent('widget-blueking-table-column', widgetBluekingTableColumn)
registerComponent('processForm', processForm)
registerComponent('dataManage', dataManage)
registerComponent('bk-charts', bkCharts)
diff --git a/lib/server/project-template/vue3/project-init-code/lib/client/src/components/patch/widget-blueking-table-column.js b/lib/server/project-template/vue3/project-init-code/lib/client/src/components/patch/widget-blueking-table-column.js
new file mode 100644
index 000000000..982d176ff
--- /dev/null
+++ b/lib/server/project-template/vue3/project-init-code/lib/client/src/components/patch/widget-blueking-table-column.js
@@ -0,0 +1,153 @@
+import dayjs from 'dayjs'
+import {
+ h,
+ resolveComponent
+} from 'vue'
+
+const comparatorMap = {
+ lg: '>',
+ lt: '<',
+ gte: '>=',
+ lte: '<=',
+ eq: '=',
+ neq: '!=',
+ in: 'in',
+ like: 'like'
+}
+
+const getValue = (val) => {
+ if (val === 'true') {
+ return true
+ }
+ if (val === 'false') {
+ return false
+ }
+ if (/^\d+$/.test(val)) {
+ return +val
+ }
+ return val
+}
+
+export default {
+ name: 'widget-blueking-table-column',
+
+ props: {
+ columnType: String,
+ type: String,
+ label: String,
+ field: String,
+ status: Array,
+ sortable: Boolean,
+ filterable: Boolean,
+ width: String,
+ index: Number
+ },
+
+ methods: {
+ bluekingTableFormatter ({ cellValue, row, column }) {
+ if (typeof cellValue === 'object') {
+ return cellValue ? JSON.stringify(cellValue) : '--'
+ } else if (/\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+([+-][0-2]\d:[0-5]\d|Z)/.test(cellValue)) {
+ return cellValue ? dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss') : '--'
+ } else {
+ return cellValue
+ }
+ },
+
+ renderStatus (props, h) {
+ let renderContent = []
+ this.status.forEach(({ when, show }) => {
+ const qualifiedComponent = h(
+ 'span',
+ {
+ style: {
+ display: 'flex',
+ height: '100%',
+ 'alignItems': 'center'
+ }
+ },
+ [
+ h(
+ 'img',
+ {
+ src: `/static/images/icon/${show.status}.svg`,
+ style: {
+ width: '13px',
+ height: '13px',
+ marginRight: '5px'
+ }
+ }
+ ),
+ show.description
+ ]
+ )
+ const rowValue = props?.row?.[when.field]
+ const val = getValue(when.value)
+ switch (when.comparator) {
+ case comparatorMap.eq:
+ if (rowValue === val && when.value.trim() !== '') {
+ renderContent = qualifiedComponent
+ }
+ break
+ case comparatorMap.gte:
+ if (rowValue >= val && when.value.trim() !== '') {
+ renderContent = qualifiedComponent
+ }
+ break
+ case comparatorMap.in:
+ if (rowValue.includes(val) && when.value.trim() !== '') {
+ renderContent = qualifiedComponent
+ }
+ break
+ case comparatorMap.lg:
+ if (rowValue > val && when.value.trim() !== '') {
+ renderContent = qualifiedComponent
+ }
+ break
+ case comparatorMap.like:
+ if (rowValue.includes(val) && when.value.trim() !== '') {
+ renderContent = qualifiedComponent
+ }
+ break
+ case comparatorMap.lt:
+ if (rowValue < val && when.value.trim() !== '') {
+ renderContent = qualifiedComponent
+ }
+ break
+ case comparatorMap.lte:
+ if (rowValue <= val && when.value.trim() !== '') {
+ renderContent = qualifiedComponent
+ }
+ break
+ case comparatorMap.neq:
+ if (rowValue !== val && when.value.trim() !== '') {
+ renderContent = qualifiedComponent
+ }
+ break
+ }
+ })
+ return renderContent
+ }
+ },
+
+ render () {
+ const self = this
+
+ const slots = {}
+
+ if (self.status?.length > 0 && self.$props.type === 'status') {
+ slots.default = (props) => self.renderStatus(props, h)
+ }
+
+ return h(
+ resolveComponent(self.columnType),
+ {
+ formatter: self.bkTableFormatter,
+ ...self.$props,
+ ...self.filterable?.length > 0 ? { filters: self.filterable } : {},
+ type: self.type || 'action'
+ },
+ slots
+ )
+ }
+}
diff --git a/lib/server/project-template/vue3/project-init-code/lib/client/src/components/patch/widget-blueking-table.vue b/lib/server/project-template/vue3/project-init-code/lib/client/src/components/patch/widget-blueking-table.vue
new file mode 100644
index 000000000..4803d9e49
--- /dev/null
+++ b/lib/server/project-template/vue3/project-init-code/lib/client/src/components/patch/widget-blueking-table.vue
@@ -0,0 +1,636 @@
+
+
+
+
+
+
+
+
+ {{ $t('编辑') }}
+
+
+ {{ $t('删除') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('提交') }}
+ {{ $t('取消') }}
+
+
+
+
+
+
+ {{ $t('确定删除') }}【id：{{ deleteData.form.id }}】？
+
+
+
+
+
+
+
+
+
+
diff --git a/lib/server/project-template/vue3/project-init-code/lib/client/src/main.js b/lib/server/project-template/vue3/project-init-code/lib/client/src/main.js
index 61b7b18c2..28f16c56d 100644
--- a/lib/server/project-template/vue3/project-init-code/lib/client/src/main.js
+++ b/lib/server/project-template/vue3/project-init-code/lib/client/src/main.js
@@ -16,10 +16,16 @@ import Exception from '@/components/exception'
import { bus } from '@/common/bus'
import bkui, { bkTooltips, Message } from 'bkui-vue'
import 'bkui-vue/dist/style.css'
+import { TableColumn } from '@blueking/table'
+import '@blueking/table/vue3/vue3.css'
import bkuiVueComplex from '@blueking/bkui-vue-complex'
import renderHtml from '@/components/html'
+// 兼容旧Table数据
import widgetTableColumn from '@/components/patch/widget-table-column.js'
import widgetBkTable from '@/components/patch/widget-bk-table.vue'
+// 新Table数据 vxeTable
+import widgetBluekingTableColumn from '@/components/patch/widget-blueking-table-column.js'
+import widgetBluekingTable from '@/components/patch/widget-blueking-table.vue'
import widgetBkVision from '@/components/patch/widget-bk-vision.vue'
import widgetFormContainer from '@/components/form-engine/renderer/index.js'
import widgetFlowContainer from '@/components/flow-manage-container/index.js'
@@ -42,11 +48,14 @@ auth.requestCurrentUser().then(user => {
.use(bkui)
${useVantLib}
// 挂载全局组件
+ global.mainComponent.component('vxe-table-column', TableColumn)
global.mainComponent.component('app-exception', Exception)
global.mainComponent.component('render-html', renderHtml)
global.mainComponent.component('widget-bk-vision', widgetBkVision)
global.mainComponent.component('widget-table-column', widgetTableColumn)
global.mainComponent.component('widget-bk-table', widgetBkTable)
+ global.mainComponent.component('widget-blueking-table-column', widgetBluekingTableColumn)
+ global.mainComponent.component('widget-blueking-table', widgetBluekingTable)
global.mainComponent.component('widget-form-container', widgetFormContainer)
global.mainComponent.component('widget-flow-manage-container', widgetFlowContainer)
global.mainComponent.component('widget-data-manage-container', widgetDataManageContainer)
diff --git a/lib/server/project-template/vue3/project-init-code/package.json b/lib/server/project-template/vue3/project-init-code/package.json
index a68f09cb6..b40a5e1ce 100644
--- a/lib/server/project-template/vue3/project-init-code/package.json
+++ b/lib/server/project-template/vue3/project-init-code/package.json
@@ -100,6 +100,7 @@
"@blueking/bkui-vue-complex": "latest",
"@blueking/cli-service-webpack": "0.0.0-beta.81",
"@blueking/user-selector": "^1.0.7",
+ "@blueking/table": "^0.0.1-beta.21",
"@toast-ui/editor": "3.1.8",
"@toast-ui/vue-editor": "^3.1.5",
"@typescript-eslint/eslint-plugin": "^5.40.0",
@@ -171,7 +172,7 @@
"mavon-editor": "^2.9.0",
"typeorm": "^0.2.25",
"typescript": "^4.4.3",
- "vue": "~3.2.41",
+ "vue": "3.5",
"vue-echarts": "^5.0.0-beta.0",
"vue-fullscreen": "^2.6.1",
"vue-i18n": "^9.0.0",
diff --git a/lib/shared/page-code/style/default-style/pc-style.js b/lib/shared/page-code/style/default-style/pc-style.js
index 843776af8..86e146a27 100644
--- a/lib/shared/page-code/style/default-style/pc-style.js
+++ b/lib/shared/page-code/style/default-style/pc-style.js
@@ -29,5 +29,8 @@ export default function () {
}
.bk-exception {
margin-top:50px;
+ }
+ .vxe-table .vxe-table--scroll-y-virtual:before{
+ border-left: 0
}`
}
diff --git a/lib/shared/page-code/template/page/prop.js b/lib/shared/page-code/template/page/prop.js
index a45c1d045..31747372c 100644
--- a/lib/shared/page-code/template/page/prop.js
+++ b/lib/shared/page-code/template/page/prop.js
@@ -116,7 +116,7 @@ function getPropsStr (code, type, compId, props, dirProps, slots) {
propsStr += curPropStr
continue
// 处理封装的table组件的分页
- } else if (i === 'pagination' && ['widget-bk-table', 'widget-el-table'].includes(componentType)) {
+ } else if (i === 'pagination' && ['widget-bk-table', 'widget-el-table', 'widget-blueking-table'].includes(componentType)) {
if (['local', 'remote'].includes(payload.type)) {
const paginationStr = Object
.keys(payload.val)
diff --git a/package.json b/package.json
index b63332eab..5cd9fb242 100644
--- a/package.json
+++ b/package.json
@@ -103,7 +103,7 @@
"app-root-path": "~3.0.0",
"async-validator": "~1.8.1",
"aws-sdk": "^2.736.0",
- "bk-lesscode-render": "1.0.0-beta.4",
+ "bk-lesscode-render": "1.1.0-beta.1",
"axios": "~1.6.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-parameter-decorator": "^1.0.16",