DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

改为暗色风格主题

Browse Source
This commit is contained in:
砂糖
2025-08-28 15:06:03 +08:00
parent 7ea0de6a67
commit 8634549dd3
13 changed files with 1662 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
klp-ui/src/assets/styles/btn.scss
View File

@@ -97,3 +97,17 @@
font-size: 14px;
border-radius: 2px;
}
.el-table__cell {
padding: 0 !important;
}
.el-table__cell .el-button {
padding: 0 !important;
}
.el-table__cell + .el-button {
margin-left: 4px !important;
padding: 0;
}

1454
klp-ui/src/assets/styles/element-ui.scss
View File

File diff suppressed because it is too large Load Diff

121
klp-ui/src/assets/styles/sidebar.scss
View File

@@ -1,10 +1,16 @@
#app {
// 文本颜色调整为偏黑色系（直接写死值，确保清晰）
--text-primary: #1a1a1a;
--text-regular: #333333;
--text-secondary: #555555;
--text-placeholder: #777777;
.main-container {
height: 100%;
transition: margin-left .28s;
transition: margin-left .28s, box-shadow .3s ease;
margin-left: $base-sidebar-width;
position: relative;
background: #1E2227; // 金属浅色渐变
}
.sidebarHide {
@@ -12,10 +18,11 @@
}
.sidebar-container {
-webkit-transition: width .28s;
transition: width 0.28s;
-webkit-transition: width .28s, background .3s ease;
transition: width 0.28s, background .3s ease;
width: $base-sidebar-width !important;
background-color: $base-menu-background;
background: #1E2227; // 金属深色渐变
border-right: 1px solid #8d939b;
height: 100%;
position: fixed;
font-size: 0px;
@@ -24,8 +31,7 @@
left: 0;
z-index: 1001;
overflow: hidden;
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
box-shadow: 2px 0 6px rgba(0,21,41,.35);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
// reset element-ui css
.horizontal-collapse-transition {
@@ -38,6 +44,12 @@
.el-scrollbar__bar.is-vertical {
right: 0px;
background: rgba(0, 0, 0, 0.05);
}
.el-scrollbar__thumb {
background: #1E2227;
border-radius: 3px;
}
.el-scrollbar {
@@ -58,52 +70,84 @@
display: inline-block;
width: 100%;
overflow: hidden;
color: var(--text-regular); // 链接文本偏黑
text-decoration: none;
}
.svg-icon {
margin-right: 16px;
color: var(--text-secondary); // 图标颜色稍浅
}
.el-menu {
border: none;
height: 100%;
width: 100% !important;
background: transparent;
}
.el-menu-item, .el-submenu__title {
// 明确默认状态样式（关键修复）
background: transparent !important;
box-shadow: none !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: var(--text-regular); // 菜单项文本偏黑
border-radius: 4px;
margin: 0 6px;
transition: all 0.2s ease;
}
// menu hover
// menu hover - 仅在hover时生效
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
background: rgba(255, 255, 255, 0.1) !important;
color: var(--text-primary) !important; // hover时文本更深
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1),
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
}
}
// 深色主题下子菜单选中高亮
& .theme-dark .is-active > .el-submenu__title {
color: $base-menu-color-active !important;
// border-right: 3px solid $base-menu-color-active !important;
color: #fff !important; // 选中时文字纯白
// background-color: rgba(95, 123, 160, 0.25) !important; // 工业蓝浅高亮
// border-left: 3px solid #5F7BA0; // 左边高亮条
}
& .nest-menu .el-submenu>.el-submenu__title,
// & .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
// 子菜单默认样式
background: transparent !important;
box-shadow: none !important;
min-width: $base-sidebar-width !important;
margin: 0 4px;
&:hover {
background-color: rgba(0, 0, 0, 0.06) !important;
background: rgba(255, 255, 255, 0.1) !important;
color: var(--text-primary) !important;
}
}
& .theme-dark .nest-menu .el-submenu>.el-submenu__title,
// & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
& .theme-dark .el-submenu .el-menu-item {
background-color: $base-sub-menu-background !important;
background: transparent !important;
color: var(--text-regular);
&:hover {
background-color: $base-sub-menu-hover !important;
background: rgba(255, 255, 255, 0.1) !important;
color: var(--text-primary) !important;
}
&.is-active {
background: rgba(95, 123, 160, 0.28) !important; // 激活背景
color: #fff !important; // 激活文字白色
font-weight: 600;
border-left: 3px solid #5F7BA0; // 左边高亮条
}
}
}
@@ -139,7 +183,6 @@
.svg-icon {
margin-left: 20px;
}
}
}
@@ -169,8 +212,9 @@
}
.sidebar-container {
transition: transform .28s;
transition: transform .28s, box-shadow .3s ease;
width: $base-sidebar-width !important;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
}
&.hideSidebar {
@@ -183,7 +227,6 @@
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;
@@ -196,14 +239,34 @@
&>.el-menu {
.svg-icon {
margin-right: 16px;
color: var(--text-secondary);
}
}
.nest-menu .el-submenu>.el-submenu__title,
.el-menu-item {
.el-menu-item .nest-menu {
// 默认样式重置
background: transparent !important;
box-shadow: none !important;
&:hover {
// you can use $subMenuHover
background-color: rgba(0, 0, 0, 0.06) !important;
background: rgba(255, 255, 255, 0.1) !important;
color: var(--text-primary) !important;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1),
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
}
::v-deep &.is-active {
background: rgba(95, 123, 160, 0.28) !important; // 工业蓝背景
color: #ffffff !important; // 激活文字白色
font-weight: 600;
border-left: 3px solid #5F7BA0;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.15),
inset -1px -1px 2px rgba(255, 255, 255, 0.08);
}
::v-deep .el-menu-item.is-active span,
::v-deep .el-submenu__title.is-active span {
color: #ffffff !important; // 激活文字白色
}
}
@@ -211,9 +274,12 @@
>.el-menu--popup {
max-height: 100vh;
overflow-y: auto;
background: linear-gradient(145deg, #b0b5bb, #999ea6);
border: 1px solid #8d939b;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
background: rgba(0, 0, 0, 0.05);
}
&::-webkit-scrollbar {
@@ -221,12 +287,13 @@
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
background: #8d939b;
border-radius: 3px;
}
}
}
.el-menu-item.is-active {
border-left: 4px solid !important;
#app .sidebar-container .el-menu-item,
#app .sidebar-container .el-submenu__title {
margin: 0;
}

