249 lines
9.2 KiB
Vue
249 lines
9.2 KiB
Vue
<template>
|
|
<div class="_fd-table-button-config">
|
|
<el-badge type="warning" is-dot :hidden="!configured">
|
|
<el-button class="_fd-plain-button" plain @click="visible=true" size="small">{{ t('com.dataTable.button.btn') }}</el-button>
|
|
</el-badge>
|
|
<el-dialog class="_fd-tcb-dialog _fd-config-dialog" :title="t('com.dataTable.button.title')" v-model="visible" destroy-on-close
|
|
:close-on-click-modal="false" append-to-body
|
|
width="980px">
|
|
<template v-if="activeRow">
|
|
<FnEditor ref="fn" v-model="activeRow[activeKey]" :args="activeArgs"
|
|
:name="activeKey"></FnEditor>
|
|
</template>
|
|
<template v-else>
|
|
<el-table :data="column" size="small">
|
|
<el-table-column type="index" width="50"/>
|
|
<el-table-column :label="t('props.preview')" width="100">
|
|
<template #default="{row}">
|
|
<el-button v-bind="btnProps(row)">{{ row.name }}</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column width="100">
|
|
<template #default="{row}">
|
|
<el-input v-model="row.key"></el-input>
|
|
</template>
|
|
<template #header>
|
|
ID<span style="color:red;">*</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column>
|
|
<template #default="{row}">
|
|
<el-input v-model="row.name"></el-input>
|
|
</template>
|
|
<template #header>
|
|
{{ t('props.name') }}<span style="color:red;">*</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('event.type')" width="120">
|
|
<template #default="{row}">
|
|
<el-select v-model="row.type">
|
|
<el-option v-for="opt in type"
|
|
:label="opt.label"
|
|
:value="opt.value"
|
|
:key="opt.value"></el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('style.font.size')" width="120">
|
|
<template #default="{row}">
|
|
<el-select v-model="row.size">
|
|
<el-option v-for="opt in size"
|
|
:label="opt.label"
|
|
:value="opt.value"
|
|
:key="opt.value"></el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('style.decoration.name')" width="120">
|
|
<template #default="{row}">
|
|
<el-select multiple v-model="row.prop">
|
|
<el-option v-for="opt in decoration"
|
|
:label="opt.label"
|
|
:value="opt.value"
|
|
:key="opt.value"></el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('props.hide')" width="80">
|
|
<template #default="{row}">
|
|
<el-switch v-model="row.hidden"></el-switch>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('props.callback')" width="80">
|
|
<template #default="{row}">
|
|
<div class="_fd-tcb-btn" @click="handle(row, 'handle', ['props', 'scope', 'api'])">{{ t('com.dataTable.handle') }}<i class="fc-icon icon-edit"></i>
|
|
</div>
|
|
<div class="_fd-tcb-btn" @click="handle(row, 'click', ['scope', 'api'])">{{ t('com.dataTable.click') }}<i class="fc-icon icon-edit"></i>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('tableOptions.handle')" width="80">
|
|
<template #default="{$index}">
|
|
<i class="fc-icon icon-add-circle" @click="add($index)"></i>
|
|
<i class="fc-icon icon-delete-circle" @click="remove($index)"></i>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-button link type="primary" @click="add()">
|
|
<i class="fc-icon icon-add-circle"></i>
|
|
{{ t('tableOptions.add') }}
|
|
</el-button>
|
|
</template>
|
|
<template #footer>
|
|
<div>
|
|
<el-button size="default" @click="close">{{ t('props.cancel') }}</el-button>
|
|
<el-button type="primary" size="default" @click="submit">{{
|
|
t('props.ok')
|
|
}}
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {defineComponent} from 'vue';
|
|
import errorMessage from '../../utils/message';
|
|
import {deepCopy} from '@form-create/utils/lib/deepextend';
|
|
|
|
|
|
export default defineComponent({
|
|
name: 'TableColumnConfig',
|
|
props: {
|
|
modelValue: Array,
|
|
},
|
|
inject: ['designer'],
|
|
data() {
|
|
return {
|
|
column: [],
|
|
visible: false,
|
|
activeRow: null,
|
|
activeKey: '',
|
|
activeArgs: [],
|
|
};
|
|
},
|
|
computed: {
|
|
t() {
|
|
return this.designer.setupState.t;
|
|
},
|
|
configured() {
|
|
return !!this.modelValue
|
|
},
|
|
decoration() {
|
|
return ['link', 'round', 'plain', 'disabled'].map(v => {
|
|
return {label: this.t('com.dataTable.button.' + v), value: v};
|
|
});
|
|
},
|
|
size() {
|
|
return ['large', 'default', 'small'].map(v => {
|
|
return {label: this.t('props.' + v), value: v};
|
|
});
|
|
},
|
|
type() {
|
|
return ['primary', 'success', 'warning', 'danger', 'info'].map(v => {
|
|
return {label: this.t('props.' + v), value: v};
|
|
})
|
|
},
|
|
},
|
|
watch: {
|
|
visible(v) {
|
|
if (v) {
|
|
this.tidyValue();
|
|
} else {
|
|
this.activeRow = null;
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
btnProps(row) {
|
|
const prop = row.prop || [];
|
|
return {
|
|
type: row.type,
|
|
size: row.size,
|
|
round: prop.indexOf('round') > -1,
|
|
link: prop.indexOf('link') > -1,
|
|
plain: prop.indexOf('plain') > -1,
|
|
disabled: prop.indexOf('disabled') > -1,
|
|
}
|
|
},
|
|
defaultData() {
|
|
return {
|
|
key: this.column.length + 1,
|
|
name: this.t('props.button') + (this.column.length + 1)
|
|
}
|
|
},
|
|
add(idx) {
|
|
idx != null ? this.column.splice(idx + 1, 0, this.defaultData()) : this.column.push(this.defaultData());
|
|
},
|
|
handle(rule, key, args) {
|
|
this.activeKey = key;
|
|
this.activeRow = rule;
|
|
this.activeArgs = args;
|
|
},
|
|
remove(idx) {
|
|
this.column.splice(idx, 1);
|
|
},
|
|
tidyValue() {
|
|
this.column = deepCopy(this.modelValue || []);
|
|
if (!this.column.length) {
|
|
this.add();
|
|
}
|
|
},
|
|
close() {
|
|
if (this.activeRow) {
|
|
this.activeRow = null;
|
|
} else {
|
|
this.visible = false;
|
|
}
|
|
},
|
|
submit() {
|
|
if (this.activeRow) {
|
|
if (this.$refs.fn.save()) {
|
|
this.activeRow = null;
|
|
}
|
|
return;
|
|
}
|
|
const value = [];
|
|
for (let i = 0; i < this.column.length; i++) {
|
|
const col = this.column[i];
|
|
if (!col.name) {
|
|
errorMessage(this.t('com.dataTable.requiredName'));
|
|
return;
|
|
}
|
|
if (!col.key) {
|
|
errorMessage(this.t('com.dataTable.requiredKey'));
|
|
return;
|
|
}
|
|
value.push({...col});
|
|
}
|
|
this.$emit('update:modelValue', value);
|
|
this.$emit('change', value);
|
|
this.visible = false;
|
|
},
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
._fd-table-button-config, ._fd-table-button-config .el-badge {
|
|
width: 100%;
|
|
}
|
|
|
|
._fd-table-button-config .el-button {
|
|
font-weight: 400;
|
|
width: 100%;
|
|
}
|
|
|
|
._fd-tcb-dialog .el-dialog__body {
|
|
height: 500px;
|
|
overflow: auto;
|
|
}
|
|
|
|
._fd-tcb-btn{
|
|
display: flex;
|
|
cursor: pointer;
|
|
}
|
|
|
|
</style>
|