|
|
@@ -1,94 +1,114 @@
|
|
|
<template>
|
|
|
<div class="user-management-container">
|
|
|
- <vab-query-form>
|
|
|
- <vab-query-form-top-panel>
|
|
|
- <el-form :inline="true" :model="queryForm" @submit.native.prevent>
|
|
|
- <el-form-item>
|
|
|
- <el-input v-model.trim="queryForm.prodCode" clearable placeholder="产品编码" />
|
|
|
- </el-form-item>
|
|
|
+ <div class="side-layout">
|
|
|
+ <div class="tree-side">
|
|
|
+ <div class="head-container">
|
|
|
+ <span style="font-size: 25px">产品类别</span>
|
|
|
+ </div>
|
|
|
+ <el-tree
|
|
|
+ ref="tree"
|
|
|
+ class="filter-tree"
|
|
|
+ :data="prodClassOptions"
|
|
|
+ highlight-current
|
|
|
+ node-key="key"
|
|
|
+ :props="defaultProps"
|
|
|
+ @node-click="handleNodeClick" />
|
|
|
+ </div>
|
|
|
+ <div class="tree-table">
|
|
|
+ <vab-query-form>
|
|
|
+ <vab-query-form-top-panel>
|
|
|
+ <el-form :inline="true" :model="queryForm" @submit.native.prevent>
|
|
|
+ <el-form-item>
|
|
|
+ <el-input v-model.trim="queryForm.prodCode" clearable placeholder="产品编码" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-input v-model.trim="queryForm.prodName" clearable placeholder="产品名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-select v-model="queryForm.prodClass" placeholder="产品类别" style="width: 100%">
|
|
|
+ <el-option v-for="item in prodClassOptions" :key="item.key" :label="item.value" :value="item.key" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
|
|
|
+ <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </vab-query-form-top-panel>
|
|
|
+ <vab-query-form-left-panel>
|
|
|
+ <el-button
|
|
|
+ v-permissions="['base:product:add']"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ type="primary"
|
|
|
+ @click="handleEdit($event)">
|
|
|
+ 添加
|
|
|
+ </el-button>
|
|
|
+ </vab-query-form-left-panel>
|
|
|
+ <vab-query-form-right-panel>
|
|
|
+ <table-tool :check-list.sync="checkList" :columns="columns" />
|
|
|
+ </vab-query-form-right-panel>
|
|
|
+ </vab-query-form>
|
|
|
|
|
|
- <el-form-item>
|
|
|
- <el-input v-model.trim="queryForm.prodName" clearable placeholder="产品名称" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-select v-model="queryForm.prodClass" placeholder="产品类别" style="width: 100%">
|
|
|
- <el-option v-for="item in classOptions" :key="item.value" :label="item.value" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
|
|
|
- <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </vab-query-form-top-panel>
|
|
|
- </vab-query-form>
|
|
|
- <vab-query-form-left-panel>
|
|
|
- <el-button v-permissions="['base:product:add']" icon="el-icon-plus" type="primary" @click="handleEdit($event)">
|
|
|
- 添加
|
|
|
- </el-button>
|
|
|
- </vab-query-form-left-panel>
|
|
|
- <vab-query-form-right-panel>
|
|
|
- <table-tool :check-list.sync="checkList" :columns="columns" />
|
|
|
- </vab-query-form-right-panel>
|
|
|
-
|
|
|
- <el-table v-loading="listLoading" border :data="list" :height="height" @selection-change="setSelectRows">
|
|
|
- <el-table-column align="center" label="序号" show-overflow-tooltip width="80">
|
|
|
- <template #default="{ $index }">
|
|
|
- {{ $index + 1 }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- v-for="(item, index) in finallyColumns"
|
|
|
- :key="index"
|
|
|
- align="center"
|
|
|
- :label="item.label"
|
|
|
- :min-width="item.minWidth"
|
|
|
- :prop="item.prop"
|
|
|
- show-overflow-tooltip
|
|
|
- :sortable="item.sortable"
|
|
|
- :width="item.width">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-button v-if="item.prop === 'prodName'" style="font-size: 14px" type="text" @click="handleDetail(row)">
|
|
|
- {{ row.prodName }}
|
|
|
- </el-button>
|
|
|
- <span v-else-if="item.prop === 'prodClass'">
|
|
|
- {{ row.prodClass }}
|
|
|
- </span>
|
|
|
- <span v-else-if="item.prop === 'prodCode'">
|
|
|
- {{ row.prodCode }}
|
|
|
- </span>
|
|
|
- <span v-else-if="item.prop === 'agentPrice'">
|
|
|
- {{ formatPrice(row.agentPrice) }}
|
|
|
- </span>
|
|
|
- <span v-else-if="item.prop === 'distPrice'">
|
|
|
- {{ formatPrice(row.distPrice) }}
|
|
|
- </span>
|
|
|
- <span v-else-if="item.prop === 'guidPrice'">
|
|
|
- {{ formatPrice(row.guidPrice) }}
|
|
|
- </span>
|
|
|
- <span v-else-if="item.prop === 'marketPrice'">
|
|
|
- {{ formatPrice(row.marketPrice) }}
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column align="center" fixed="right" label="操作" show-overflow-tooltip width="120">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-button v-permissions="['base:product:edit']" type="text" @click="handleEdit(row)">编辑</el-button>
|
|
|
- <el-button v-permissions="['base:product:delete']" type="text" @click="handleDelete(row)">删除</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <template #empty>
|
|
|
- <el-image class="vab-data-empty" :src="require('@/assets/empty_images/data_empty.png')" />
|
|
|
- </template>
|
|
|
- </el-table>
|
|
|
- <el-pagination
|
|
|
- background
|
|
|
- :current-page="queryForm.pageNum"
|
|
|
- :layout="layout"
|
|
|
- :page-size="queryForm.pageSize"
|
|
|
- :total="total"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- @size-change="handleSizeChange" />
|
|
|
+ <el-table v-loading="listLoading" border :data="list" :height="height" @selection-change="setSelectRows">
|
|
|
+ <el-table-column align="center" label="序号" show-overflow-tooltip width="80">
|
|
|
+ <template #default="{ $index }">
|
|
|
+ {{ $index + 1 }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, index) in finallyColumns"
|
|
|
+ :key="index"
|
|
|
+ align="center"
|
|
|
+ :label="item.label"
|
|
|
+ :min-width="item.minWidth"
|
|
|
+ :prop="item.prop"
|
|
|
+ show-overflow-tooltip
|
|
|
+ :sortable="item.sortable"
|
|
|
+ :width="item.width">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button v-if="item.prop === 'prodName'" style="font-size: 14px" type="text" @click="handleDetail(row)">
|
|
|
+ {{ row.prodName }}
|
|
|
+ </el-button>
|
|
|
+ <span v-else-if="item.prop === 'prodClass'">
|
|
|
+ {{ selectDictLabel(prodClassOptions, row.prodClass) }}
|
|
|
+ </span>
|
|
|
+ <span v-else-if="item.prop === 'prodCode'">
|
|
|
+ {{ row.prodCode }}
|
|
|
+ </span>
|
|
|
+ <span v-else-if="item.prop === 'agentPrice'">
|
|
|
+ {{ formatPrice(row.agentPrice) }}
|
|
|
+ </span>
|
|
|
+ <span v-else-if="item.prop === 'distPrice'">
|
|
|
+ {{ formatPrice(row.distPrice) }}
|
|
|
+ </span>
|
|
|
+ <span v-else-if="item.prop === 'guidPrice'">
|
|
|
+ {{ formatPrice(row.guidPrice) }}
|
|
|
+ </span>
|
|
|
+ <span v-else-if="item.prop === 'marketPrice'">
|
|
|
+ {{ formatPrice(row.marketPrice) }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" fixed="right" label="操作" show-overflow-tooltip width="120">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button v-permissions="['base:product:edit']" type="text" @click="handleEdit(row)">编辑</el-button>
|
|
|
+ <el-button v-permissions="['base:product:delete']" type="text" @click="handleDelete(row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template #empty>
|
|
|
+ <el-image class="vab-data-empty" :src="require('@/assets/empty_images/data_empty.png')" />
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ :current-page="queryForm.pageNum"
|
|
|
+ :layout="layout"
|
|
|
+ :page-size="queryForm.pageSize"
|
|
|
+ :total="total"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ @size-change="handleSizeChange" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<edit ref="edit" @fetch-data="fetchData" />
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -110,7 +130,9 @@
|
|
|
queryForm: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
- userName: '',
|
|
|
+ prodCode: '',
|
|
|
+ prodClass: '',
|
|
|
+ prodName: '',
|
|
|
},
|
|
|
checkList: [],
|
|
|
columns: [
|
|
|
@@ -161,7 +183,11 @@
|
|
|
sortable: false,
|
|
|
},
|
|
|
],
|
|
|
- classOptions: [], //产品分类
|
|
|
+ defaultProps: {
|
|
|
+ key: 'key',
|
|
|
+ label: 'value',
|
|
|
+ },
|
|
|
+ prodClassOptions: [], //产品分类
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -177,6 +203,11 @@
|
|
|
this.fetchData()
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 节点单击事件
|
|
|
+ handleNodeClick(data) {
|
|
|
+ this.queryForm.prodClass = data.key
|
|
|
+ this.fetchData()
|
|
|
+ },
|
|
|
setSelectRows(val) {
|
|
|
this.selectRows = val
|
|
|
},
|
|
|
@@ -190,9 +221,9 @@
|
|
|
}
|
|
|
},
|
|
|
getOptions() {
|
|
|
- Promise.all([this.getDicts('product_type')])
|
|
|
+ Promise.all([this.getDicts('base_product_class')])
|
|
|
.then(([productType]) => {
|
|
|
- this.classOptions = productType.data.values || []
|
|
|
+ this.prodClassOptions = productType.data.values || []
|
|
|
})
|
|
|
.catch((err) => console.log(err))
|
|
|
},
|