10
klp-ui/src/components/KLPUI/KLPList/index.vue
View File

@@ -257,7 +257,7 @@ export default {
.klp-list-item {
padding: 6px 8px;
margin-bottom: 6px;
border-bottom: 1px solid #e6e6e6;
border-bottom: 1px solid #111;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
@@ -269,8 +269,8 @@ export default {
/* 列表项选中状态（左侧高亮边框+背景色） */
.klp-list-item.active {
border-left: 3px solid #409eff;
background-color: #f5f7fa;
border-left: 3px solid #2bf;
background-color: #222;
}
/* 列表标题区域（占满中间空间，让操作按钮靠右） */
@@ -284,7 +284,7 @@ export default {
/* 标题前置标签样式 */
.klp-list-title .title-label {
color: #606266;
color: #ddd;
margin-right: 6px;
font-size: 13px;
white-space: nowrap; /* 标签不换行 */
@@ -293,7 +293,7 @@ export default {
/* 标题内容样式（溢出省略） */
.klp-list-title .title-value {
color: #303133;
color: #ddd;
font-weight: 500;
font-size: 14px;
white-space: nowrap; /* 禁止换行 */

23
klp-ui/src/components/KLPUI/KLPTable/ColumnRender.vue Normal file
View File

@@ -0,0 +1,23 @@
<script>
export default {
name: 'ColumnRender',
functional: true,
props: {
column: {
type: Object,
required: true
},
render: {
type: Function,
required: true
},
data: {
type: Object,
required: true
}
},
render(h, { props }) {
return props.render(h, props.data);
}
}
</script>

79
klp-ui/src/components/KLPUI/KLPTable/index.vue
View File

@@ -39,6 +39,39 @@
<!-- 3. 透传“自定义列”插槽（业务层直接用 <el-table-column> 嵌套的情况） -->
<slot v-bind:tableRef="tableRef"></slot>
<el-table-column
v-if="selectionColumn"
type="selection"
width="55"
align="center"
></el-table-column>
<el-table-column
v-if="indexColumn"
type="index"
width="55"
align="center"
></el-table-column>
<el-table-column
v-for="(column, index) in customColumns"
v-bind="column"
:width="column.width"
:prop="column.prop"
:align="column.align"
:label="column.label"
:min-width="column.minWidth"
:fixed="column.fixed"
:show-overflow-tooltip="column.showOverflowTooltip"
:sortable="column.sortable"
>
<template v-slot="scope">
<ColumnRender v-if="column.render" :column="column" :data="scope.row" :render="column.render"/>
<Eclipse v-else-if="column.eclipse" :text="scope.row[column.prop]"></Eclipse>
<span v-else>{{ scope.row[column.prop] }}</span>
</template>
</el-table-column>
</el-table>
<!-- 扩展层：可后续统一添加分页（如与 MyPagination 组件联动） -->
@@ -47,8 +80,15 @@
</template>
<script>
import ColumnRender from './ColumnRender.vue';
import Eclipse from './renderer/eclipse.vue';
export default {
name: "KLPTable", // 组件名，便于调试和文档生成
name: "KLPTable", // 组件名，便于调试和文档生成
components: {
ColumnRender,
Eclipse
},
props: {
// 1. 扩展 props：新增原生 Table 没有的属性（如加载状态）
loading: {
@@ -63,6 +103,18 @@ export default {
customClass: {
type: String,
default: ""
},
customColumns: {
type: Array,
default: () => []
},
selectionColumn: {
type: Boolean,
default: false
},
indexColumn: {
type: Boolean,
default: false
}
},
data() {
@@ -71,6 +123,31 @@ export default {
};
},
methods: {
// 核心方法：净化scope，移除可能导致循环引用的属性
sanitizeScope(scope) {
if (!scope) return {};
// 只保留安全的属性（根据实际需求调整）
const { row, column, $index, store } = scope;
// 深拷贝避免引用传递，同时过滤循环引用
return this.deepClone({ row, column, $index, store });
},
// 安全的深拷贝方法（避免JSON.parse/stringify无法处理的类型）
deepClone(obj) {
if (obj === null || typeof obj !== "object") return obj;
if (obj instanceof Date) return new Date(obj);
if (obj instanceof RegExp) return new RegExp(obj);
// 避免处理Vue实例（通常带有循环引用）
if (obj._isVue) return { _isVue: true };
const clone = Array.isArray(obj) ? [] : {};
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
clone[key] = this.deepClone(obj[key]);
}
}
return clone;
},
// 3. 透传原生 Table 实例方法（如 clearSelection、doLayout 等）
// 业务层可通过 this.$refs.myTable.xxx() 调用原生方法
getTableInstance() {

34
klp-ui/src/components/KLPUI/KLPTable/renderer/eclipse.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div class="eclipse-container">
<el-tooltip :content="text" placement="top" :disabled="text.length < 10">
<span class="eclipse">{{ text }}</span>
</el-tooltip>
</div>
</template>
<script>
export default {
name: 'Eclipse',
props: {
text: {
type: String,
required: true
},
}
}
</script>
<style>
.eclipse-container {
position: relative; /* 为tooltip提供定位参考 */
display: inline-block; /* 确保容器只占内容宽度 */
}
.eclipse {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block; /* 确保元素有明确的尺寸 */
max-width: 100%; /* 限制最大宽度，确保溢出效果生效 */
}
</style>

43
klp-ui/src/layout/components/Navbar.vue
View File

@@ -106,24 +106,32 @@ export default {
height: 50px;
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
// 金属质感渐变背景
background: #454c51;
border-bottom: 1px solid #8d939b;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1),
0 1px 1px rgba(255, 255, 255, 0.08) inset;
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
transition: background .3s;
-webkit-tap-highlight-color:transparent;
transition: all .3s ease;
-webkit-tap-highlight-color: transparent;
padding: 0 15px;
border-right: 1px solid rgba(0, 0, 0, 0.05);
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(0, 0, 0, 0.05);
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08),
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
}
}
.breadcrumb-container {
float: left;
padding-left: 15px;
}
.topmenu-container {
@@ -147,24 +155,29 @@ export default {
.right-menu-item {
display: inline-block;
padding: 0 8px;
padding: 0 12px;
height: 100%;
font-size: 18px;
color: #5a5e66;
// 金属风格文字色
color: #ddd;
vertical-align: text-bottom;
transition: all 0.2s ease;
&.hover-effect {
cursor: pointer;
transition: background .3s;
position: relative;
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(0, 0, 0, 0.05);
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08),
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
color: #333;
}
}
}
.avatar-container {
margin-right: 30px;
margin-right: 15px;
.avatar-wrapper {
margin-top: 5px;
@@ -174,18 +187,22 @@ export default {
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 10px;
border-radius: 8px;
// 头像金属边框
border: 1px solid #a0a6ad;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -20px;
right: -15px;
top: 25px;
font-size: 12px;
color: #666;
}
}
}
}
}
</style>
</style>

74
klp-ui/src/layout/components/TagsView/index.vue
View File

@@ -241,9 +241,11 @@ export default {
.tags-view-container {
height: 34px;
width: 100%;
background: #fff;
border-bottom: 1px solid #d8dce5;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
// 金属浅色渐变背景（直接写死渐变值）
background: #454c51;
border-bottom: 1px solid #a0a6ad;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.05) inset;
.tags-view-wrapper {
.tags-view-item {
display: inline-block;
@@ -251,39 +253,61 @@ export default {
cursor: pointer;
height: 26px;
line-height: 26px;
border: 1px solid #d8dce5;
color: #495060;
background: #fff;
border: 1px solid #a0a6ad;
color: #ddd;
// 标签金属渐变背景
background: #454c51;
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
border-radius: 4px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1),
-1px -1px 2px rgba(255, 255, 255, 0.05);
transition: all 0.2s ease;
&:first-of-type {
margin-left: 15px;
}
&:last-of-type {
margin-right: 15px;
}
&:hover {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15),
-1px -1px 2px rgba(255, 255, 255, 0.08);
border-color: #8d939b;
}
&.active {
background-color: #42b983;
// 激活状态主色调渐变
background: linear-gradient(145deg, #6b809d, #637994);
color: #fff;
border-color: #42b983;
border-color: #5a6d86;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15),
-1px -1px 2px rgba(255, 255, 255, 0.1) inset;
&::before {
content: '';
background: #fff;
background: rgba(255, 255, 255, 0.8);
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
position: relative;
margin-right: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset;
}
}
}
}
.contextmenu {
margin: 0;
background: #fff;
// 右键菜单金属背景
background: #454c51;
border: 1px solid #a0a6ad;
z-index: 3000;
position: absolute;
list-style-type: none;
@@ -291,14 +315,19 @@ export default {
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
color: #606266;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15),
-2px -2px 5px rgba(255, 255, 255, 0.08);
li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background: #eee;
background: rgba(99, 121, 148, 0.15);
color: #637994;
}
}
}
@@ -306,9 +335,10 @@ export default {
</style>
<style lang="scss">
//reset element css of el-icon-close
// 重置关闭图标样式
.tags-view-wrapper {
.tags-view-item {
color: #ddd;
.el-icon-close {
width: 16px;
height: 16px;
@@ -317,16 +347,28 @@ export default {
text-align: center;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
transform-origin: 100% 50%;
margin-left: 4px;
&:before {
transform: scale(.6);
display: inline-block;
vertical-align: -3px;
}
&:hover {
background-color: #b4bccc;
background-color: rgba(0, 0, 0, 0.15);
color: #ddd;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1),
inset -1px -1px 2px rgba(255, 255, 255, 0.05);
}
}
&.active {
.el-icon-close:hover {
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
}
}
}
</style>
</style>

1
klp-ui/src/views/index.vue
View File

@@ -33,7 +33,6 @@
</template>
<script>
import * as echarts from 'echarts';
import AllApplications from '@/views/components/AllApplications.vue';
import OrderDashboard from '@/views/components/OrderDashboard.vue';
import FlowTable from '@/views/components/FlowTable.vue';

64
klp-ui/src/views/wms/order/customer.vue
View File

@@ -75,9 +75,9 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<KLPTable v-loading="loading" :data="customerList" @selection-change="handleSelectionChange">
<KLPTable v-loading="loading" :data="customerList" @selection-change="handleSelectionChange" :customColumns="customColumns">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="编号，主键自增" align="center" prop="customerId" v-if="false"/>
<!-- <el-table-column label="编号，主键自增" align="center" prop="customerId" v-if="false"/>
<el-table-column label="客户名称" align="center" prop="name" />
<el-table-column label="手机" align="center" prop="mobile" />
<el-table-column label="电话" align="center" prop="telephone" />
@@ -108,7 +108,7 @@
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table-column> -->
</KLPTable>
<pagination
@@ -183,6 +183,64 @@ export default {
},
data() {
return {
customColumns: [
{
label: '客户名称',
prop: 'name'
},
{
label: '手机',
prop: 'mobile'
},
{
label: '电话',
prop: 'telephone'
},
{
label: 'QQ',
prop: 'qq'
},
{
label: '微信',
prop: 'wechat'
},
{
label: '邮箱',
prop: 'email'
},
{
label: '地区编号',
prop: 'areaId'
},
{
label: '详细地址',
prop: 'detailAddress',
eclipse: true
},
{
label: '客户等级',
prop: 'level'
},
{
label: '客户来源',
prop: 'source'
},
{
label: '备注',
prop: 'remark'
},
{
label: '操作',
width: 150,
fixed: 'right',
render: (h, row) => {
const actions = [];
actions.push(<el-button type="text" size="mini" icon="el-icon-edit" onClick={() => this.handleUpdate(row)}>修改</el-button>)
actions.push(<el-button type="text" size="mini" icon="el-icon-delete" onClick={() => this.handleDelete(row)}>删除</el-button>)
return actions;
}
}
],
// 按钮loading
buttonLoading: false,
// 遮罩层

104
klp-ui/src/views/wms/rxgood/detail.vue
View File

@@ -91,55 +91,7 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<KLPTable v-loading="loading" :data="reportDetailList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" type="index" v-if="true"/>
<!-- <el-table-column label="关联汇报概述ID" align="center" prop="summaryId" /> -->
<el-table-column label="货物编号" align="center" prop="deviceCode" />
<el-table-column label="货物类别" align="center" prop="category" />
<el-table-column label="货物说明" align="center" prop="deviceDescription" />
<el-table-column label="收发货详情" align="center" prop="reportDetail" />
<el-table-column label="图片概况" align="center" prop="ossIds" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.images" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleImageDetail(scope.row)"
>图片详情</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleAddExpress(scope.row)"
>发货</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</KLPTable>
<KLPTable v-loading="loading" :data="reportDetailList" @selection-change="handleSelectionChange" :selectionColumn="true" :indexColumn="true" :customColumns="customColumns" />
<pagination
v-show="total>0"
@@ -253,6 +205,60 @@ export default {
components: {UserSelect},
data() {
return {
customColumns: [
{
label: '关联汇报概述ID',
prop: 'summaryId',
width: 180,
},
{
label: '货物编号',
prop: 'deviceCode',
width: 180,
},
{
label: '货物类别',
prop: 'category',
width: 180,
},
{
label: '货物说明',
prop: 'deviceDescription',
width: 180,
},
{
label: '收发货详情',
prop: 'reportDetail',
width: 180,
},
{
label: '图片概况',
prop: 'ossIds',
width: 100,
render: (h, row) => {
return <image-preview src={row.images} width={50} height={50} />
}
},
{
label: '备注',
prop: 'remark',
width: 180,
eclipse: true
},
{
label: '操作',
width: 150,
fixed: 'right',
render: (h, row) => {
const actions = [];
actions.push(<el-button type="text" size="mini" icon="el-icon-edit" onClick={() => this.handleUpdate(row)}>修改</el-button>)
actions.push(<el-button type="text" size="mini" icon="el-icon-view" onClick={() => this.handleImageDetail(row)}>图片详情</el-button>)
actions.push(<el-button type="text" size="mini" icon="el-icon-edit" onClick={() => this.handleAddExpress(row)}>发货</el-button>)
actions.push(<el-button type="text" size="mini" icon="el-icon-delete" onClick={() => this.handleDelete(row)}>删除</el-button>)
return actions;
}
}
],
// 按钮loading
buttonLoading: false,
expressOpen:false,

86
klp-ui/src/views/wms/rxgood/index.vue
View File

@@ -85,44 +85,7 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<KLPTable v-loading="loading" :data="reportSummaryList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" type="index" v-if="true"/>
<el-table-column label="收发货标题" align="center" prop="reportTitle">
<template slot-scope="scope">
<router-link class="link-type" :to="'/exp/rx/detail/' + scope.row.summaryId">{{ scope.row.reportTitle }}</router-link>
</template>
</el-table-column>
<el-table-column label="最近汇报时间" align="center" prop="lastUpdateTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.lastUpdateTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="收发货日期" align="center" prop="reportDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.reportDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="经办人" align="center" prop="reporter" />
<!-- <el-table-column label="涉及项目" align="center" prop="projectName" />-->
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</KLPTable>
<KLPTable v-loading="loading" :data="reportSummaryList" @selection-change="handleSelectionChange" :selectionColumn="true" :indexColumn="true" :customColumns="customColumns" />
<pagination
v-show="total>0"
@@ -182,6 +145,53 @@ export default {
name: "ReportSummary",
data() {
return {
customColumns: [
{
label: '收发货标题',
prop: 'reportTitle',
render: (h, row) => {
return <router-link class="link-type" to={'/exp/rx/detail/' + row.summaryId}>{row.reportTitle}</router-link>
}
},
{
label: '最近汇报时间',
prop: 'lastUpdateTime',
width: 180,
render: (h, row) => {
return <span>{this.parseTime(row.lastUpdateTime, '{y}-{m}-{d}')}</span>
}
},
{
label: '收发货日期',
prop: 'reportDate',
width: 180,
render: (h, row) => {
return <span>{this.parseTime(row.reportDate, '{y}-{m}-{d}')}</span>
}
},
{
label: '经办人',
prop: 'reporter',
width: 180,
},
{
label: '备注',
prop: 'remark',
width: 180,
eclipse: true
},
{
label: '操作',
width: 150,
fixed: 'right',
render: (h, row) => {
const actions = [];
actions.push(<el-button type="text" size="mini" icon="el-icon-edit" onClick={() => this.handleUpdate(row)}>修改</el-button>)
actions.push(<el-button type="text" size="mini" icon="el-icon-delete" onClick={() => this.handleDelete(row)}>删除</el-button>)
return actions;
}
}
],
// projectList: [],
// 按钮loading
buttonLoading: false,