gxwebsoft
6de87ed4e2
- 调整合同管理备注输入框行数和最大长度 - 细化合同变更页面表单项间距和对齐方式 - 统一弹窗表单项的底部间距样式，改为注释禁用 - 调整 port-terminal 和 region 组件的表单项底部间距 - 修改 vite 配置中 API 请求代理地址 - 优化凭证执行详情搜索表单列宽布局 - 在运单管理页面更新型号字段为非必填，调整变更记录内容格式化显示 - 引入并使用 formatRouteChangeContent 工具函数 - 统一明细按钮显示逻辑，草稿状态也显示详情按钮 - 新增路由变更相关工具函数与样式支持
118 lines
2.7 KiB
Vue
118 lines
2.7 KiB
Vue
<template>
|
|
<div class="avue-crud__right table-header-tools">
|
|
<el-button v-if="showRefresh" icon="el-icon-refresh" circle @click="$emit('refresh')" />
|
|
<el-button
|
|
v-if="showColumn"
|
|
icon="el-icon-operation"
|
|
circle
|
|
@click="columnSettingVisible = true"
|
|
/>
|
|
<el-button
|
|
v-if="showSearch"
|
|
icon="el-icon-search"
|
|
circle
|
|
@click="$emit('update:searchVisible', !searchVisible)"
|
|
/>
|
|
<el-button v-if="showGrid" icon="el-icon-grid" circle @click="toggleTableSize" />
|
|
|
|
<el-dialog
|
|
v-if="showColumn"
|
|
v-model="columnSettingVisible"
|
|
title="列设置"
|
|
width="360px"
|
|
append-to-body
|
|
destroy-on-close
|
|
>
|
|
<el-checkbox-group
|
|
class="table-header-tools__column-setting"
|
|
:model-value="visibleColumnKeys"
|
|
@update:model-value="$emit('update:visibleColumnKeys', $event)"
|
|
>
|
|
<el-checkbox v-for="item in columns" :key="item.prop" :label="item.prop">
|
|
{{ item.label }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
<template #footer>
|
|
<el-button @click="columnSettingVisible = false">关闭</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const TABLE_SIZE_OPTIONS = ['default', 'large', 'small'];
|
|
|
|
export default {
|
|
name: 'TableHeaderTools',
|
|
props: {
|
|
columns: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
visibleColumnKeys: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
tableSize: {
|
|
type: String,
|
|
default: 'default',
|
|
},
|
|
searchVisible: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
showRefresh: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
showColumn: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
showSearch: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
showGrid: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
},
|
|
emits: ['refresh', 'update:visibleColumnKeys', 'update:tableSize', 'update:searchVisible'],
|
|
data() {
|
|
return {
|
|
columnSettingVisible: false,
|
|
};
|
|
},
|
|
deactivated() {
|
|
// keep-alive 缓存页面时关闭列设置弹窗，避免 Teleport 到 body 的弹窗切页后残留
|
|
this.columnSettingVisible = false;
|
|
},
|
|
methods: {
|
|
toggleTableSize() {
|
|
const index = TABLE_SIZE_OPTIONS.indexOf(this.tableSize);
|
|
const next = TABLE_SIZE_OPTIONS[(index + 1) % TABLE_SIZE_OPTIONS.length];
|
|
this.$emit('update:tableSize', next);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.table-header-tools.avue-crud__right {
|
|
width: auto;
|
|
margin: 0 0 0 auto;
|
|
flex: none;
|
|
white-space: nowrap;
|
|
text-align: right;
|
|
}
|
|
|
|
.table-header-tools__column-setting {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
max-height: 360px;
|
|
overflow: auto;
|
|
}
|
|
</style>
|