<template> <div class="admin-refresh" v-loading="loading"> <div class="section-search search-single"> <el-form label-width="80px" inline> <el-form-item> <el-input placeholder="输入标签名搜索" v-model="filterText"></el-input> </el-form-item> <el-form-item> <div class="search-btn-wrapper"> <!--<el-button @click="onSearch" type="primary" plain>搜索</el-button>--> <el-button @click="dialogUser.show = !dialogUser.show;" type="warning" plain>高级搜索</el-button> <!--<el-button v-if="!$store.state.readonly" @click="onAdd" type="success" plain>新增标签</el-button>--> </div> </el-form-item> </el-form> </div> <div class="tag-tree"> <el-tree :data="treeData" node-key="id" ref="tagTree" :props="{children: 'children', label: 'name'}" :indent="40" @node-expand="tagExpand" @node-collapse="tagCollapse" :filter-node-method="filterNode" :default-expanded-keys="tagExpanded" :expand-on-click-node="true"> <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"> <!--<span>{{node.data.cover}}</span>--> <el-popover placement="right-start" title="标签备注" width="200" trigger="hover" :disabled="!node.data.cover" :content="node.data.cover ? node.data.cover : '暂无备注'"> <el-link @click.stop class="cover-link" slot="reference" :disabled="!node.data.cover">备注</el-link> </el-popover> <el-link v-if="node.level < 4 && !$store.state.readonly" type="success" size="mini" plain @click.stop="onAdd(node)">新增子标签 ({{node.level}}级)</el-link> <el-link v-if="node.level != 1 && !$store.state.readonly" type="warning" size="mini" plain @click.stop="onEdit(node, data)">编辑</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="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="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="name"> <el-input v-model="dialog.form.name" maxlength="10" type="text"></el-input> </el-form-item> <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> <span slot="footer" class="dialog-footer"> <el-button @click="dialogToggle">取消</el-button> <el-button type="primary" @click="dialogSave">确定</el-button> </span> </el-dialog> <el-dialog :visible.sync="dialogUser.show" width="800px" title="高级搜索"> <div style="display: flex;margin-bottom: 20px;"> <el-button style="margin-right: 20px; width: 70px;" type="primary" v-if="!$store.state.readonly && $store.state.export" plain :disabled="!tableData.length" @click="exportExcel">导出</el-button> <el-cascader style="width: calc(100% - 90px)" placeholder="选择标签" clearable @change="conditionsChange" :options="treeDataOrigin" :props="{ value: 'id', label: 'name', multiple: true, checkStrictly: true }"></el-cascader> </div> <el-table :data="tableData" border> <el-table-column className="f-c" label="用户"> <template slot-scope="scope"> <img class="avatar" :src="scope.row.avatar">{{scope.row.nickname}}<br>(ID:{{scope.row.user_id}}) </template> </el-table-column> <el-table-column prop="baby_name" label="宝宝名称"></el-table-column> <el-table-column prop="birthday" label="宝宝生日"></el-table-column> <el-table-column prop="sex" label="宝宝性别" :formatter="sexFormatter"></el-table-column> <el-table-column prop="mobile" label="手机号码"></el-table-column> </el-table> <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/> </el-dialog> </div> </template> <script> import {getTagApi, postTagApi, putTagApi, getTagUserApi, exportExcelApi} from "../../service/api"; import page from '../framework/page'; export default { name: "index", data() { return { conditions: [], filterText: '', tagExpanded: [0], tagExpandedWait: '', tableData: [], treeData: [], treeDataOrigin: [], dialogUser: { show: false }, dialog: { title: '', show: false, form: { id: '', pid: '', name: '', cover: '', rules: { name: [{required: true, message: '请输入', trigger: 'blur'}], }, } }, total: 0, nowPage: 1, limit: 10, loading: false } }, components: { page }, watch: { filterText(val) { this.$refs.tagTree.filter(val); } }, mounted() { this.getData() }, methods: { sexFormatter(item){ if(item.sex==0){ return '保密' } if(item.sex==1){ return '男' } if(item.sex==2){ return '女' } }, onPageChange(val) { this.nowPage = val this.getUserData() }, onSizeChange(val) { this.limit = val; this.nowPage = 1; this.getUserData() }, getUserData(){ // 搜索用户 let json = { conditions: JSON.stringify(this.conditions), limit: this.limit, page: this.nowPage } getTagUserApi(json).then(res=>{ this.tableData = res.list }) }, filterNode(value, data) { // 搜索标签 if (!value) return true; return data.name.indexOf(value) !== -1; }, dialogToggle() { this.dialog.show = !this.dialog.show; if (!this.dialog.show) { this.dialogReset(); } /*if (this.tableData.length && this.tableData[0] == 0) { // 未初始化 this.getUserData(); }*/ }, 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, }; this.dialog.form.cover ? json.cover = this.dialog.form.cover : ''; if (this.dialog.form.id) { // 编辑 json.category_id = this.dialog.form.id; putTagApi(json).then(res => { this.$message({ type: 'success', message: '编辑成功!' }); this.dialogToggle(); this.getData(); }) } else { // 新增 postTagApi(json).then(res => { this.$message({ type: 'success', message: '新增成功!' }); this.tagExpanded.push(this.tagExpandedWait); // 新增时自动展开 this.dialogToggle(); this.getData(); }) } } else { console.log('error submit!!'); return false; } }); }, 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) } }, getData() { // 获取标签 getTagApi().then(res => { this.treeDataOrigin = res; this.treeData = [{ children: res, cover: '', created_at: '', id: 0, name: '所有标签', pid: 0, weight: 0, }] }); }, onAdd(node) { this.dialog.title = `新增 ${node.level}级 标签`; this.dialog.form.id = ''; this.tagExpandedWait = node.data.id; // 新增时自动展开 this.dialogToggle(); this.$nextTick(()=>{ this.dialogReset(() => { this.dialog.form.pid = node.data.id; // 注意id }); }); }, onEdit(node, data) { //console.log(node) //console.log(data) let item = node.data; this.dialogToggle(); this.dialogReset(); this.$nextTick(()=>{ this.dialog.title = '编辑标签'; this.dialog.form.id = item.id; this.dialog.form.pid = item.pid; this.dialog.form.name = item.name; this.dialog.form.cover = item.cover; }); }, onSearch(){ this.getData(); }, conditionsChange(val){ //console.log(val); let arr = []; if(val.length) { val.forEach(v => { arr.push(v[v.length - 1]) }) this.conditions = arr; this.getUserData(); } else { this.conditions = arr; this.tableData = []; } }, exportExcel() { let json = { conditions: JSON.stringify(this.conditions), } exportExcelApi(`api/admin/advanced/search/export`, json, '标签用户列表'); } } } </script> <style lang="less"> .tag-tree { padding: 8px 0; background-color: #fff; .custom-tree-node { display: flex; .tag-tree-item { margin-right: 10px; } } // .el-tree-node { padding: 2px 0; .el-tree-node__content { padding: 6px 0; } } // 取消第一级折叠 & > .el-tree > .el-tree-node > .el-tree-node__content > .el-tree-node__expand-icon { pointer-events: none; /*opacity: 0;*/ } .el-link { font-size: 12px; &.cover-link { margin-right: 10px; line-height: 28px; } &:hover:after { bottom: 2px; } & + .el-link { margin-left: 10px; } } } </style>