caoliancun/PointsMall_Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

第一次上传

Browse Source
This commit is contained in:
dt_2916866708
2024-01-11 09:33:24 +08:00
commit b59bab8e90
822 changed files with 105065 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/Category/edit.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<div>
<el-form ref="editPram" :model="editPram" label-width="130px">
<el-form-item
label="分类名称"
prop="name"
:rules="[{ required:true,message:'请输入分类名称',trigger:['blur','change'] }]"
>
<el-input v-model="editPram.name" placeholder="分类名称" />
</el-form-item>
<!-- <el-form-item label="URL">
<el-input v-model="editPram.url" placeholder="URL" />
</el-form-item> -->
<el-form-item label="父级" >
<el-cascader v-model="editPram.pid" :options="parentOptions" :props="categoryProps" style="width:100%" />
</el-form-item>
<!-- <el-form-item label="菜单图标" >
<el-input placeholder="请选择菜单图标" v-model="editPram.extra">
<el-button slot="append" icon="el-icon-circle-plus-outline" @click="addIcon"></el-button>
</el-input>
</el-form-item> -->
<!-- <el-form-item label="分类图标(180*180)">
<div class="upLoadPicBox" @click="modalPicTap('1')">
<div v-if="editPram.extra" class="pictrue">
<img :src="editPram.extra">
</div>
<div v-else class="upLoad">
<i class="el-icon-camera cameraIconfont" />
</div>
</div>
</el-form-item> -->
<el-form-item label="排序">
<el-input-number v-model="editPram.sort" :min="0"/>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="editPram.status" active-text="显示"
inactive-text="隐藏" :active-value="true" :inactive-value="false" />
</el-form-item>
<!-- <el-form-item label="扩展字段" >
<el-input v-model="editPram.extra" type="textarea" placeholder="扩展字段" />
</el-form-item> -->
<el-form-item>
<el-button type="primary" :loading="loadingBtn" @click="handlerSubmit('editPram')">确定</el-button>
<el-button @click="close">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<!--创建和编辑公用一个组件-->
<script>
export default {
// name: "edit"
props: { },
data() {
return {
loadingBtn: false,
constants: [],
editPram: {
extra: null,
name: null,
pid: null,
sort: 0,
status: true,
type: 1,
url: null,
id: 0
},
categoryProps: {
value: 'id',
label: 'name',
children: 'child',
expandTrigger: 'hover',
checkStrictly: true,
emitPath: false
},
parentOptions: []
}
},
mounted() {
// this.initEditData()
},
methods: {
// 点击图标
addIcon() {},
// 点击商品图
modalPicTap (tit, num, i) {
},
close() {
},
initEditData() {
},
addTreeListLabelForCasCard(arr, child) {
},
handlerSubmit(formName) {
},
handlerSaveOrUpdate(isSave) {
}
}
}
</script>
<style scoped>
</style>

89
src/components/Category/info.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<div>
<el-tree :data="ddd" :props="defaultProps" @node-click="handleNodeClick" />
</div>
</template>
<script>
// import * as categoryApi from '@/api/categoryApi.js'
export default {
// name: "info"
props: {
id: {
type: Number,
required: true
}
},
data() {
return {
defaultProps: {
children: 'children',
label: 'label'
},
ddd: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
dataList: {// 数据结果
page: 0,
limit: 0,
totalPage: 0,
total: 0,
list: []
}
}
},
mounted() {
// this.handlerGetTreeList(this.id)
},
methods: {
handlerGetTreeList(id) {
if (!id) {
this.$message.error('当前数据id不正确')
return
}
categoryApi.treeCategroy({ pid: id }).then(data => {
this.dataList = data
})
},
handleNodeClick(data) {
console.log('data:', data)
}
}
}
</script>
<style scoped>
</style>

326
src/components/Category/list.vue Normal file
View File

@@ -0,0 +1,326 @@
<template>
<div>
<template v-if="selectModel">
<el-tree
ref="tree"
:data="treeList"
show-checkbox
node-key="id"
@check="getCurrentNode"
:default-checked-keys="selectModelKeysNew"
:props="treeProps">
</el-tree>
</template>
<template v-else>
<div class="divBox">
<el-card class="box-card">
<div slot="header" class="clearfix">
<div class="container">
<el-form inline size="small">
<el-form-item label="状态：">
<el-select placeholder="状态" class="selWidth" @change="handlerGetList">
<el-option label="全部" :value="-1"></el-option>
<el-option label="显示" :value="1"></el-option>
<el-option label="不显示" :value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="名称：">
<el-input placeholder="请输入名称" class="selWidth" size="small" clearable>
<el-button slot="append" icon="el-icon-search" @click="handlerGetList" size="small"/>
</el-input>
</el-form-item>
</el-form>
</div>
<el-button size="mini" type="primary" @click="handleAddMenu({id:0,name:'顶层目录'})" v-hasPermi="['admin:category:save']" >新增{{ biztype.name }}</el-button>
</div>
<el-table
ref="treeList"
:data="treeList"
size="mini"
class="table"
highlight-current-row
row-key="id"
:tree-props="{children: 'child', hasChildren: 'hasChildren'}"
>
<el-table-column prop="name" label="名称" min-width="240">
<template slot-scope="scope">
{{ scope.row.name }} | {{ scope.row.id }}
</template>
</el-table-column>
<template v-if="!selectModel">
<el-table-column label="类型" min-width="150">
<template slot-scope="scope">
<span>{{ scope.row.type | filterCategroyType | filterEmpty }}</span>
</template>
</el-table-column>
<el-table-column label="分类图标" min-width="80">
<template slot-scope="scope">
<div class="listPic" v-if=" biztype.value === 5 ">
<i :class="'el-icon-' + scope.row.extra" style="font-size: 20px;" />
</div>
<div class="demo-image__preview" v-else>
<el-image
style="width: 36px; height: 36px"
:src="scope.row.extra"
:preview-src-list="[scope.row.extra]"
v-if="scope.row.extra"
/>
<img style="width: 36px; height: 36px" v-else :src="defaultImg" alt="">
</div>
</template>
</el-table-column>
<el-table-column label="Url" min-width="250" v-if="biztype.value === 5" key="2">
<template slot-scope="scope">
<span>{{ scope.row.url }}</span>
</template>
</el-table-column>
<el-table-column label="排序" prop="sort" min-width="150" />
<el-table-column
label="状态"
min-width="150"
>
<!-- -->
<template slot-scope="scope" >
<el-switch
v-model="scope.row.status"
:active-value="true"
:inactive-value="false"
active-text="显示"
inactive-text="隐藏"
@change="onchangeIsShow(scope.row)"
/>
</template>
</el-table-column>
<el-table-column label="操作" min-width="200" fixed="right">
<template slot-scope="scope">
<el-button
v-if="(biztype.value === 1 && scope.row.pid === 0) || biztype.value === 5"
type="text"
size="small"
@click="handleAddMenu(scope.row)"
>添加子目录</el-button>
<el-button type="text" size="small" @click="handleEditMenu(scope.row)" v-hasPermi="['admin:category:info']">编辑</el-button>
<el-button type="text" size="small" @click="handleDelMenu(scope.row)" v-hasPermi="['admin:category:delete']">删除</el-button>
</template>
</el-table-column>
</template>
</el-table>
</el-card>
</div>
</template>
<el-dialog
title="编辑"
:visible.sync="editDialogConfig.visible"
destroy-on-close
:close-on-click-modal="false"
>
<edit
:prent="editDialogConfig.prent"
:is-create="editDialogConfig.isCreate"
:edit-data="editDialogConfig.data"
:biztype="editDialogConfig.biztype"
:all-tree-list="treeList"
@hideEditDialog="hideEditDialog"
/>
</el-dialog>
</div>
</template>
<script>
// import * as categoryApi from '@/api/categoryApi.js'
import info from './info'
import edit from './edit'
// import * as selfUtil from '@/utils/ZBKJIutil.js'
export default {
// name: "list"
components: { info, edit },
props: {
biztype: { // 类型，1 产品分类，2 附件分类，3 文章分类， 4 设置分类， 5 菜单分类
type: Object,
default: { value: -1 },
validator: (obj) => {
return obj.value > 0
}
},
pid: {
type: Number,
default: 0,
validator: (value) => {
return value >= 0
}
},
selectModel: { // 是否选择模式
type: Boolean,
default: false
},
selectModelKeys: {
type: Array
},
rowSelect: {}
},
data() {
return {
selectModelKeysNew: this.selectModelKeys,
loading: false,
constants: this.$constants,
treeProps: {
label: 'name',
children: 'child',
// expandTrigger: 'hover',
// checkStrictly: false,
// emitPath: false
},
// treeCheckedKeys:[],// 选择模式下的属性结构默认选中
multipleSelection: [],
editDialogConfig: {
visible: false,
isCreate: 0, // 0=创建，1=编辑
prent: {}, // 父级对象
data: {},
biztype: this.biztype // 统一主业务中的目录类型
},
dataList: [],
treeList: [],
listPram: {
pid: this.pid,
type: this.biztype.value,
status: -1,
name: '',
page: this.$constants.page.page,
limit: this.$constants.page.limit[0]
},
viewInfoConfig: {
data: null,
visible: false
},
defaultImg:''
}
},
mounted() {
/* if(this.biztype.value === 3){
this.listPram.pageSize = constants.page.pageSize[4]
this.handlerGetList()
}else{*/
// this.handlerGetTreeList()
// }
},
methods: {
onchangeIsShow(row){
categoryApi.categroyUpdateStatus( row.id ).then(() => {
this.$message.success('修改成功')
this.handlerGetTreeList()
}).catch(()=>{
row.status = !row.status
})
},
handleEditMenu(rowData) {
this.editDialogConfig.isCreate = 1
this.editDialogConfig.data = rowData
this.editDialogConfig.prent = rowData
this.editDialogConfig.visible = true
},
handleAddMenu(rowData) {
this.editDialogConfig.isCreate = 0
this.editDialogConfig.prent = rowData
this.editDialogConfig.data = {}
this.editDialogConfig.biztype = this.biztype
this.editDialogConfig.visible = true
},
getCurrentNode(data) {
let node = this.$refs.tree.getNode(data);
this.childNodes(node);
// this.parentNodes(node);
//是否编辑的表示
// this.ruleForm.isEditorFlag = true;
//编辑时候使用
this.$emit('rulesSelect', this.$refs.tree.getCheckedKeys());
// this.selectModelKeys = this.$refs.tree.getCheckedKeys();
//无论编辑和新增点击了就传到后台这个值
// this.$emit('rulesSelect', this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()));
// this.ruleForm.menuIdsisEditor = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
},
//具体方法可以看element官网api
childNodes(node){
let len = node.childNodes.length;
for(let i = 0; i < len; i++){
node.childNodes[i].checked = node.checked;
this.childNodes(node.childNodes[i]);
}
},
parentNodes(node){
if(node.parent){
for(let key in node){
if(key == "parent"){
node[key].checked = true;
this.parentNodes(node[key]);
}
}
}
},
handleDelMenu(rowData) {
this.$confirm('确定删除当前数据?').then(() => {
categoryApi.deleteCategroy(rowData).then(data => {
this.handlerGetTreeList()
this.$message.success('删除成功')
})
})
},
handlerGetList() {
this.handlerGetTreeList();
// categoryApi.listCategroy({status:this.listPram.status, type: 1 }).then(data => {
// this.treeList = data.list
// })
},
handlerGetTreeList() {
// this.biztype.value === 5 && !this.selectModel) ? -1 : 1
// const _pram = { type: this.biztype.value, status: !this.selectModel ? -1 : (this.biztype.value === 5 ? -1 : 1) }
const _pram = { type: this.biztype.value, status: 0, name: this.listPram.name }
this.loading = true
this.biztype.value!==3 ? categoryApi.treeCategroy(_pram).then(data => {
this.treeList = this.handleAddArrt(data)
this.loading = false
}).catch(()=>{
this.loading = false
}) : categoryApi.listCategroy({ type: 3, status: 0, pid: this.listPram.pid, name: this.listPram.name}).then(data => {
this.treeList = data.list
})
},
handlerGetInfo(id) {
this.viewInfoConfig.data = id
this.viewInfoConfig.visible = true
},
handleNodeClick(data) {
console.log('data:', data)
},
handleAddArrt(treeData) {
// const _result = selfUtil.addTreeListLabel(treeData)
// return _result
},
hideEditDialog() {
setTimeout(() => {
this.editDialogConfig.prent = {}
this.editDialogConfig.type = 0
this.editDialogConfig.visible = false
this.handlerGetTreeList()
}, 200)
},
handleSelectionChange(d1, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {
// this.multipleSelection = checkedKeys.concat(halfCheckedKeys)
this.multipleSelection = checkedKeys
this.$emit('rulesSelect', this.multipleSelection)
},
}
}
</script>
<style scoped>
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
</style>