<template>
|
<div class="employee-dep-management">
|
<p class="title">产品列表 </p>
|
<div class="system-content">
|
<!-- 左边导航栏 -->
|
<div
|
v-loading="depLoading"
|
class="system-view-nav">
|
<div class='system-nav-title'>
|
产品类型
|
</div>
|
<el-tree
|
ref="tree"
|
:data="treeData"
|
:expand-on-click-node="false"
|
node-key="DepartmentId"
|
:props="defaultProps"
|
highlight-current
|
@node-click="changeDepClick">
|
<flexbox
|
slot-scope="{ node, data }"
|
class="node-data">
|
<el-tooltip :content="data.TypeName" placement="top">
|
<div class="node-label">{{ data.TypeName }}</div>
|
</el-tooltip>
|
</flexbox>
|
</el-tree>
|
</div>
|
<!-- 右边内容 -->
|
<div class="system-view-table flex-index">
|
<div
|
class="table-top">
|
<el-input
|
class="search-container"
|
v-model="searchName"
|
placeholder="请输入你要搜索的内容"
|
@keyup.enter.native="searchClick"/>
|
<el-button class="searchBtn" type="primary" @click="searchClick">搜索</el-button>
|
</div>
|
<div class="flex-box">
|
<el-table
|
v-loading="loading"
|
id="crm-table"
|
:data="tableData"
|
:height="tableHeight"
|
:cell-style="cellStyle"
|
class="n-table--border"
|
border
|
highlight-current-row
|
style="width: 100%"
|
@row-click="rowClick">
|
<el-table-column
|
v-for="(item, index) in fieldList"
|
:key="index"
|
:prop="item.field"
|
:label="item.name"
|
:formatter="fieldFormatter"
|
show-overflow-tooltip>
|
<template
|
slot="header"
|
slot-scope="scope">
|
<div class="table-head-name">{{ scope.column.label }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column/>
|
</el-table>
|
<div class="p-contianer" v-if='total>0'>
|
<el-pagination
|
:current-page="currentPage"
|
:page-sizes="pageSizes"
|
:page-size.sync="pageSize"
|
:total="total"
|
class="p-bar"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { GetAutoProductTypeList, GetAutoProductListAsync } from '@/api/customermanagement/product'
|
|
export default {
|
/** 系统管理 的 员工部门管理 */
|
name: 'ProductIndex',
|
components: {
|
},
|
data () {
|
return {
|
treeData: [],
|
depLoading: false, // 左侧部门loading效果
|
// 列表
|
loading: false, // 表的加载动画
|
searchName: '', // 搜索
|
selectModel: '', // 状态值 用于筛选
|
/** 列表 */
|
fieldList: [
|
{ name: '产品线', field: 'ProductLine', formType: 'text' },
|
{ name: '产品类型', field: 'ProductType', formType: 'text' },
|
{ name: 'SKU值', field: 'SKU', formType: 'text' },
|
{ name: '产品名称', field: 'ProductName', formType: 'text' },
|
{ name: '产品描述', field: 'ProductDesc', formType: 'text' },
|
{ name: '产品更新时间', field: 'LastUpdateTime', formType: 'text' },
|
{ name: '产品是否在线', field: 'Status', formType: 'text' },
|
{ name: '市场参考价(￥)', field: 'ETP', formType: 'text' },
|
{ name: '建议经销商转售价(￥)', field: 'RTP', formType: 'text' }
|
],
|
tableData: [],
|
tableHeight: document.documentElement.clientHeight - 360, // 表的高度
|
/** 分页逻辑 */
|
structureValue: '', // 左侧列表选中的值 用于筛选
|
currentPage: 1,
|
pageSize: 10,
|
pageSizes: [10, 20, 45, 60],
|
total: 0,
|
defaultProps: {
|
children: 'ProductResultList',
|
label: 'TypeName'
|
}
|
}
|
},
|
computed: {
|
},
|
mounted () {
|
var self = this
|
/** 控制table的高度 */
|
window.onresize = function () {
|
self.tableHeight = document.documentElement.clientHeight - 260
|
}
|
// 部门树形列表
|
this.treeListFun()
|
},
|
methods: {
|
// 第一列点击事件
|
rowClick (row, column, event) {
|
},
|
changeDepClick (data) {
|
console.log(data)
|
this.structureValue = data.ParameterLink
|
this.usersListFun()
|
},
|
// 获取树形列表
|
treeListFun () {
|
this.depLoading = true
|
GetAutoProductTypeList()
|
.then(res => {
|
if (res.data.ErrorCode === 200) {
|
this.treeData = res.data.Result
|
this.structureValue = res.data.Result[0].ParameterLink
|
this.tableTopName = res.data.Result[0].TypeName
|
this.usersListFun()
|
this.depLoading = false
|
} else {
|
this.depLoading = false
|
}
|
})
|
.catch(() => {
|
this.depLoading = false
|
})
|
},
|
// 搜索框
|
searchClick () {
|
this.currentPage = 1
|
this.usersListFun()
|
},
|
|
// 更改每页展示数量
|
handleSizeChange (val) {
|
this.pageSize = val
|
this.usersListFun()
|
},
|
// 更改当前页数
|
handleCurrentChange (val) {
|
this.currentPage = val
|
this.usersListFun()
|
},
|
// 勾选
|
handleSelectionChange (val) {
|
this.selectionList = val // 勾选的行
|
},
|
// 用户列表
|
usersListFun () {
|
this.loading = true
|
GetAutoProductListAsync({
|
PageIndex: this.currentPage,
|
PageSize: this.pageSize,
|
Name: this.searchName,
|
TypeName: this.structureValue
|
})
|
.then(res => {
|
this.tableData = res.data.Result.List
|
this.total = res.data.Result.Count
|
this.loading = false
|
})
|
.catch(() => {
|
this.loading = false
|
})
|
},
|
cellStyle ({ row, column, rowIndex, columnIndex }) {
|
return { textAlign: 'left' }
|
},
|
// 列表信息格式化
|
fieldFormatter (row, column) {
|
if (column.property === 'Status') {
|
switch (row[column.property]) {
|
case true:
|
row[column.property] = '是'
|
break
|
case false:
|
row[column.property] = '否'
|
break
|
}
|
}
|
return row[column.property] || '--'
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.employee-dep-management {
|
/* padding: 0 20px 20px; */
|
height: 100%;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
}
|
.system-content {
|
position: relative;
|
height: 100%;
|
flex: 1;
|
display: flex;
|
overflow: hidden;
|
}
|
.system-view-nav {
|
width: 240px;
|
height: 100%;
|
overflow: auto;
|
margin-right: 10px;
|
background: #F8F8F8;
|
border: 1px solid #e6e6e6;
|
/deep/ .el-tree{
|
background-color: #F8F8F8;
|
}
|
.system-nav-title{
|
padding: 15px;
|
font-size: 14px;
|
font-weight: 600;
|
border-bottom: 1px solid #e6e6e6;
|
}
|
}
|
.title {
|
font-size: 18px;
|
height: 40px;
|
line-height: 40px;
|
margin: 10px 0;
|
color: #333;
|
padding: 0 20px;
|
}
|
.system-view-table {
|
background: #fff;
|
border: 1px solid #e6e6e6;
|
/* flex: 1; */
|
position: absolute;
|
top: 0;
|
left: 250px;
|
bottom: 0;
|
right: 0;
|
}
|
|
.table-top {
|
padding: 0 30px;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
margin-top: 30px;
|
.table-top__title{
|
font-size: 16px;
|
color: #333;
|
}
|
}
|
|
.status {
|
display: inline-block;
|
margin-left: 50px;
|
}
|
.status > span {
|
margin-right: 10px;
|
}
|
|
.status-name {
|
.user-img {
|
width: 32px;
|
min-width: 32px;
|
min-height: 32px;
|
height: 32px;
|
margin-right: 8px;
|
border-radius: 50%;
|
}
|
div {
|
width: 6px;
|
height: 6px;
|
border-radius: 3px;
|
}
|
color: #ff6a00;
|
cursor: pointer;
|
display: flex;
|
align-items: center;
|
justify-content: left;
|
}
|
/* 详情 */
|
.employee-dep-management /deep/ .el-dialog__wrapper {
|
margin-top: 60px !important;
|
}
|
// .employee-dep-management /deep/ .position-flxed-animation {
|
// left: 70%;
|
// height: 100%;
|
// color: red;
|
// margin: 0 !important;
|
// }
|
.dialog-top > img {
|
vertical-align: middle;
|
margin-right: 10px;
|
height: 36px;
|
}
|
.dialog-btn-group {
|
float: right;
|
}
|
.dialog-remark {
|
font-size: 14px;
|
color: #999;
|
margin-top: 10px;
|
}
|
.dialog-content {
|
margin-top: 20px;
|
padding-top: 20px;
|
border-top: 1px solid #e6e6e6;
|
}
|
.dialog-content > div {
|
padding: 10px 0;
|
}
|
.dialog-content > div > label {
|
color: #777;
|
width: 30%;
|
display: inline-block;
|
}
|
/* 新建和编辑 */
|
.new-dialog-title {
|
padding-left: 10px;
|
margin-bottom: 3px;
|
border-left: 2px solid #4D88FF;
|
}
|
.new-dialog-form {
|
height: 47vh;
|
overflow-y: auto;
|
padding: 20px;
|
}
|
.new-dialog-form /deep/ .el-form-item {
|
width: 50%;
|
margin: 0;
|
padding-bottom: 10px;
|
}
|
.new-dialog-form /deep/ .el-form-item .el-form-item__label {
|
padding: 0;
|
}
|
.new-dialog-form /deep/ .el-form-item .el-form-item__content {
|
width: 70%;
|
}
|
.nav-dialog-div {
|
margin-bottom: 20px;
|
}
|
.nav-dialog-div /deep/ .el-input {
|
width: auto;
|
}
|
/** 树形结构 */
|
.el-tree /deep/ .el-tree-node__content {
|
height: 30px;
|
&:hover{
|
color: #4D88FF;
|
background-color: #EBF1FF;
|
}
|
.node-data {
|
.node-img {
|
width: 15px;
|
height: 15px;
|
display: block;
|
margin-right: 8px;
|
margin-left: 24px;
|
}
|
.node-label {
|
margin-right: 8px;
|
}
|
.node-label-set {
|
display: none;
|
}
|
}
|
|
.node-data:hover .node-label-set {
|
display: block;
|
}
|
}
|
.el-tree /deep/ .el-tree-node.is-current > .el-tree-node__content {
|
background-color: #4D88FF;
|
color: #fff;
|
.node-label-set {
|
display: block;
|
}
|
}
|
.system-view-nav /deep/ .el-tree-node > .el-tree-node__children {
|
overflow: visible;
|
}
|
.system-view-nav /deep/ .el-tree > .el-tree-node {
|
min-width: 100%;
|
display: inline-block !important;
|
}
|
/* 搜索框图标按钮 */
|
.icon-search .el-icon-search {
|
position: absolute;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
width: 40px;
|
line-height: 40px;
|
text-align: center;
|
cursor: pointer;
|
font-size: 20px;
|
color: #ccc;
|
}
|
/* 设置flex布局 */
|
.flex-index {
|
display: flex;
|
flex-direction: column;
|
}
|
/* 设置占位 */
|
.flex-box {
|
flex: 1;
|
border-bottom: 1px solid #e6e6e6;
|
padding: 24px 30px;
|
}
|
/* 搜索框 */
|
.icon-search {
|
width: 280px;
|
position: relative;
|
}
|
.search-container {
|
width: 224px;
|
}
|
.search-container /deep/ .el-input__inner{
|
height: 32px;
|
}
|
.search-container /deep/ .el-input-group__append{
|
background-color: #4D88FF;
|
border-radius: 0px 3px 3px 0px;
|
color: #fff;
|
border: 1px solid #4D88FF;
|
}
|
.searchBtn{
|
width: 58px;
|
height: 32px;
|
margin-left: 24px;
|
}
|
.lt{
|
margin-left: 0;
|
}
|
.new-dialog-form /deep/ .el-select {
|
display: block;
|
}
|
|
/** 分页布局 */
|
.p-contianer {
|
position: relative;
|
background-color: white;
|
height: 44px;
|
.p-bar {
|
float: right;
|
margin: 5px 0 0 0;
|
font-size: 14px !important;
|
}
|
}
|
|
/** 勾选操作 */
|
.selection-bar {
|
font-size: 12px;
|
height: 54px;
|
min-height: 54px;
|
padding: 0 20px;
|
color: #777;
|
|
.selected—title {
|
flex-shrink: 0;
|
padding-right: 20px;
|
border-right: 1px solid #e6e6e6;
|
.selected—count {
|
color: #ff6a00;
|
}
|
}
|
}
|
|
.selection-items-box {
|
.selection-item {
|
width: auto;
|
padding: 15px;
|
.selection-item-icon {
|
display: block;
|
margin-right: 5px;
|
width: 15px;
|
height: 15px;
|
}
|
.selection-item-name {
|
cursor: pointer;
|
color: #777;
|
}
|
.selection-item-name:hover {
|
color: #ff6a00;
|
}
|
}
|
}
|
.new-dialog-form
|
/deep/
|
.el-form-item
|
.el-form-item__content
|
.el-select-group__wrap:not(:last-of-type)::after {
|
display: none;
|
}
|
.new-dialog-form /deep/ .el-form-item .el-form-item__content .el-select-group {
|
padding-left: 10px;
|
}
|
.new-dialog-form
|
/deep/
|
.el-form-item
|
.el-form-item__content
|
.el-select-group__title {
|
border-bottom: 1px solid #e4e7ed;
|
padding: 0 0 7px;
|
margin: 0 20px 5px;
|
}
|
|
.status-des {
|
font-size: 12px;
|
color: #777777;
|
margin: 0 5px;
|
position: absolute;
|
left: 0;
|
top: 7px;
|
.status-des-item {
|
margin: 8px;
|
display: inline-block;
|
div {
|
display: inline-block;
|
width: 6px;
|
height: 6px;
|
border-radius: 3px;
|
margin-right: 5px;
|
}
|
}
|
}
|
|
// 提示
|
// 提示标志
|
.wukong-help_tips {
|
color: #999;
|
font-size: 14px;
|
margin-left: 3px;
|
cursor: pointer;
|
}
|
|
.wukong-help_tips:hover {
|
color: #ff6a00;
|
}
|
|
// 修改密码和修改登录名的样式
|
.el-password {
|
.el-form-item {
|
margin-bottom: 5px;
|
}
|
}
|
|
.el-dialog__wrapper /deep/.el-dialog__body {
|
padding: 20px;
|
}
|
|
.tips {
|
font-size: 13px;
|
color: #999;
|
}
|
@import '../styles/table.scss';
|
</style>
|
