|
|
@@ -3,12 +3,9 @@
|
|
|
<van-collapse v-model="activeCollapseNames">
|
|
|
<!--一对一-->
|
|
|
<template v-if="isOne2One">
|
|
|
- <van-collapse-item
|
|
|
- :name="collapseNameKey+'0'"
|
|
|
- :is-link="false"
|
|
|
- >
|
|
|
+ <van-collapse-item :name="collapseNameKey + '0'" :is-link="false">
|
|
|
<template #title>
|
|
|
- <div class="van-cell table-cell ">
|
|
|
+ <div class="van-cell table-cell">
|
|
|
<div class="van-cell__title">
|
|
|
{{ field.label }}
|
|
|
</div>
|
|
|
@@ -16,7 +13,7 @@
|
|
|
</template>
|
|
|
<!--子表字段-->
|
|
|
<ibps-dynamic-form-table-block
|
|
|
- v-for="(column,j) in columns"
|
|
|
+ v-for="(column, j) in columns"
|
|
|
:ref="'formItem'"
|
|
|
:key="j"
|
|
|
:models.sync="dataModel[i]"
|
|
|
@@ -31,37 +28,56 @@
|
|
|
:readonly-rights="readonlyRights"
|
|
|
:params="params"
|
|
|
@update-form-data="updateFormData"
|
|
|
+ @onEvent="(e) => onEvent(e, dataModel[i], i)"
|
|
|
/>
|
|
|
</van-collapse-item>
|
|
|
</template>
|
|
|
<!--一对多-->
|
|
|
<template v-else>
|
|
|
<van-collapse-item
|
|
|
- v-for="(data,i) in dataModel"
|
|
|
+ v-for="(data, i) in dataModel"
|
|
|
:key="i"
|
|
|
- :name="collapseNameKey+i"
|
|
|
- :test="collapseNameKey+i"
|
|
|
+ :class="'tr' + i"
|
|
|
+ :name="collapseNameKey + i"
|
|
|
+ :test="collapseNameKey + i"
|
|
|
>
|
|
|
<template #title>
|
|
|
<div class="col-title">
|
|
|
<div class="van-cell__title">
|
|
|
- <i v-if="required" class="van-cell--required" /><van-tag v-if="dataModel.length !== 1" round type="primary">{{ i+1 }}</van-tag> {{ field.label }}
|
|
|
+ <i v-if="required" class="van-cell--required" /><van-tag
|
|
|
+ v-if="dataModel.length !== 1"
|
|
|
+ round
|
|
|
+ type="primary"
|
|
|
+ >{{ i + 1 }}</van-tag
|
|
|
+ >
|
|
|
+ {{ field.label }}
|
|
|
</div>
|
|
|
<div class="van-cell__value" @click.stop="stopClick">
|
|
|
<!-- <template v-for="(button,b) in toolbarButtons ">
|
|
|
<template v-if="!(button.key === 'remove' && mode==='block' && dataModel.length===1) "> -->
|
|
|
- <template v-for="(button,b) in (getShowBtn().length<=num?getShowBtn():getShowBtn().slice(0,num-1)) ">
|
|
|
+ <template
|
|
|
+ v-for="(button, b) in getShowBtn().length <= num
|
|
|
+ ? getShowBtn()
|
|
|
+ : getShowBtn().slice(0, num - 1)"
|
|
|
+ >
|
|
|
<template>
|
|
|
<!-- 工具栏-->
|
|
|
<van-tag
|
|
|
- :key="i+'-'+b"
|
|
|
+ :key="i + '-' + b"
|
|
|
size="medium"
|
|
|
class="ibps-mr-5"
|
|
|
- :color="button.type | optionsFilter(colorOptions,'color','type')"
|
|
|
- :text-color="button.type | optionsFilter(colorOptions,'textColor','type')"
|
|
|
- @click="handleActionEvent(button,i)"
|
|
|
+ :color="
|
|
|
+ button.type
|
|
|
+ | optionsFilter(colorOptions, 'color', 'type')
|
|
|
+ "
|
|
|
+ :text-color="
|
|
|
+ button.type
|
|
|
+ | optionsFilter(colorOptions, 'textColor', 'type')
|
|
|
+ "
|
|
|
+ @click="handleActionEvent(button, i)"
|
|
|
+ >
|
|
|
+ {{ button.label }}</van-tag
|
|
|
>
|
|
|
- {{ button.label }}</van-tag>
|
|
|
<!-- <van-button
|
|
|
:key="b"
|
|
|
:type="button.type"
|
|
|
@@ -74,28 +90,44 @@
|
|
|
</van-button> -->
|
|
|
</template>
|
|
|
</template>
|
|
|
- <template v-if="getShowBtn().length >num">
|
|
|
+ <template v-if="getShowBtn().length > num">
|
|
|
<template>
|
|
|
<van-tag
|
|
|
- :key="'tag'+i"
|
|
|
+ :key="'tag' + i"
|
|
|
size="medium"
|
|
|
class="ibps-mr-5"
|
|
|
- :color="'danger' | optionsFilter(colorOptions,'color','type')"
|
|
|
- :text-color="'danger' | optionsFilter(colorOptions,'textColor','type')"
|
|
|
+ :color="
|
|
|
+ 'danger' | optionsFilter(colorOptions, 'color', 'type')
|
|
|
+ "
|
|
|
+ :text-color="
|
|
|
+ 'danger'
|
|
|
+ | optionsFilter(colorOptions, 'textColor', 'type')
|
|
|
+ "
|
|
|
@click="toggleBtn(i)"
|
|
|
>
|
|
|
- 更多<van-icon :name="toggle!==field.id+''+i ? 'arrow-down': 'arrow-up'" /></van-tag>
|
|
|
+ 更多<van-icon
|
|
|
+ :name="
|
|
|
+ toggle !== field.id + '' + i
|
|
|
+ ? 'arrow-down'
|
|
|
+ : 'arrow-up'
|
|
|
+ "
|
|
|
+ /></van-tag>
|
|
|
</template>
|
|
|
</template>
|
|
|
<!-- todo -->
|
|
|
- <div v-if="getShowBtn().length >num && toggle===field.id+''+i" v-clickoutside="outFn">
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
+ getShowBtn().length > num && toggle === field.id + '' + i
|
|
|
+ "
|
|
|
+ v-clickoutside="outFn"
|
|
|
+ >
|
|
|
<div class="btn-pop-top" />
|
|
|
<div class="btn-pop">
|
|
|
<div
|
|
|
- v-for="(button,b) in getShowBtn().slice(num-1) "
|
|
|
- :key="button.key+b"
|
|
|
+ v-for="(button, b) in getShowBtn().slice(num - 1)"
|
|
|
+ :key="button.key + b"
|
|
|
class="btn-pop-text"
|
|
|
- @click.stop="handleActionEvent(button,i)"
|
|
|
+ @click.stop="handleActionEvent(button, i)"
|
|
|
>
|
|
|
{{ button.label }}
|
|
|
</div>
|
|
|
@@ -105,17 +137,24 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<template #right-icon>
|
|
|
- <div class="expand">{{ activeCollapseNames.includes(collapseNameKey+i) ? '收起': '展开' }}</div>
|
|
|
+ <div class="expand">
|
|
|
+ {{
|
|
|
+ activeCollapseNames.includes(collapseNameKey + i)
|
|
|
+ ? '收起'
|
|
|
+ : '展开'
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<!--子表字段-->
|
|
|
<ibps-dynamic-form-table-block
|
|
|
- v-for="(column,j) in columns"
|
|
|
+ v-for="(column, j) in columns"
|
|
|
:ref="'formItem'"
|
|
|
- :key="i+j"
|
|
|
+ :key="i + j"
|
|
|
:models.sync="dataModel[i]"
|
|
|
:rights.sync="columnsRights"
|
|
|
:form-data="formData"
|
|
|
:row="i"
|
|
|
+ :row-el-class="'tr' + i"
|
|
|
:field="column"
|
|
|
:desc-position="descPosition"
|
|
|
:main-code="mainCode"
|
|
|
@@ -123,68 +162,111 @@
|
|
|
:mode="mode"
|
|
|
:readonly-rights="readonlyRights"
|
|
|
:params="params"
|
|
|
+ @onEvent="(e) => onEvent(e, dataModel[i], i)"
|
|
|
@update-form-data="updateFormData"
|
|
|
/>
|
|
|
</van-collapse-item>
|
|
|
- <template v-if="dataModel.length === 0">
|
|
|
+ <!-- 修复部分值为null代码报错问题 -->
|
|
|
+ <template v-if="!dataModel || dataModel.length === 0">
|
|
|
<van-field
|
|
|
ref="input"
|
|
|
v-model="inputValue"
|
|
|
:required="required"
|
|
|
- :rules="tableReadonly?null:rules"
|
|
|
+ :rules="tableReadonly ? null : rules"
|
|
|
class="table-field"
|
|
|
>
|
|
|
<template #input>
|
|
|
<van-collapse-item
|
|
|
- :name="collapseNameKey+'0'"
|
|
|
- :test="collapseNameKey+'0'"
|
|
|
- style="width: 100%;"
|
|
|
+ :name="collapseNameKey + '0'"
|
|
|
+ :test="collapseNameKey + '0'"
|
|
|
+ style="width: 100%"
|
|
|
:is-link="false"
|
|
|
>
|
|
|
<template #title>
|
|
|
<div class="col-title">
|
|
|
<div class="van-cell__title">
|
|
|
- <i v-if="required" class="van-cell--required" /> {{ field.label }}
|
|
|
+ <i v-if="required" class="van-cell--required" />
|
|
|
+ {{ field.label }}
|
|
|
</div>
|
|
|
<div class="van-cell__value">
|
|
|
- <template v-for="(button,j) in (getShowBtnByRemove().length<=num?getShowBtnByRemove():getShowBtnByRemove().slice(0,num-1)) ">
|
|
|
+ <template
|
|
|
+ v-for="(button, j) in getShowBtnByRemove().length <= num
|
|
|
+ ? getShowBtnByRemove()
|
|
|
+ : getShowBtnByRemove().slice(0, num - 1)"
|
|
|
+ >
|
|
|
<van-tag
|
|
|
:key="j"
|
|
|
size="medium"
|
|
|
class="ibps-mr-5"
|
|
|
- :color="button.type | optionsFilter(colorOptions,'color','type')"
|
|
|
- :text-color="button.type | optionsFilter(colorOptions,'textColor','type')"
|
|
|
- @click.stop="handleActionEvent(button,j)"
|
|
|
+ :color="
|
|
|
+ button.type
|
|
|
+ | optionsFilter(colorOptions, 'color', 'type')
|
|
|
+ "
|
|
|
+ :text-color="
|
|
|
+ button.type
|
|
|
+ | optionsFilter(colorOptions, 'textColor', 'type')
|
|
|
+ "
|
|
|
+ @click.stop="handleActionEvent(button, j)"
|
|
|
+ >
|
|
|
+ {{ button.label }}</van-tag
|
|
|
>
|
|
|
- {{ button.label }}</van-tag>
|
|
|
</template>
|
|
|
- <template v-if="getShowBtnByRemove().length >num">
|
|
|
+ <template v-if="getShowBtnByRemove().length > num">
|
|
|
<template>
|
|
|
<van-tag
|
|
|
size="medium"
|
|
|
class="ibps-mr-5"
|
|
|
- :color="'danger' | optionsFilter(colorOptions,'color','type')"
|
|
|
- :text-color="'danger' | optionsFilter(colorOptions,'textColor','type')"
|
|
|
+ :color="
|
|
|
+ 'danger'
|
|
|
+ | optionsFilter(colorOptions, 'color', 'type')
|
|
|
+ "
|
|
|
+ :text-color="
|
|
|
+ 'danger'
|
|
|
+ | optionsFilter(
|
|
|
+ colorOptions,
|
|
|
+ 'textColor',
|
|
|
+ 'type'
|
|
|
+ )
|
|
|
+ "
|
|
|
@click.stop="toggleBtn('o')"
|
|
|
>
|
|
|
- 更多<van-icon :name="toggle!==field.id+'o' ? 'arrow-down': 'arrow-up'" /></van-tag>
|
|
|
+ 更多<van-icon
|
|
|
+ :name="
|
|
|
+ toggle !== field.id + 'o'
|
|
|
+ ? 'arrow-down'
|
|
|
+ : 'arrow-up'
|
|
|
+ "
|
|
|
+ /></van-tag>
|
|
|
</template>
|
|
|
</template>
|
|
|
- <div v-if="getShowBtnByRemove().length >num && toggle===field.id+'o'" v-clickoutside="outFn" @click.stop="stopClick">
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
+ getShowBtnByRemove().length > num &&
|
|
|
+ toggle === field.id + 'o'
|
|
|
+ "
|
|
|
+ v-clickoutside="outFn"
|
|
|
+ @click.stop="stopClick"
|
|
|
+ >
|
|
|
<div class="btn-pop-top" />
|
|
|
<div class="btn-pop">
|
|
|
- <div
|
|
|
- v-if="button.key!='import'&&button.key!='export'"
|
|
|
- v-for="(button,j) in getShowBtnByRemove().slice(num-1) "
|
|
|
- :key="button.key+j"
|
|
|
- class="btn-pop-text"
|
|
|
- @click.stop="handleActionEvent(button)"
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ button.key != 'import' && button.key != 'export'
|
|
|
+ "
|
|
|
>
|
|
|
- {{ button.label }}
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ v-for="(button, j) in getShowBtnByRemove().slice(
|
|
|
+ num - 1
|
|
|
+ )"
|
|
|
+ :key="button.key + j"
|
|
|
+ class="btn-pop-text"
|
|
|
+ @click.stop="handleActionEvent(button)"
|
|
|
+ >
|
|
|
+ {{ button.label }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -193,7 +275,6 @@
|
|
|
</template> -->
|
|
|
</van-collapse-item>
|
|
|
</template>
|
|
|
-
|
|
|
</van-field>
|
|
|
</template>
|
|
|
</template>
|
|
|
@@ -218,16 +299,15 @@
|
|
|
|
|
|
<div class="ibps-fixed-navbar">
|
|
|
<ibps-dynamic-form-item
|
|
|
- v-for="(column) in columns"
|
|
|
+ v-for="column in columns"
|
|
|
ref="dialogForm"
|
|
|
:key="column.name"
|
|
|
v-model="dialogData[column.name]"
|
|
|
:field="column"
|
|
|
:data="dialogFormData"
|
|
|
-
|
|
|
:rights="rights[column.name]"
|
|
|
:params="params"
|
|
|
-
|
|
|
+ @onEvent="(e) => $emit('onEvent', e)"
|
|
|
@cinput="handleDialogInput($event)"
|
|
|
/>
|
|
|
</div>
|
|
|
@@ -252,7 +332,7 @@ const JForm = window.JForm
|
|
|
// import JForm from '../utils/JForm'// 自定义脚本
|
|
|
const COLLAPSE_NAME_KEY = 'table_'
|
|
|
export default {
|
|
|
- name: 'form-table',
|
|
|
+ name: 'FormTable',
|
|
|
directives: { clickoutside },
|
|
|
props: {
|
|
|
value: [Array, Object, String], // 值
|
|
|
@@ -264,7 +344,8 @@ export default {
|
|
|
rights: {
|
|
|
type: [String, Object]
|
|
|
},
|
|
|
- readonlyRights: { // 只读
|
|
|
+ readonlyRights: {
|
|
|
+ // 只读
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
@@ -294,16 +375,6 @@ export default {
|
|
|
descPosition: String
|
|
|
},
|
|
|
data() {
|
|
|
- // const activeCollapseNames = []
|
|
|
- // let val = []
|
|
|
- // if (this.$utils.isNotEmpty(this.value)) {
|
|
|
- // console.log('this.value==>', JSON.parse(JSON.stringify(this.value)))
|
|
|
- // val = this.value || []
|
|
|
- // this.value.forEach((e, i) => {
|
|
|
- // activeCollapseNames.push(COLLAPSE_NAME_KEY + i)
|
|
|
- // })
|
|
|
- // }
|
|
|
-
|
|
|
return {
|
|
|
activeCollapseNames: [],
|
|
|
collapseNameKey: COLLAPSE_NAME_KEY,
|
|
|
@@ -344,7 +415,8 @@ export default {
|
|
|
},
|
|
|
fieldOptions() {
|
|
|
const fieldOptions = this.field.field_options || {}
|
|
|
- fieldOptions.default_value_type = fieldOptions.default_value_type || 'fixed'
|
|
|
+ fieldOptions.default_value_type =
|
|
|
+ fieldOptions.default_value_type || 'fixed'
|
|
|
return fieldOptions
|
|
|
},
|
|
|
|
|
|
@@ -357,7 +429,8 @@ export default {
|
|
|
mode() {
|
|
|
return this.field.field_options.mode || 'inner'
|
|
|
},
|
|
|
- dialogMode() { // 弹窗模式
|
|
|
+ dialogMode() {
|
|
|
+ // 弹窗模式
|
|
|
return false
|
|
|
// TODO 弹窗模式有bug 暂时屏蔽
|
|
|
// this.tableMode === 'dialog'
|
|
|
@@ -393,7 +466,7 @@ export default {
|
|
|
fields.forEach((field) => {
|
|
|
if (FormOptions.t.NESTED_FIELD_TYPES.includes(field.field_type)) {
|
|
|
const columns = field.field_options.columns
|
|
|
- columns.forEach(child => {
|
|
|
+ columns.forEach((child) => {
|
|
|
traverse(child.fields)
|
|
|
})
|
|
|
} else {
|
|
|
@@ -409,7 +482,7 @@ export default {
|
|
|
buttons() {
|
|
|
const buttons = this.field.field_options.buttons || []
|
|
|
const bs = []
|
|
|
- buttons.forEach(button => {
|
|
|
+ buttons.forEach((button) => {
|
|
|
const b = JSON.parse(JSON.stringify(button))
|
|
|
b.key = button.type
|
|
|
b.type = button.style
|
|
|
@@ -420,7 +493,9 @@ export default {
|
|
|
return bs
|
|
|
},
|
|
|
tableReadonly() {
|
|
|
- return this.readonlyRights ? true : this.tableRights === FormOptions.t.PERMISSIONS.READ
|
|
|
+ return this.readonlyRights
|
|
|
+ ? true
|
|
|
+ : this.tableRights === FormOptions.t.PERMISSIONS.READ
|
|
|
},
|
|
|
tableHidden() {
|
|
|
return this.tableRights === FormOptions.t.PERMISSIONS.HIDE
|
|
|
@@ -436,14 +511,19 @@ export default {
|
|
|
value: {
|
|
|
deep: true,
|
|
|
immediate: true,
|
|
|
- handler(val, oldVal) {
|
|
|
+ handler(val) {
|
|
|
this.dataModel = val
|
|
|
+ val &&
|
|
|
+ val.forEach &&
|
|
|
+ val.forEach((t, i) => {
|
|
|
+ this.activeCollapseNames.push(COLLAPSE_NAME_KEY + i)
|
|
|
+ })
|
|
|
this.inputValue = this.$utils.isNotEmpty(val) ? JSON.stringify(val) : ''
|
|
|
}
|
|
|
},
|
|
|
dataModel: {
|
|
|
deep: true,
|
|
|
- handler(val, oldVal) {
|
|
|
+ handler(val) {
|
|
|
this.$emit('update:value', val)
|
|
|
}
|
|
|
},
|
|
|
@@ -459,8 +539,13 @@ export default {
|
|
|
// 字段权限
|
|
|
fieldRights: {
|
|
|
handler(fieldRights) {
|
|
|
- if (this.$utils.isNotEmpty(fieldRights) && this.$utils.isPlainObject(fieldRights)) {
|
|
|
- this.tableRights = this.getRealRights(fieldRights['rights'] || FormOptions.t.PERMISSIONS.EDIT)
|
|
|
+ if (
|
|
|
+ this.$utils.isNotEmpty(fieldRights) &&
|
|
|
+ this.$utils.isPlainObject(fieldRights)
|
|
|
+ ) {
|
|
|
+ this.tableRights = this.getRealRights(
|
|
|
+ fieldRights['rights'] || FormOptions.t.PERMISSIONS.EDIT
|
|
|
+ )
|
|
|
this.columnsRights = this.getColumnsRights(fieldRights['columns'])
|
|
|
this.buttonsRights = this.getButtonsRights(fieldRights['buttons'])
|
|
|
} else {
|
|
|
@@ -487,6 +572,11 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
+ onEvent(e, row, i) {
|
|
|
+ e.row = row
|
|
|
+ e.colName = i
|
|
|
+ this.$emit('onEvent', e)
|
|
|
+ },
|
|
|
/**
|
|
|
* 获取本地缓存
|
|
|
*/
|
|
|
@@ -516,28 +606,40 @@ export default {
|
|
|
this.toggle = ''
|
|
|
this._setItem(this.toggle)
|
|
|
},
|
|
|
- stopClick() {
|
|
|
- },
|
|
|
+ stopClick() {},
|
|
|
/**
|
|
|
* 获取需要显示的这样按钮
|
|
|
*/
|
|
|
getShowBtn() {
|
|
|
if (!this.toolbarButtons) return []
|
|
|
- return this.toolbarButtons.filter(el => !(el.key === 'remove' && this.mode === 'block' && this.dataModel.length === 1))
|
|
|
+ return this.toolbarButtons.filter(
|
|
|
+ (el) =>
|
|
|
+ !(
|
|
|
+ el.key === 'remove' &&
|
|
|
+ this.mode === 'block' &&
|
|
|
+ this.dataModel.length === 1
|
|
|
+ )
|
|
|
+ )
|
|
|
},
|
|
|
getShowBtnByRemove() {
|
|
|
if (!this.toolbarButtons) return []
|
|
|
- return this.toolbarButtons.filter(el => el.key !== 'remove')
|
|
|
+ return this.toolbarButtons.filter((el) => el.key !== 'remove')
|
|
|
},
|
|
|
- columnHidden(column) { // 是否隐藏
|
|
|
- return this.columnsRights[column.name] === FormOptions.t.PERMISSIONS.HIDE || column.field_type === 'hidden'
|
|
|
+ columnHidden(column) {
|
|
|
+ // 是否隐藏
|
|
|
+ return (
|
|
|
+ this.columnsRights[column.name] === FormOptions.t.PERMISSIONS.HIDE ||
|
|
|
+ column.field_type === 'hidden'
|
|
|
+ )
|
|
|
},
|
|
|
/**
|
|
|
* 获取真实的权限
|
|
|
*/
|
|
|
getRealRights(rights) {
|
|
|
if (this.readonlyRights) {
|
|
|
- return rights === FormOptions.t.PERMISSIONS.HIDE ? rights : FormOptions.t.PERMISSIONS.READ
|
|
|
+ return rights === FormOptions.t.PERMISSIONS.HIDE
|
|
|
+ ? rights
|
|
|
+ : FormOptions.t.PERMISSIONS.READ
|
|
|
} else {
|
|
|
return rights
|
|
|
}
|
|
|
@@ -545,8 +647,10 @@ export default {
|
|
|
getColumnsRights(rights = {}) {
|
|
|
const columnsRights = {}
|
|
|
if (this.nameColumns && this.nameColumns.length > 0) {
|
|
|
- this.nameColumns.forEach(column => {
|
|
|
- columnsRights[column.name] = this.getRealRights(rights[column.name] || FormUtil.getDefaultRigths(column))
|
|
|
+ this.nameColumns.forEach((column) => {
|
|
|
+ columnsRights[column.name] = this.getRealRights(
|
|
|
+ rights[column.name] || FormUtil.getDefaultRigths(column)
|
|
|
+ )
|
|
|
})
|
|
|
}
|
|
|
return columnsRights
|
|
|
@@ -555,7 +659,7 @@ export default {
|
|
|
if (this.$utils.isEmpty(rights)) {
|
|
|
const buttonsRights = {}
|
|
|
if (this.$utils.isNotEmpty(this.buttons)) {
|
|
|
- this.buttons.forEach(button => {
|
|
|
+ this.buttons.forEach((button) => {
|
|
|
buttonsRights[button.key] = FormOptions.t.PERMISSIONS.SHOW
|
|
|
})
|
|
|
}
|
|
|
@@ -572,16 +676,20 @@ export default {
|
|
|
handleSelectionChange(selection) {
|
|
|
this.multipleSelection = selection
|
|
|
},
|
|
|
- handleRowClick(row, event, column) {
|
|
|
+ handleRowClick(row) {
|
|
|
this.$refs.elTable.toggleRowSelection(row)
|
|
|
},
|
|
|
filterButtons(position) {
|
|
|
if (this.tableReadonly) return
|
|
|
const bs = []
|
|
|
- this.buttons.forEach(button => {
|
|
|
- if (hasPermission(button.key, position) && // 有位置权限
|
|
|
- (!button.position || button.position === 'all' || button.position === position) &&// 有位置权限
|
|
|
- (this.$utils.isEmpty(this.buttonsRights[button.key]) || this.buttonsRights[button.key] !== FormOptions.t.PERMISSIONS.HIDE) // 有按钮权限
|
|
|
+ this.buttons.forEach((button) => {
|
|
|
+ if (
|
|
|
+ hasPermission(button.key, position) && // 有位置权限
|
|
|
+ (!button.position ||
|
|
|
+ button.position === 'all' ||
|
|
|
+ button.position === position) && // 有位置权限
|
|
|
+ (this.$utils.isEmpty(this.buttonsRights[button.key]) ||
|
|
|
+ this.buttonsRights[button.key] !== FormOptions.t.PERMISSIONS.HIDE) // 有按钮权限
|
|
|
) {
|
|
|
const b = JSON.parse(JSON.stringify(button))
|
|
|
b.position = position
|
|
|
@@ -593,7 +701,8 @@ export default {
|
|
|
handleActionEvent(button, index) {
|
|
|
// 起始下标
|
|
|
// const index = (this.currentPage - 1) * this.pageSize + buttonIndex
|
|
|
- this.actionCode = button.key === 'custom' ? button.code || button.key + index : button.key
|
|
|
+ this.actionCode =
|
|
|
+ button.key === 'custom' ? button.code || button.key + index : button.key
|
|
|
this.actionPosition = button.position || 'toolbar'
|
|
|
this.actionButton = button
|
|
|
// 前置事件
|
|
|
@@ -662,27 +771,29 @@ export default {
|
|
|
this.afterScript('add', 'toolbar')
|
|
|
},
|
|
|
// 复制已有数据
|
|
|
- handleCopyData (button, index) {
|
|
|
- const position = button.position
|
|
|
+ handleCopyData(button, index) {
|
|
|
+ // const position = button.position
|
|
|
const selection = this.getSelection('block', index)
|
|
|
- console.log(button, index,selection)
|
|
|
- ActionUtils.selectedMultiRecord(selection).then((ids) => {
|
|
|
- selection.forEach(i => {
|
|
|
- const obj = this.dataModel[i]
|
|
|
- delete obj.$index
|
|
|
- delete obj.id
|
|
|
- this.dataModel.push(obj)
|
|
|
+ console.log(button, index, selection)
|
|
|
+ ActionUtils.selectedMultiRecord(selection)
|
|
|
+ .then((ids) => {
|
|
|
+ selection.forEach((i) => {
|
|
|
+ const obj = this.dataModel[i]
|
|
|
+ delete obj.$index
|
|
|
+ delete obj.id
|
|
|
+ this.dataModel.push(obj)
|
|
|
+ })
|
|
|
+ // 初始化运行公式计算
|
|
|
+ this.initRunCalFormula(this.dataModel.length - 1)
|
|
|
+ // 后置事件
|
|
|
+ this.afterScript(this.actionCode, this.actionPosition)
|
|
|
+ if (this.$refs.elTable) {
|
|
|
+ this.$refs.elTable.doLayout()
|
|
|
+ }
|
|
|
})
|
|
|
- // 初始化运行公式计算
|
|
|
- this.initRunCalFormula(this.dataModel.length - 1)
|
|
|
- // 后置事件
|
|
|
- this.afterScript(this.actionCode, this.actionPosition)
|
|
|
- if (this.$refs.elTable) {
|
|
|
- this.$refs.elTable.doLayout()
|
|
|
- }
|
|
|
- }).catch(() => {})
|
|
|
+ .catch(() => {})
|
|
|
},
|
|
|
- getSelection (position, index) {
|
|
|
+ getSelection(position, index) {
|
|
|
const selection = []
|
|
|
if (position === 'toolbar' && this.mode !== 'block') {
|
|
|
if (this.multipleSelection && this.multipleSelection.length > 0) {
|
|
|
@@ -702,30 +813,37 @@ export default {
|
|
|
}
|
|
|
const position = button.position
|
|
|
|
|
|
- this.$dialog.confirm({
|
|
|
- title: '提示',
|
|
|
- message: '确定删除？'
|
|
|
- }).then(() => {
|
|
|
- this.dataModel.splice(index, 1)
|
|
|
- // TODO: 处理折叠面板
|
|
|
+ this.$dialog
|
|
|
+ .confirm({
|
|
|
+ title: '提示',
|
|
|
+ message: '确定删除？'
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.dataModel.splice(index, 1)
|
|
|
+ // TODO: 处理折叠面板
|
|
|
|
|
|
- // 后置事件
|
|
|
- this.afterScript('remove', position, {
|
|
|
- selection: [index],
|
|
|
- index: index
|
|
|
+ // 后置事件
|
|
|
+ this.afterScript('remove', position, {
|
|
|
+ selection: [index],
|
|
|
+ index: index
|
|
|
+ })
|
|
|
})
|
|
|
- })
|
|
|
},
|
|
|
// 初始化运行公式计算
|
|
|
initRunCalFormula(row) {
|
|
|
// 不需要字段的进行公式计算 比如获取但其当前时间，随机数
|
|
|
- FormUtil.runCalFormula(this, this.formula[FormUtil.NOT_NEED_FIELD], this.mainCode, row)
|
|
|
- },
|
|
|
- handleImport () {
|
|
|
+ FormUtil.runCalFormula(
|
|
|
+ this,
|
|
|
+ this.formula[FormUtil.NOT_NEED_FIELD],
|
|
|
+ this.mainCode,
|
|
|
+ row
|
|
|
+ )
|
|
|
+ },
|
|
|
+ handleImport() {
|
|
|
this.importTableDialogVisible = true
|
|
|
},
|
|
|
// 导出
|
|
|
- handleExport (button, index) {
|
|
|
+ handleExport(button, index) {
|
|
|
const position = button.position
|
|
|
const selection = this.getSelection(position, index)
|
|
|
if (selection.length > 0) {
|
|
|
@@ -737,32 +855,32 @@ export default {
|
|
|
/**
|
|
|
* 导出数据
|
|
|
*/
|
|
|
- exportData (ids) {
|
|
|
- const columnMap = {}
|
|
|
- const columns = []
|
|
|
- this.nameColumns.forEach((column) => {
|
|
|
- if (!this.columnHidden(column)) {
|
|
|
- columns.push(column)
|
|
|
- }
|
|
|
- columnMap[column.name] = column
|
|
|
- })
|
|
|
- const exportData = JSON.parse(JSON.stringify(this.dataModel))
|
|
|
- const data = ids
|
|
|
- ? exportData.filter((d, i) => {
|
|
|
- return ids.includes(i)
|
|
|
- })
|
|
|
- : exportData
|
|
|
+ exportData(ids) {
|
|
|
+ // const columnMap = {}
|
|
|
+ // const columns = []
|
|
|
+ // this.nameColumns.forEach((column) => {
|
|
|
+ // if (!this.columnHidden(column)) {
|
|
|
+ // columns.push(column)
|
|
|
+ // }
|
|
|
+ // columnMap[column.name] = column
|
|
|
+ // })
|
|
|
+ // const exportData = JSON.parse(JSON.stringify(this.dataModel))
|
|
|
+ // const data = ids
|
|
|
+ // ? exportData.filter((d, i) => {
|
|
|
+ // return ids.includes(i)
|
|
|
+ // })
|
|
|
+ // : exportData
|
|
|
// TODO: 需要格式化展示的数据
|
|
|
- this.convertExportData(data, columnMap).then((data) => {
|
|
|
- IbpsExport.excel({
|
|
|
- columns: columns,
|
|
|
- data: data,
|
|
|
- nameKey: 'name',
|
|
|
- title: this.field.label
|
|
|
- }).then(() => {
|
|
|
- ActionUtils.success('导出成功')
|
|
|
- })
|
|
|
- })
|
|
|
+ // this.convertExportData(data, columnMap).then((data) => {
|
|
|
+ // IbpsExport.excel({
|
|
|
+ // columns: columns,
|
|
|
+ // data: data,
|
|
|
+ // nameKey: 'name',
|
|
|
+ // title: this.field.label
|
|
|
+ // }).then(() => {
|
|
|
+ // ActionUtils.success('导出成功')
|
|
|
+ // })
|
|
|
+ // })
|
|
|
},
|
|
|
// =====================对话框模式数据处理=====================
|
|
|
|
|
|
@@ -849,15 +967,16 @@ export default {
|
|
|
}
|
|
|
return
|
|
|
}
|
|
|
- const action = button.key === 'custom' ? (button.code || button.code + index) : button.key
|
|
|
+ const action =
|
|
|
+ button.key === 'custom'
|
|
|
+ ? button.code || button.code + index
|
|
|
+ : button.key
|
|
|
const params = {
|
|
|
button: button,
|
|
|
index: index
|
|
|
}
|
|
|
if (!callback) {
|
|
|
- callback = () => {
|
|
|
-
|
|
|
- }
|
|
|
+ callback = () => {}
|
|
|
}
|
|
|
JForm._beforeSubButton(this, action, button.position, params, callback)
|
|
|
},
|
|
|
@@ -876,9 +995,7 @@ export default {
|
|
|
}
|
|
|
params.button = this.getButtonByKey(action)
|
|
|
if (!callback) {
|
|
|
- callback = () => {
|
|
|
-
|
|
|
- }
|
|
|
+ callback = () => {}
|
|
|
}
|
|
|
JForm._afterSubButton(this, action, position, params, callback)
|
|
|
},
|
|
|
@@ -916,21 +1033,27 @@ export default {
|
|
|
|
|
|
// ======表单验证============
|
|
|
getEl() {
|
|
|
- if (!this.$refs.formItem) { return }
|
|
|
+ if (!this.$refs.formItem) {
|
|
|
+ return
|
|
|
+ }
|
|
|
const $validate = []
|
|
|
- this.$refs.formItem.forEach(el => {
|
|
|
+ this.$refs.formItem.forEach((el) => {
|
|
|
$validate.push(el)
|
|
|
})
|
|
|
return $validate
|
|
|
},
|
|
|
getFormValidator() {
|
|
|
- if (!this.$refs.formItem) { return }
|
|
|
+ if (!this.$refs.formItem) {
|
|
|
+ return
|
|
|
+ }
|
|
|
const $validate = []
|
|
|
- this.$refs.formItem.forEach(el => {
|
|
|
+ this.$refs.formItem.forEach((el) => {
|
|
|
const v = new Promise((resolve, reject) => {
|
|
|
- el.getFormValidator().validate().then((result) => {
|
|
|
- resolve(result)
|
|
|
- })
|
|
|
+ el.getFormValidator()
|
|
|
+ .validate()
|
|
|
+ .then((result) => {
|
|
|
+ resolve(result)
|
|
|
+ })
|
|
|
})
|
|
|
$validate.push(v)
|
|
|
})
|
|
|
@@ -939,67 +1062,77 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-<style lang="scss">
|
|
|
- .ibps-table-wrapper{
|
|
|
- // padding: 10px 0;
|
|
|
- // background-color: #f2efef;
|
|
|
- .btn-pop,.btn-pop-top{
|
|
|
- position: absolute;
|
|
|
- z-index: 1000;
|
|
|
- top: 34px;
|
|
|
- }
|
|
|
- .btn-pop{
|
|
|
- background: #4C4C4C;
|
|
|
- color: #FFFFFF;
|
|
|
- border-radius: 4px;
|
|
|
- text-align: left;
|
|
|
- padding-left: 14px;
|
|
|
- right: 4px;
|
|
|
- min-width: 120px;
|
|
|
- .btn-pop-text{
|
|
|
- padding: 12px 0;
|
|
|
- border-bottom: 1px solid rgba(229,229,229,0.3);
|
|
|
- }
|
|
|
- }
|
|
|
- .btn-pop-top{
|
|
|
- border: 6px solid transparent;
|
|
|
- border-bottom-color: #4C4C4C;
|
|
|
- top: 22px;
|
|
|
- right: 18px;
|
|
|
- }
|
|
|
- .van-cell,.van-cell__value{
|
|
|
- overflow: visible;
|
|
|
- }
|
|
|
- .table-field{
|
|
|
- padding:0 ;
|
|
|
- }
|
|
|
- .table-cell-icon{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .expand {
|
|
|
- color: #1989fa;
|
|
|
- cursor: pointer;
|
|
|
+<style lang="scss" scoped>
|
|
|
+.ibps-table-wrapper {
|
|
|
+ // padding: 10px 0;
|
|
|
+ // background-color: #f2efef;
|
|
|
+ .btn-pop,
|
|
|
+ .btn-pop-top {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1000;
|
|
|
+ top: 34px;
|
|
|
+ }
|
|
|
+ .btn-pop {
|
|
|
+ background: #4c4c4c;
|
|
|
+ color: #ffffff;
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 14px;
|
|
|
+ right: 4px;
|
|
|
+ min-width: 120px;
|
|
|
+ .btn-pop-text {
|
|
|
+ padding: 12px 0;
|
|
|
+ border-bottom: 1px solid rgba(229, 229, 229, 0.3);
|
|
|
}
|
|
|
-
|
|
|
- // .van-collapse-item__title {
|
|
|
- // padding:0 ;
|
|
|
- // background-color: #f8f8f8;
|
|
|
- // .table-cell{
|
|
|
- // background-color: #f8f8f8;
|
|
|
- // // padding-right: 0;
|
|
|
- // }
|
|
|
- // .van-cell__title{
|
|
|
- // font-size: 12px;
|
|
|
- // color: #999;
|
|
|
- // }
|
|
|
- // .van-cell__right-icon{
|
|
|
- // margin-top: 8px;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // .van-collapse-item__content{
|
|
|
- // padding:0
|
|
|
- // }
|
|
|
-
|
|
|
}
|
|
|
+ .btn-pop-top {
|
|
|
+ border: 6px solid transparent;
|
|
|
+ border-bottom-color: #4c4c4c;
|
|
|
+ top: 22px;
|
|
|
+ right: 18px;
|
|
|
+ }
|
|
|
+ .van-cell,
|
|
|
+ .van-cell__value {
|
|
|
+ overflow: visible;
|
|
|
+ }
|
|
|
+ .table-field {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .table-cell-icon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .expand {
|
|
|
+ color: #1989fa;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ ::v-deep .van-field {
|
|
|
+ padding-left: 0 !important;
|
|
|
+ padding-right: 0 !important;
|
|
|
+ }
|
|
|
+ ::v-deep .van-cell--required::before {
|
|
|
+ left: -8px !important;
|
|
|
+ }
|
|
|
+ // ::v-deep .van-field__control {
|
|
|
+ // min-height: 36px;
|
|
|
+ // }
|
|
|
+ // .van-collapse-item__title {
|
|
|
+ // padding:0 ;
|
|
|
+ // background-color: #f8f8f8;
|
|
|
+ // .table-cell{
|
|
|
+ // background-color: #f8f8f8;
|
|
|
+ // // padding-right: 0;
|
|
|
+ // }
|
|
|
+ // .van-cell__title{
|
|
|
+ // font-size: 12px;
|
|
|
+ // color: #999;
|
|
|
+ // }
|
|
|
+ // .van-cell__right-icon{
|
|
|
+ // margin-top: 8px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .van-collapse-item__content{
|
|
|
+ // padding:0
|
|
|
+ // }
|
|
|
+}
|
|
|
</style>
|
