CN-926 列表页样式改版

This commit is contained in:
hyx
2023-03-10 20:50:54 +08:00
parent 8f1adef30d
commit 64a6eac4a7
15 changed files with 289 additions and 144 deletions

View File

@@ -7,23 +7,24 @@
<div class="top-tools">
<div class="top-tool-left" style="min-width: 300px">
<slot name="top-tool-left"></slot>
</div>
<div class="top-tool-right">
<!-- <el-input v-model="keyWord" value="keyWord"></el-input>
<el-button @click="onSearch" icon="el-icon-search" type="info" size="mini" style="margin-right: 10px"></el-button>-->
<div v-if="showLayout.indexOf('search') > -1" class="top-tool-search margin-r-20">
<div style="display: flex">
<el-input v-model="keyWord" size="small" @keyup.enter="onSearch"></el-input>
<!-- <el-button icon="el-icon-search" @click="onSearch" size="small"></el-button>-->
<button class="top-tool-btn" style="border-radius: 0" @click="onSearch">
<!-- <el-button icon="el-icon-search" @click="onSearch" size="small"></el-button>-->
<button class="top-tool-btn top-tool-btn--search" style="border-radius: 0 2px 2px 0 !important;" @click="onSearch">
<i class="el-icon-search"></i>
</button>
</div>
</div>
</div>
<div class="top-tool-right">
<!-- <el-input v-model="keyWord" value="keyWord"></el-input>
<el-button @click="onSearch" icon="el-icon-search" type="info" size="mini" style="margin-right: 10px"></el-button>-->
<slot name="top-tool-right"></slot>
<button v-if="showLayout.indexOf('elementSet') > -1" class="top-tool-btn" @click="tools.showCustomTableTitle = true">
<i class="cn-icon-gear cn-icon"></i>
</button>
<div v-if="showLayout.indexOf('elementSet') > -1" class="btn-customize" @click="tools.showCustomTableTitle = true">
<i class="cn-icon-gear cn-icon icon-gear"></i> <span> {{$t('network.customize')}}</span>
</div>
</div>
</div>
<div class="cn-table">

View File

@@ -47,29 +47,6 @@
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column
:resizable="false"
:width="operationWidth"
fixed="right">
<template #header>
<div class="table-operation-title">{{$t('overall.option')}}</div>
</template>
<template #default="scope">
<div class="table-operation-items">
<button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<i class="cn-icon cn-icon-more-arrow-down"></i>
</div>
<template #dropdown>
<el-dropdown-menu >
<el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
</el-table-column>
</el-table>
</template>

View File

@@ -62,29 +62,6 @@
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column
:resizable="false"
:width="operationWidth"
fixed="right">
<template #header>
<div class="table-operation-title">{{$t('overall.option')}}</div>
</template>
<template #default="scope">
<div class="table-operation-items">
<button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<i class="cn-icon cn-icon-more-arrow-down"></i>
</div>
<template #dropdown>
<el-dropdown-menu >
<el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
</el-table-column>
</el-table>
</template>

View File

@@ -188,22 +188,6 @@
<span v-else>{{ scope.row[item.prop] || '-' }}</span>
</template>
</el-table-column>
<el-table-column
:resizable="false"
:width="operationWidth"
fixed="right">
<template #header>
<div class="table-operation-title">{{ $t('overall.option') }}</div>
</template>
<template #default="scope">
<div class="table-operation-items">
<button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i
class="cn-icon cn-icon-bianji"></i></button>
<button class="table-operation-item" @click="tableOperation(['delete', scope.row])"><i
class="cn-icon cn-icon-shanchu"></i></button>
</div>
</template>
</el-table-column>
</el-table>
<div class="table-operation-all">
<el-checkbox v-model="checkboxAll" :indeterminate="isIndeterminate" @change="selectAll(tableData)"></el-checkbox>
@@ -308,6 +292,7 @@ export default {
loadingTableId: '',
loadingPreviewId: '',
downDataList: [],
disableEdit:false,//编辑按钮是否不可用,当选择多条记录的时候你,编辑按钮不可用
// pageObj: {
// pageNo: 1,
// pageSize: 20,
@@ -556,6 +541,12 @@ export default {
})
// this.selectIds = selectIds
}
this.batchDeleteObjs = objs
if(objs.length > 1) {
this.disableEdit = true
}else {
this.disableEdit = false
}
},
/**
* 全选按钮
@@ -574,6 +565,13 @@ export default {
this.$refs.dataTable.clearSelection()
}
this.batchDeleteObjs = objs
if(objs.length > 1) {
this.disableEdit = true
}else {
this.disableEdit = false
}
// this.selectIds = selectIds
},
/**

View File

@@ -66,29 +66,6 @@
<span v-else>{{scope.row[item.prop] || '-'}}</span>
</template>
</el-table-column>
<el-table-column
:resizable="false"
:width="operationWidth"
fixed="right">
<template #header>
<div class="table-operation-title">{{$t('overall.option')}}</div>
</template>
<template #default="scope">
<div class="table-operation-items">
<!-- <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>-->
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<i class="cn-icon cn-icon-more-arrow-down"></i>
</div>
<template #dropdown>
<el-dropdown-menu >
<el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
</el-table-column>
</el-table>
</template>