Skip to content

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

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

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