huoran
/
FE_middlePlatform_server
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

新增编辑产品展示表，数据架构及数据简介还原成一次加载所有数据分类（懒加载问题很多）

Browse Source
dev
Jo 3 years ago
parent 0748a8ba1e
commit 0d8e6c5ca9
3 changed files with 82 additions and 69 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 77
      src/views/data/Framework.vue
  2. 56
      src/views/data/Introduce.vue
  3. 18
      src/views/data/Product.vue

77
src/views/data/Framework.vue
Unescape View File

@ -5,7 +5,7 @@
<div class="plus"> <div class="plus">
<i class="el-icon-circle-plus-outline" @click.stop="addType(0)"></i> <i class="el-icon-circle-plus-outline" @click.stop="addType(0)"></i>
</div> </div>
<el-tree ref="type" :load="getType" lazy node-key="id" accordion :default-expanded-keys="defaultActive" :current-node-key="categoryId" :props="defaultProps" :highlight-current="true" @current-change="typeClick"> <el-tree ref="type" :data="typeList" node-key="id" accordion :default-expanded-keys="defaultActive" :current-node-key="categoryId" :props="defaultProps" :highlight-current="true" @current-change="typeClick">
<span class="custom-tree-node" slot-scope="{ node, data }"> <span class="custom-tree-node" slot-scope="{ node, data }">
<span :title="node.label">{{ node.label }}</span> <span :title="node.label">{{ node.label }}</span>
<span class="actions"> <span class="actions">
@ -77,7 +77,7 @@
:default-checked-keys="defaultTypeChecked" :default-checked-keys="defaultTypeChecked"
:current-node-key="curId" :current-node-key="curId"
show-checkbox show-checkbox
:props="defaultPropsImport" :props="defaultProps"
highlight-current highlight-current
@node-click="importTypeClick" @node-click="importTypeClick"
@node-expand="importTypeExpand" @node-expand="importTypeExpand"
@ -156,11 +156,8 @@
export default { export default {
data() { data() {
return { return {
typeList: [],
defaultProps: { defaultProps: {
children: 'children',
label: 'categoryName'
},
defaultPropsImport: {
children: 'children', children: 'children',
label: 'label' label: 'label'
}, },
@ -215,20 +212,37 @@ export default {
},500) },500)
} }
}, },
mounted(){}, mounted(){
this.getType()
},
methods: { methods: {
getType(node, resolve){ getType(){
this.$post(`${this.api.getLevel}?parentId=${node.level ? node.data.id : 0}`).then(res => { this.$post(this.api.getTableByClassification).then(res => {
const list = res.list // 递归赋值,同时添加层级标识
this.node = node function handleId(data,level = 0){
this.resolve = resolve data.map(n => {
resolve(list) n.id = String(n.id)
// 取第一个分类的id n.label = n.categoryName
if (!this.added && list.length) { n.level = level + 1
this.categoryId = list[0].id if(n.children.length){
this.defaultActive = [list[0].id] handleId(n.children,n.level)
}
})
}
handleId(res)
this.typeList = res
if (!this.added) {
if(res[0].children.length){
this.categoryId = res[0].children[0].id
this.defaultActive = [res[0].children[0].id]
}else{
this.categoryId = res[0].id
this.defaultActive = [res[0].id]
}
// 取第一个分类的id
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.type.setCurrentKey(list[0].id) this.$refs.type.setCurrentKey(res[0].children[0].id)
}) })
} }
this.added = false this.added = false
@ -262,20 +276,14 @@ export default {
this.getData() this.getData()
}, },
addType(row){ addType(row){
if (row) { if (row) this.defaultActive = [row.data.id]
this.categoryId = row.data.id
this.defaultActive = [row.data.id]
}
this.typeVisible = true this.typeVisible = true
this.levelId = row ? row.data.id : 0 this.levelId = row ? row.data.id : 0
}, },
editType(row){ editType(row){
this.typeVisible = true this.typeVisible = true
this.id = row.data.id this.id = row.data.id
this.categoryName = row.data.categoryName this.categoryName = row.data.categoryName
this.curNode = row
this.categoryId = row.data.id
}, },
delType(row){ delType(row){
// 该分类下的数据表已存在于产品管理中，是否确认删除？ // 该分类下的数据表已存在于产品管理中，是否确认删除？
@ -285,7 +293,7 @@ export default {
this.added = true this.added = true
this.$post(`${this.api.deleteCategory}?categoryId=${row.data.id}`).then(res => { this.$post(`${this.api.deleteCategory}?categoryId=${row.data.id}`).then(res => {
this.$message.success('删除成功') this.$message.success('删除成功')
this.$refs.type.remove(row) this.getType()
}).catch(res => {}) }).catch(res => {})
}).catch(() => {}) }).catch(() => {})
}, },
@ -299,9 +307,7 @@ export default {
categoryName: this.categoryName categoryName: this.categoryName
}).then(res => { }).then(res => {
this.$message.success('编辑成功') this.$message.success('编辑成功')
this.curNode.data.categoryName = this.categoryName this.getType()
this.$refs.type.updateKeyChildren(this.id, this.curNode)
this.getType(this.node, this.resolve)
this.typeVisible = false this.typeVisible = false
setTimeout(() => { setTimeout(() => {
this.submited = false this.submited = false
@ -315,18 +321,7 @@ export default {
categoryName: this.categoryName categoryName: this.categoryName
}).then(res => { }).then(res => {
this.$message.success('添加成功') this.$message.success('添加成功')
this.getType(this.node, this.resolve) this.getType()
if (this.levelId) {
let node = this.$refs.type.getNode(this.categoryId)
node.loaded = false
node.expand()
} else {
// this.categoryId = ''
// this.defaultProps = []
// this.$refs.type.setCurrentNode(0)
// this.getType(0, this.resolve)
location.reload()
}
this.typeVisible = false this.typeVisible = false
setTimeout(() => { setTimeout(() => {
this.submited = false this.submited = false

56
src/views/data/Introduce.vue
Unescape View File

@ -2,7 +2,7 @@
<div> <div>
<el-container> <el-container>
<el-aside width="350px"> <el-aside width="350px">
<el-tree ref="type" :load="getData" lazy node-key="id" accordion :default-expanded-keys="defaultActive" :current-node-key="categoryId" :props="defaultProps" :highlight-current="true" @current-change="typeClick"></el-tree> <el-tree ref="type" :data="typeList" node-key="id" accordion :default-expanded-keys="defaultActive" :current-node-key="categoryId" :props="defaultProps" highlight-current @node-click="typeClick"></el-tree>
</el-aside> </el-aside>
<el-main style="padding-top: 0"> <el-main style="padding-top: 0">
@ -56,9 +56,10 @@
export default { export default {
data() { data() {
return { return {
typeList: [],
defaultProps: { defaultProps: {
children: 'children', children: 'children',
label: 'categoryName' label: 'label'
}, },
defaultActive: [], defaultActive: [],
editing: false, editing: false,
@ -68,10 +69,7 @@ export default {
introduceText: '', introduceText: '',
categoryId: '', categoryId: '',
keywordList: [], keywordList: [],
newKeyword: '', newKeyword: ''
node: [],
resolve: null,
curNode: {}
}; };
}, },
watch: { watch: {
@ -82,22 +80,42 @@ export default {
},500) },500)
} }
}, },
mounted(){}, mounted(){
this.getData()
},
methods: { methods: {
getData(node, resolve){ getData(){
// 获取分类 // 获取分类
this.$post(`${this.api.getLevel}?parentId=${node.level ? node.data.id : 0}`).then(res => { this.$post(this.api.getTableByClassification).then(res => {
const list = res.list // 递归处理id和label
this.node = node function handleId(data){
this.resolve = resolve data.map(n => {
resolve(list) n.id = String(n.id)
n.label = n.categoryName
if(n.children.length){
handleId(n.children)
}
})
}
handleId(res)
this.typeList = res
// 取首个的id和简介 // 取首个的id和简介
if (!this.edited && list.length) { if (!this.edited) {
this.categoryId = list[0].id if(res[0].children.length){
this.dataSource = list[0].dataSource let item = res[0].children[0]
this.defaultActive = [list[0].id] this.categoryId = item.id
this.introduceText = list[0].introduce this.dataSource = res[0].children[0].dataSource
this.introduce = list[0].introduce this.defaultActive = [item.id]
this.introduceText = item.introduce
this.introduce = item.introduce
}else{
this.categoryId = res[0].id
this.dataSource = res[0].dataSource
this.defaultActive = [res[0].id]
this.introduceText = res[0].introduce
this.introduce = res[0].introduce
}
} }
this.getKeyword() this.getKeyword()
}).catch(res => {}) }).catch(res => {})

18
src/views/data/Product.vue
Unescape View File

@ -276,7 +276,7 @@ export default {
}).catch(res => {}) }).catch(res => {})
}, },
// 获取分类 // 获取分类
getType(){ getType(queryDetail){
this.productVisible = true this.productVisible = true
this.$post(this.api.getTableByClassification).then(res => { this.$post(this.api.getTableByClassification).then(res => {
const that = this const that = this
@ -310,6 +310,7 @@ export default {
setTimeout(() => { setTimeout(() => {
this.typeList = res this.typeList = res
queryDetail && this.getDetail()
},500) },500)
this.importVisible = true this.importVisible = true
}).catch(res => {}) }).catch(res => {})
@ -380,8 +381,8 @@ export default {
const data = res.product const data = res.product
this.productName = data.productName this.productName = data.productName
this.market = data.market this.market = data.market
this.checkedIds = this.handleType(data.tableId.split(','),this.typeList) this.checkedIds = data.tableId.split(',')
this.$refs.type.setCheckedNodes(this.checkedIds) this.$refs.type.setCheckedKeys(this.checkedIds)
}).catch(res => {}) }).catch(res => {})
}, },
add(){ add(){
@ -390,12 +391,11 @@ export default {
this.checkedIds = [] this.checkedIds = []
}, },
edit(row){ edit(row){
this.getType() this.getType(true)
this.id = row.id this.id = row.id
this.userId = row.userId this.userId = row.userId
this.getDetail()
}, },
switchOff(val,row,index) { switchOff(val,row) {
this.$post(this.api.updateProduct,{ this.$post(this.api.updateProduct,{
id: row.id, id: row.id,
productName: row.productName, productName: row.productName,
@ -413,10 +413,9 @@ export default {
}).catch(err => {}) }).catch(err => {})
}, },
preview(row){ preview(row){
this.getType() this.getType(true)
this.isDetail = true this.isDetail = true
this.id = row.id this.id = row.id
this.getDetail()
}, },
handleDelete(row) { handleDelete(row) {
this.$confirm('确定要删除吗？', '提示', { this.$confirm('确定要删除吗？', '提示', {
@ -608,8 +607,9 @@ export default {
confirmConfig(){ confirmConfig(){
const list = this.$refs.typeConfig.getCheckedNodes().map(e => e.originId) // 获取选中的id const list = this.$refs.typeConfig.getCheckedNodes().map(e => e.originId) // 获取选中的id
this.getIds(list).then(() => { this.getIds(list).then(() => {
this.$refs.type.setCheckedKeys(this.checkedIds)
this.configVisible = false this.configVisible = false
this.$refs.type.setCheckedKeys(this.checkedIds)
}) })
} }
} }

Write Preview
Loading…
Cancel
Save