Skip to content

A
admin-base
Commit a23277cf authored by 赵茹林's avatar 赵茹林
Browse files
Options

标签页新组件重构，新增、修改功能

parent bad69fd1
Show whitespace changes
Inline Side-by-side
Showing with 176 additions and 167 deletions
src/components/system/tag.vue
View file @ a23277cf
......@@ -13,43 +13,48 @@
<div class="search-btn-wrapper">
<el-button @click="onSearch" type="primary" plain>搜索</el-button>
<el-button @click="onSearch" type="warning" plain>高级搜索</el-button>
<el-button v-if="!$store.state.readonly" @click="onAdd" type="success" plain>新增标签</el-button>
<!--<el-button v-if="!$store.state.readonly" @click="onAdd" type="success" plain>新增标签</el-button>-->
</div>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="一级标签"></el-table-column>
<el-table-column prop="mobile" label="二级标签"></el-table-column>
<el-table-column prop="in_at" label="三级标签"></el-table-column>
<el-table-column prop="in_at" label="四级标签"></el-table-column>
<el-table-column prop="in_at" label="标签备注"></el-table-column>
<el-table-column label="操作" v-if="!$store.state.readonly">
<template slot-scope="scope">
<el-button size="mini" plain type="primary" @click="onEdit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
<div class="tag-tree">
<el-tree
:data="tableData"
node-key="id"
:props="tagProps"
:indent="40"
@node-expand="tagExpand"
@node-collapse="tagCollapse"
:default-expanded-keys="tagExpanded"
:expand-on-click-node="false">
<div class="custom-tree-node" slot-scope="{ node, data }">
<el-tag class="tag-tree-item" effect="plain" size="medium">{{node.label}}</el-tag>
<div style="display: flex">
<el-link type="success" size="mini" plain @click.stop="onAdd(node)">新增子标签 ({{node.level}}级)</el-link>
<el-link v-if="node.level != 1" type="warning" size="mini" plain @click.stop="onEdit(node, data, el)">编辑</el-link>
</div>
</div>
</el-tree>
</div>
<el-dialog :title="dialog.title" :visible.sync="dialog.show" width="500px">
<el-form ref="dialogForm" :rules="dialog.form.rules" :model="dialog.form" label-width="100px">
<el-form-item label="一级标签：" prop="name">
<el-input v-model="dialog.form.name" maxlength="10" type="text"></el-input>
<el-form-item label="ID：" prop="id" style="display: none;">
<el-input v-model="dialog.form.id" maxlength="10" type="text"></el-input>
</el-form-item>
<el-form-item label="二级标签：" prop="mobile">
<el-input v-model="dialog.form.mobile" maxlength="10" type="text"></el-input>
<el-form-item label="PID：" prop="pid" style="display: none;">
<el-input v-model="dialog.form.pid" maxlength="10" type="text"></el-input>
</el-form-item>
<el-form-item label="三级标签：" prop="id_card">
<el-input v-model="dialog.form.id_card" maxlength="10" type="text"></el-input>
<el-form-item label="标签名称：" prop="name">
<el-input v-model="dialog.form.name" maxlength="10" type="text"></el-input>
</el-form-item>
<el-form-item label="标签备注：" prop="in_at">
<el-input v-model="dialog.form.in_at" maxlength="50" type="textarea" :rows="3"></el-input>
<el-form-item label="标签备注：" prop="cover">
<el-input v-model="dialog.form.cover" maxlength="50" type="textarea" :rows="3"></el-input>
</el-form-item>
</el-form>
......@@ -62,10 +67,9 @@
</template>
<script>
import {getStaffListApi, postStaffListApi, putStaffListApi} from "../../service/api";
import page from '../framework/page'
import {getTagApi, postTagApi, putTagApi} from "../../service/api";
let sid = 0;
let sid = 0, id = 1000;
export default {
name: "index",
......@@ -287,6 +291,14 @@
}
},
tagProps: {
children: 'children',
label: 'name'
},
tagExpanded: [0],
tagExpandedWait: '',
searchFrom: {
id: '',
name: '',
......@@ -304,50 +316,22 @@
show: false,
form: {
id: '',
pid: '',
name: '',
mobile: '',
id_card: '',
type: '',
in_at: '',
over_at: '',
cover: '',
rules: {
name: [{required: true, message: '请输入', trigger: 'blur'}],
mobile: [{required: true, message: '请输入', trigger: 'blur'}],
id_card: [{required: true, message: '请输入', trigger: 'blur'}],
type: [{required: true, message: '请选择', trigger: 'change'}],
in_at: [{required: true, message: '请选择', trigger: 'change'}],
},
}
},
type: [{
value: 1,
label: '销售'
}],
dialogDetail: {
show: false,
id: ''
},
userList: [],
total: 0,
nowPage: 1,
limit: 10,
showDetail: false,
showId: '',
dialogObj: {
show: false,
title: '绑定老师',
id: 0,
teacher_id: 0
},
dialogDetailObj: {
show: false,
id: ''
},
loading: false
}
},
components: { page },
//components: { page },
mounted() {
this.getData()
},
......@@ -359,46 +343,35 @@
this.dialogReset();
}
},
dialogReset() {
/*this.dialog.title = '';
this.dialog.form.id = '';
this.dialog.form.name = '';
this.dialog.form.mobile = '';
this.dialog.form.id_card = '';
this.dialog.form.type = '';
this.dialog.form.in_at = '';*/
dialogReset(callback) {
this.$nextTick(()=>{
this.$refs['dialogForm'].resetFields();
//this.$nextTick(()=>{
callback && callback();
//})
//this.dialog.form.id = '';
//this.dialog.form.pid = '';
})
},
dialogSave() {
this.$refs['dialogForm'].validate((valid) => {
if (valid) {
var json = {
pid: this.dialog.form.pid,
name: this.dialog.form.name,
mobile: this.dialog.form.mobile,
id_card: this.dialog.form.id_card,
type: this.dialog.form.type,
in_at: this.dialog.form.in_at
};
this.dialog.form.cover ? json.cover = this.dialog.form.cover : '';
if (this.dialog.form.id) { // 编辑
json.id = this.dialog.form.id;
// 离职
if (this.dialog.form.over_at) {
json.over_at = this.dialog.form.over_at;
json.status = 1;
} else {
json.over_at = '0000-00-00';
json.status = 0
}
putStaffListApi(json).then(res => {
json.category_id = this.dialog.form.id;
putTagApi(json).then(res => {
this.$message({ type: 'success', message: '编辑成功!' });
this.dialogToggle();
this.getData();
})
} else {
postStaffListApi(json).then(res => {
this.$message({ type: 'success', message: '添加成功!' });
} else { // 新增
postTagApi(json).then(res => {
this.$message({ type: 'success', message: '新增成功!' });
this.tagExpanded.push(this.tagExpandedWait); // 新增时自动展开
this.dialogToggle();
this.getData();
})
......@@ -410,107 +383,131 @@
});
},
tagExpand(data, node, el) {
console.log(node)
if (node.expanded) {
this.tagExpanded.push(node.data.id)
}
},
tagCollapse(data, node, el) {
console.log(node)
if (node.expanded) {
this.tagExpanded.splice(this.tagExpanded.findIndex(item => item == node.data.id), 1)
}
},
/*append(data) {
console.log(data)
const newChild = { id: id++, label: 'testtest', children: [] };
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
},
remove(node, data) {
console.log(node)
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},*/
getData() {
let json = {
limit: this.limit,
page: this.nowPage
};
this.searchFrom.id?json.id = this.searchFrom.id:'';
this.searchFrom.name?json.name = this.searchFrom.name:'';
this.searchFrom.mobile?json.mobile = this.searchFrom.mobile:'';
this.searchFrom.id_card?json.id_card = this.searchFrom.id_card:'';
this.searchFrom.type?json.type = this.searchFrom.type:'';
this.searchFrom.status?json.status = this.searchFrom.status:'';
getStaffListApi(json).then(res => {
this.tableData = res.list;
this.total = res.total
/*function addLable(data) {
data.forEach(val => {
val.label = val.name;
if (val.children && val.children.length) {
addLable(val.children)
}
})
};*/
getTagApi().then(res => {
this.tableData = [{
children: res,
cover: '',
created_at: '',
id: 0,
label: '所有标签',
name: '所有标签',
pid: 0,
weight: 0,
}]
});
},
onAdd() {
this.dialog.title = '新增标签';
onAdd(node) {
this.dialog.title = `新增 ${node.level}级 标签`;
this.dialog.form.id = '';
this.tagExpandedWait = node.data.id; // 新增时自动展开
this.dialogToggle();
this.$nextTick(()=>{
this.dialogReset();
this.dialogReset(() => {
this.dialog.form.pid = node.data.id; // 注意id
});
});
},
onEdit(item) {
onEdit(node,data,el) {
console.log(el)
console.log(node)
console.log(data)
let item = node.data;
this.dialogToggle();
this.dialogReset();
this.$nextTick(()=>{
this.dialog.title = '编辑员工';
this.dialog.title = '编辑标签';
this.dialog.form.id = item.id;
this.dialog.form.pid = item.pid;
this.dialog.form.name = item.name;
this.dialog.form.mobile = item.mobile;
this.dialog.form.id_card = item.id_card;
this.dialog.form.type = item.type;
this.dialog.form.in_at = item.in_at;
if (item.status == 1) { // 离职
this.dialog.form.over_at = item.over_at;
} else {
this.dialog.form.over_at = ''
}
this.dialog.form.cover = item.cover;
});
},
onSearch(){
this.getData();
},
onPageChange(val) {
this.nowPage = val
this.getData()
},
onSizeChange(val) {
this.limit = val;
this.nowPage = 1;
this.getData()
},
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
<style lang="less">
.el-form {
.el-form-item:last-child {
margin-bottom: 0;
.tag-tree {
padding: 8px 0;
background-color: #fff;
.custom-tree-node {
display: flex;
.tag-tree-item {
margin-right: 10px;
}
}
.avatar {
width: 50px;
margin-right: 5px;
border-radius: 50%;
height: 50px;
//
.el-tree-node {
padding: 2px 0;
.el-tree-node__content {
padding: 6px 0;
}
}
.user {
height: 100%;
overflow: auto;
padding: 20px 0;
// 取消第一级折叠
& > .el-tree > .el-tree-node > .el-tree-node__content > .el-tree-node__expand-icon {
pointer-events: none;
/*opacity: 0;*/
}
.btn-content {
text-align: center;
.el-link {
font-size: 12px;
&:hover:after {
bottom: 2px;
}
& + .el-link {
margin-left: 10px;
}
.flexRow {
display: flex;
flex-flow: row;
justify-content: flex-start;
align-items: center;
}
</style>
<style>
.f-c > div {
display: flex !important;
flex-flow: row;
justify-content: flex-start;
align-items: center;
}
</style>
src/service/api.js
View file @ a23277cf
......@@ -1325,6 +1325,18 @@ export const putSourceStudentApi = function (type,json) {
return Vue.prototype.$put(`${_baseUrl}api/admin/source/student/edit/${type}`,json)
};
// /api/admin/source/student/list
// 获取标签
export const getTagApi = function (json) {
return Vue.prototype.$fetch(`${_baseUrl}api/admin/category/list/3`, json)
};
// 新增标签
export const postTagApi = function (json) {
return Vue.prototype.$post(`${_baseUrl}api/admin/category/add/3`, json)
};
// 编辑标签
export const putTagApi = function (json) {
return Vue.prototype.$put(`${_baseUrl}api/admin/category/${json.category_id}`, json)
};
// 获取员工列表
export const getStaffListApi = function (json) {
return Vue.prototype.$fetch(`${_baseUrl}api/admin/staff/list`, json)
......@@ -1345,13 +1357,13 @@ export const getStaffRecordApi = function (json) {
export const getTeacherTypeListApi = function (json) {
return Vue.prototype.$fetch(`${_baseUrl}api/admin/teacher/type/list`, json)
};
export const postTeacherTypeListApi = function (json) {
export const postTeacherTypeListApi = function (json) {
return Vue.prototype.$post(`${_baseUrl}api/admin/teacher/type/add`, json)
};
export const putTeacherTypeListApi = function (json) {
};
export const putTeacherTypeListApi = function (json) {
return Vue.prototype.$put(`${_baseUrl}api/admin/teacher/type/edit/${json.type}`, json)
};
export const postMediaConvertApi = function (json) {
};
export const postMediaConvertApi = function (json) {
return Vue.prototype.$post(`${_baseUrl}api/public/media/convert`, json)
};
///api/public/media/convert
\ No newline at end of file
};
///api/public/media/convert
src/util/menuList.js
View file @ a23277cf
......@@ -630,7 +630,7 @@ export default [{
component: e => require(['@/components/system/staffRecord'], e),
}
},
/*{
{
value: '标签管理',
routerName: 'tag',
path: '/tag',
......@@ -640,7 +640,7 @@ export default [{
name: 'tag',
component: e => require(['@/components/system/tag'], e),
}
},*/
},
{
value: '员工管理',
routerName: 'staff',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment