129 lines
4.4 KiB
JavaScript
129 lines
4.4 KiB
JavaScript
Vue.component('vi-title', {
|
|
props: ['title'],
|
|
template: `
|
|
<div style="display: flex;flex-direction:row;color: #1867b0;font-weight: bolder;margin-bottom: 20px">
|
|
<div style="width: 5px;height: 24px;background-color: #1867b0;border-radius: 2px"></div>
|
|
<div style="margin-left: 20px;line-height: 24px;font-size: 15px;letter-spacing: 1px">
|
|
{{ title }}
|
|
</div>
|
|
</div>
|
|
`
|
|
})
|
|
|
|
Vue.component('vi-title2', {
|
|
props: ['title'],
|
|
template: `
|
|
<el-row type="flex" justify="space-between" align="middle" style="margin-bottom: 15px">
|
|
<div style="display: flex;justify-content: center;align-items: center">
|
|
<vi-title :title="title" style="margin-bottom: 0"></vi-title><slot name="label_end"></slot>
|
|
</div>
|
|
|
|
<div style="display: flex;justify-content: right;align-items: center">
|
|
<slot name="func"></slot>
|
|
</div>
|
|
</el-row>
|
|
|
|
`
|
|
})
|
|
|
|
Vue.component('vi-table-state', {
|
|
props: ['state'],
|
|
template: `
|
|
<span :style="'color:'+state.stateColor">{{ state.stateName }}</span>
|
|
`
|
|
})
|
|
Vue.component('more', {
|
|
props: {more: {type: Boolean, default: false}},
|
|
template: `
|
|
<el-link type="primary" :underline="false" style="margin-left: 15px"
|
|
@click="more=!more;$emit('change', more)">
|
|
{{ more ? '收起' : '展开' }}<i
|
|
:class="more?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-link>
|
|
`,
|
|
model: {
|
|
prop: 'more',
|
|
event: 'change'
|
|
}
|
|
})
|
|
|
|
Vue.component('table-tool', {
|
|
props: {
|
|
label: {type: String},
|
|
app: {}
|
|
},
|
|
data() {
|
|
return {
|
|
checkedFields: [],
|
|
columns: [],
|
|
}
|
|
},
|
|
methods: {
|
|
tableSizeChange(command) {
|
|
const {size} = command
|
|
this.app.tableSizeChange(size)
|
|
},
|
|
columnChange() {
|
|
this.app.columnChange(this.columns.filter(v => this.checkedFields.includes(v.prop)))
|
|
},
|
|
getColumns() {
|
|
const {tableColumns} = this.app
|
|
if (!tableColumns) {
|
|
return
|
|
}
|
|
this.columns = tableColumns
|
|
this.checkedFields = this.columns.filter(v => v.checked !== 0).map(v => v.prop)
|
|
this.columnChange()
|
|
},
|
|
},
|
|
created() {
|
|
this.getColumns()
|
|
},
|
|
template: `
|
|
<el-row type="flex" justify="space-between" align="middle" style="margin-bottom: 15px">
|
|
|
|
<div style="display: flex;justify-content: center;align-items: center">
|
|
<vi-title :title="label" style="margin-bottom: 0"></vi-title><slot name="label_end"></slot>
|
|
</div>
|
|
|
|
<div style="display: flex;justify-content: right;align-items: center">
|
|
<slot name="func"></slot>
|
|
|
|
<div class="table-tool-group">
|
|
<div class="table-tool-group-item" @click="app.doSearch()" style="width: 50px;padding-left: 10px;">
|
|
<i class="el-icon-refresh"></i>
|
|
</div>
|
|
|
|
<el-dropdown @command="tableSizeChange" class="table-tool-group-item">
|
|
<div style="display: flex;width: 100%;height: 100%;justify-content: center;align-items: center"><i
|
|
class="el-icon-c-scale-to-original"></i></div>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item :command="{size:'mini'}">Mini</el-dropdown-item>
|
|
<el-dropdown-item :command="{size:'small'}">Small</el-dropdown-item>
|
|
<el-dropdown-item :command="{size:'medium'}">Medium</el-dropdown-item>
|
|
<el-dropdown-item :command="{size:''}">Large</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
|
|
<el-popover
|
|
trigger="hover" placement="bottom-start">
|
|
|
|
<div>
|
|
<el-checkbox-group v-model="checkedFields" @change="columnChange">
|
|
<el-checkbox v-for="field in columns" :label="field.prop" style="display: block">{{
|
|
field.label
|
|
}}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
</div>
|
|
|
|
<div slot="reference" style="width: 50px;padding-right: 10px;" class="table-tool-group-item">
|
|
<i class="el-icon-s-operation"></i>
|
|
</div>
|
|
</el-popover>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</el-row>
|
|
`,
|
|
}) |