<template>
|
<div class="search">
|
<Card>
|
<Row class="operation" align="middle"<% if(enableTable){ %> justify="space-between"<% } %>>
|
<% if(enableTable){ %><div><% } %>
|
<Button @click="add" type="primary" icon="md-add" <% if(enableTable){ %>v-show="showType == 'tree'"<% } %>>添加子节点</Button>
|
<Button @click="addRoot" icon="md-add">添加一级节点</Button>
|
<Button @click="delAll" icon="md-trash">批量删除</Button>
|
<Button @click="getParentList" icon="md-refresh">刷新</Button>
|
<% if(enableTable){ %>
|
<Input
|
v-model="searchKey"
|
suffix="ios-search"
|
@on-change="search"
|
placeholder="输入名称搜索"
|
clearable
|
style="width: 250px"
|
v-show="showType == 'list'"
|
/>
|
<% } %>
|
<i-switch v-model="strict" size="large" style="margin-left:5px" <% if(enableTable){ %>v-show="showType == 'tree'"<% } %>>
|
<span slot="open">级联</span>
|
<span slot="close">单选</span>
|
</i-switch>
|
<% if(enableTable){ %>
|
</div>
|
<div>
|
<RadioGroup v-model="showType" type="button">
|
<Radio title="树结构" label="tree">
|
<Icon type="md-list"></Icon>
|
</Radio>
|
<Radio title="列表" label="list">
|
<Icon type="ios-apps"></Icon>
|
</Radio>
|
</RadioGroup>
|
</div>
|
<% } %>
|
</Row>
|
<Row type="flex" justify="start" :gutter="16" <% if(enableTable){ %>v-show="showType == 'tree'"<% } %>>
|
<Col ${treeSpan}>
|
<Alert show-icon>
|
当前选择编辑：
|
<span class="select-title">{{editTitle}}</span>
|
<a class="select-clear" v-show="form.id && editTitle" @click="cancelEdit">取消选择</a>
|
</Alert>
|
<Input
|
v-model="searchKey"
|
suffix="ios-search"
|
@on-change="search"
|
placeholder="输入名称搜索"
|
clearable
|
/>
|
<div style="position: relative">
|
<div class="tree-bar" :style="{maxHeight: maxHeight}">
|
<Tree
|
ref="tree"
|
:data="data"
|
:load-data="loadData"
|
show-checkbox
|
@on-check-change="changeSelect"
|
@on-select-change="selectTree"
|
:check-strictly="!strict"
|
></Tree>
|
</div>
|
<Spin size="large" fix v-if="loading"></Spin>
|
</div>
|
</Col>
|
<Col ${treeEditSpan}>
|
<Form ref="form" :model="form" :rules="formValidate" <% if(labelPosition=="left"){ %>:label-width="100"<% } %> label-position="${labelPosition}">
|
<%
|
var curr = 1;
|
for(var i=0; i<totalRow; i++){
|
%>
|
<% if(labelPosition!="left"){ %>
|
<Row :gutter="32">
|
<% } %>
|
<%
|
for(var j=0; j<rowNum; j++){
|
if(fields.~size==0||curr>fields.~size){
|
break;
|
}
|
var item = fields[curr-1];
|
while(!item.editable && curr <= fields.~size){
|
curr++;
|
item = fields[curr-1];
|
}
|
curr++;
|
var spanData = span;
|
if(item.type=="editor"||item.type=="textarea"){
|
spanData = 24;
|
}
|
%>
|
<% if(labelPosition!="left"){ %>
|
<Col span="${spanData}">
|
<% } %>
|
<%
|
if(item.type=="xbootTreeChoose"){
|
%>
|
<FormItem label="上级节点" prop="parentTitle">
|
<div style="display:flex;width:100%">
|
<Input v-model="form.parentTitle" readonly style="margin-right:10px;"/>
|
<Poptip transfer trigger="click" placement="right-start" title="选择上级节点" width="250">
|
<Button icon="md-list">选择节点</Button>
|
<div slot="content" class="tree-bar tree-select">
|
<Tree :data="dataEdit" :load-data="loadData" @on-select-change="selectTreeEdit"></Tree>
|
<Spin size="large" fix v-if="loadingEdit"></Spin>
|
</div>
|
</Poptip>
|
</div>
|
</FormItem>
|
<%
|
}
|
%>
|
<%
|
else if(item.type=="xbootTreeTitle"){
|
%>
|
<FormItem label="名称" prop="title">
|
<Input v-model="form.title"/>
|
</FormItem>
|
<%
|
}
|
%>
|
<%
|
else if(item.type=="xbootTreeSortOrder"){
|
%>
|
<FormItem label="排序值" prop="sortOrder" class="block-tool">
|
<Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
|
<InputNumber :max="1000" :min="0" v-model="form.sortOrder" style="width:100%"></InputNumber>
|
</Tooltip>
|
</FormItem>
|
<%
|
}else{
|
%>
|
<FormItem label="${item.name}" prop="${item.field}" <% if(item.type=="upload"){ %>class="form-noheight"<% } %>>
|
<%
|
if(item.type=="text"){
|
%>
|
<Input v-model="form.${item.field}" clearable/>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="textarea"){
|
%>
|
<Input v-model="form.${item.field}" type="textarea" :rows="4" maxlength="250" show-word-limit/>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="select"){
|
%>
|
<Select v-model="form.${item.field}" clearable transfer>
|
<Option value="0">请自行编辑下拉菜单</Option>
|
</Select>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="switch"){
|
%>
|
<i-switch v-model="form.${item.field}"></i-switch>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="radio"){
|
%>
|
<RadioGroup v-model="form.${item.field}">
|
<Radio label="0">请自行编辑单选框</Radio>
|
<Radio label="1">请自行编辑单选框</Radio>
|
</RadioGroup>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="number"){
|
%>
|
<InputNumber v-model="form.${item.field}" style="width:100%"></InputNumber>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="date"){
|
%>
|
<DatePicker type="date" v-model="form.${item.field}" clearable transfer style="width: 100%"></DatePicker>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="datetime"){
|
%>
|
<DatePicker type="datetime" v-model="form.${item.field}" clearable transfer style="width: 100%"></DatePicker>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="daterange"){
|
%>
|
<DatePicker type="daterange" v-model="form.${item.field}" clearable transfer style="width: 100%"></DatePicker>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="time"){
|
%>
|
<TimePicker type="time" v-model="form.${item.field}" clearable style="width: 100%" transfer></TimePicker>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="area"){
|
%>
|
<al-cascader v-model="form.${item.field}" data-type="name" level="${item.level}" transfer/>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="slider"){
|
%>
|
<Slider v-model="form.${item.field}"></Slider>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="upload"){
|
%>
|
<upload-pic-input v-model="form.${item.field}"></upload-pic-input>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="uploadThumb"){
|
%>
|
<uploadThumb v-model="form.${item.field}" multiple></uploadThumb>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="editor"){
|
%>
|
<editor id="editor-${i}-${j}" v-model="form.${item.field}"></editor>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="password"){
|
%>
|
<password v-model="form.${item.field}"></password>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="dict"){
|
%>
|
<dict v-model="form.${item.field}" dict="${item.dictType}" transfer></dict>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="customList"){
|
%>
|
<customList v-model="form.${item.field}" url="${item.customUrl}" transfer></customList>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="fileUpload"){
|
%>
|
<fileUpload v-model="form.${item.field}"></fileUpload>
|
<%
|
}
|
%>
|
</FormItem>
|
<%
|
}
|
%>
|
<% if(labelPosition!="left"){ %>
|
</Col>
|
<% } %>
|
<%
|
}
|
%>
|
<% if(labelPosition!="left"){ %>
|
</Row>
|
<% } %>
|
<%
|
}
|
%>
|
<FormItem class="br">
|
<Button
|
@click="submitEdit"
|
:loading="submitLoading"
|
:disabled="!form.id || !editTitle"
|
type="primary"
|
icon="ios-create-outline"
|
>修改并保存</Button>
|
<Button @click="handleReset">重置</Button>
|
</FormItem>
|
</Form>
|
</Col>
|
</Row>
|
<% if(enableTable){ %>
|
<Alert show-icon v-show="showType == 'list'">
|
已选择
|
<span class="select-count">{{ selectList.length }}</span> 项
|
<a class="select-clear" @click="clearSelectAll">清空</a>
|
</Alert>
|
<Table
|
row-key="title"
|
:load-data="loadData"
|
:columns="columns"
|
:data="data"
|
:loading="loading"
|
border
|
:update-show-children="true"
|
ref="table"
|
@on-selection-change="showSelect"
|
v-if="showType == 'list'"
|
></Table>
|
<% } %>
|
</Card>
|
<% if(!isDrawer){ %>
|
<Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="${modalWidth}">
|
<% }else{ %>
|
<Drawer :title="modalTitle" v-model="modalVisible" draggable :mask-closable="false":width="${modalWidth}">
|
<div :style="{ maxHeight: maxDrawerHeight }" class="drawer-content">
|
<% } %>
|
<Form ref="formAdd" :model="formAdd" :rules="formValidate" label-position="top">
|
<div v-if="showParent">
|
<FormItem label="上级节点：">{{form.title}}</FormItem>
|
</div>
|
<%
|
var curr2 = 2;
|
for(var i=0; i<totalRowTree; i++){
|
%>
|
<% if(labelPosition!="left"){ %>
|
<Row :gutter="32">
|
<% } %>
|
<%
|
for(var j=0; j<rowNum; j++){
|
if(fields.~size==0||curr2>fields.~size){
|
break;
|
}
|
var item = fields[curr2-1];
|
while(!item.editable && curr2 <= fields.~size){
|
curr2++;
|
item = fields[curr2-1];
|
}
|
curr2++;
|
var spanData = span;
|
if(item.type=="editor"||item.type=="textarea"){
|
spanData = 24;
|
}
|
%>
|
<% if(labelPosition!="left"){ %>
|
<Col span="${spanData}">
|
<% } %>
|
<%
|
if(item.type=="xbootTreeTitle"){
|
%>
|
<FormItem label="名称" prop="title">
|
<Input v-model="formAdd.title"/>
|
</FormItem>
|
<%
|
}
|
%>
|
<%
|
else if(item.type=="xbootTreeSortOrder"){
|
%>
|
<FormItem label="排序值" prop="sortOrder" class="block-tool">
|
<Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
|
<InputNumber :max="1000" :min="0" v-model="formAdd.sortOrder" style="width:100%"></InputNumber>
|
</Tooltip>
|
</FormItem>
|
<%
|
}else{
|
%>
|
<FormItem label="${item.name}" prop="${item.field}" <% if(item.type=="upload"){ %>class="form-noheight"<% } %>>
|
<%
|
if(item.type=="text"){
|
%>
|
<Input v-model="formAdd.${item.field}" clearable/>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="textarea"){
|
%>
|
<Input v-model="formAdd.${item.field}" type="textarea" :rows="4" maxlength="250" show-word-limit/>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="select"){
|
%>
|
<Select v-model="formAdd.${item.field}" clearable transfer>
|
<Option value="0">请自行编辑下拉菜单</Option>
|
</Select>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="switch"){
|
%>
|
<i-switch v-model="formAdd.${item.field}"></i-switch>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="radio"){
|
%>
|
<RadioGroup v-model="formAdd.${item.field}">
|
<Radio label="0">请自行编辑单选框</Radio>
|
<Radio label="1">请自行编辑单选框</Radio>
|
</RadioGroup>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="number"){
|
%>
|
<InputNumber v-model="formAdd.${item.field}" style="width:100%"></InputNumber>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="date"){
|
%>
|
<DatePicker type="date" v-model="formAdd.${item.field}" clearable transfer style="width: 100%"></DatePicker>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="datetime"){
|
%>
|
<DatePicker type="datetime" v-model="formAdd.${item.field}" clearable transfer style="width: 100%"></DatePicker>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="daterange"){
|
%>
|
<DatePicker type="daterange" v-model="formAdd.${item.field}" clearable transfer style="width: 100%"></DatePicker>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="time"){
|
%>
|
<TimePicker type="time" v-model="formAdd.${item.field}" clearable transfer style="width: 100%"></TimePicker>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="area"){
|
%>
|
<al-cascader v-model="formAdd.${item.field}" data-type="name" level="${item.level}" transfer/>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="slider"){
|
%>
|
<Slider v-model="formAdd.${item.field}"></Slider>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="upload"){
|
%>
|
<upload-pic-input v-model="formAdd.${item.field}"></upload-pic-input>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="uploadThumb"){
|
%>
|
<uploadThumb v-model="formAdd.${item.field}" multiple></uploadThumb>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="editor"){
|
%>
|
<editor id="editor-add-${i}-${j}" v-model="formAdd.${item.field}"></editor>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="password"){
|
%>
|
<password v-model="formAdd.${item.field}"></password>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="dict"){
|
%>
|
<dict v-model="formAdd.${item.field}" dict="${item.dictType}" transfer></dict>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="customList"){
|
%>
|
<customList v-model="formAdd.${item.field}" url="${item.customUrl}" transfer></customList>
|
<%
|
}
|
%>
|
<%
|
if(item.type=="fileUpload"){
|
%>
|
<fileUpload v-model="formAdd.${item.field}"></fileUpload>
|
<%
|
}
|
%>
|
</FormItem>
|
<%
|
}
|
%>
|
<% if(labelPosition!="left"){ %>
|
</Col>
|
<% } %>
|
<%
|
}
|
%>
|
<% if(labelPosition!="left"){ %>
|
</Row>
|
<% } %>
|
<%
|
}
|
%>
|
</Form>
|
<% if(isDrawer){ %>
|
</div>
|
<% } %>
|
<% if(!isDrawer){ %>
|
<div slot="footer">
|
<Button type="text" @click="modalVisible = false">取消</Button>
|
<Button type="primary" :loading="submitLoading" @click="submitAdd">提交</Button>
|
</div>
|
</Modal>
|
<% }else{ %>
|
<div class="drawer-footer br">
|
<Button type="primary" :loading="submitLoading" @click="submitAdd">提交</Button>
|
<Button @click="modalVisible = false">取消</Button>
|
</div>
|
</Drawer>
|
<% } %>
|
</div>
|
</template>
|
|
<script>
|
<%
|
if(api){
|
%>
|
// 根据你的实际请求api.js位置路径修改
|
import { init${apiName}, load${apiName}, add${apiName}, edit${apiName}, delete${apiName}, search${apiName} } from "@/api/index";
|
<%
|
}
|
%>
|
<%
|
if(fileUpload){
|
%>
|
import fileUpload from "@/views/my-components/xboot/file-upload";
|
<%
|
}
|
%>
|
<%
|
if(upload){
|
%>
|
import uploadPicInput from "@/views/my-components/xboot/upload-pic-input";
|
<%
|
}
|
%>
|
<%
|
if(uploadThumb){
|
%>
|
import uploadThumb from "@/views/my-components/xboot/upload-pic-thumb";
|
<%
|
}
|
%>
|
<%
|
if(editor){
|
%>
|
import editor from "@/views/my-components/xboot/editor";
|
<%
|
}
|
%>
|
<%
|
if(password){
|
%>
|
import password from "@/views/my-components/xboot/set-password";
|
<%
|
}
|
%>
|
<%
|
if(dict){
|
%>
|
import dict from "@/views/my-components/xboot/dict";
|
<%
|
}
|
%>
|
<%
|
if(customList){
|
%>
|
import customList from "@/views/my-components/xboot/custom-list";
|
<%
|
}
|
%>
|
export default {
|
name: "${vueName}",
|
components: {
|
<%
|
if(fileUpload){
|
%>
|
fileUpload,
|
<%
|
}
|
%>
|
<%
|
if(upload){
|
%>
|
uploadPicInput,
|
<%
|
}
|
%>
|
<%
|
if(uploadThumb){
|
%>
|
uploadThumb,
|
<%
|
}
|
%>
|
<%
|
if(editor){
|
%>
|
editor,
|
<%
|
}
|
%>
|
<%
|
if(password){
|
%>
|
password,
|
<%
|
}
|
%>
|
<%
|
if(dict){
|
%>
|
dict,
|
<%
|
}
|
%>
|
<%
|
if(customList){
|
%>
|
customList,
|
<%
|
}
|
%>
|
},
|
data() {
|
return {
|
<% if(enableTable){ %>
|
showType: "tree",
|
<% } %>
|
<% if(isDrawer){ %>
|
maxDrawerHeight: 510,
|
<% } %>
|
maxHeight: "500px",
|
strict: true,
|
loading: false, // 树加载状态
|
loadingEdit: false, // 编辑上级树加载状态
|
modalVisible: false, // 添加显示
|
selectList: [], // 多选数据
|
showParent: false, // 显示上级标识
|
modalTitle: "", // 添加标题
|
editTitle: "", // 编辑节点名称
|
searchKey: "", // 搜索树
|
form: {
|
// 编辑对象初始化数据
|
id: "",
|
title: "",
|
parentId: "",
|
parentTitle: "",
|
sortOrder: 0,
|
<%
|
for(item in fields){
|
if(item.field!=null&&item.editable){
|
%>
|
<% if(item.type=="switch"){ %>
|
${item.field}: true,
|
<% }else if(item.type=="number"||item.type=="slider"){ %>
|
${item.field}: 0,
|
<% }else if(item.type=="daterange"||item.type=="area"||item.type=="uploadThumb"){ %>
|
${item.field}: [],
|
<% }else{ %>
|
${item.field}: "",
|
<% } %>
|
<%
|
}
|
}
|
%>
|
},
|
formAdd: {
|
// 添加对象初始化数据
|
},
|
formValidate: {
|
// 表单验证规则
|
title: [{ required: true, message: "不能为空", trigger: "change" }],
|
sortOrder: [
|
{
|
required: true,
|
type: "number",
|
message: "排序值不能为空",
|
trigger: "change"
|
}
|
],
|
<%
|
for(item in fields){
|
if(item.editable&&item.validate){
|
%>
|
<% if(item.type=="area"||item.type=="uploadThumb"){ %>
|
${item.field}: [{ type: "array", required: true, message: "不能为空", trigger: "change" }],
|
<% }else if(item.type=="date"||item.type=="datetime"){ %>
|
${item.field}: [{ type: "date", required: true, message: "不能为空", trigger: "change" }],
|
<% }else if(item.type=="daterange"){ %>
|
${item.field}: [{ type: "array", required: true, trigger: "change", fields: { 0: { type: "date", message: "起始日期不能为空", required: true }, 1: { type: "date", message: "结束日期不能为空", required: true } }, }],
|
<% }else if(item.type=="number"||item.type=="slider"){ %>
|
${item.field}: [{ type: "number", required: true, message: "不能为空", trigger: "change" }],
|
<% }else if(item.type=="switch"){ %>
|
${item.field}: [{ type: "boolean", required: true, message: "不能为空", trigger: "change" }],
|
<% }else{ %>
|
${item.field}: [{ required: true, message: "不能为空", trigger: "change" }],
|
<% } %>
|
<%
|
}
|
}
|
%>
|
},
|
submitLoading: false,
|
data: [],
|
dataEdit: [],
|
<% if(enableTable){ %>
|
columns: [
|
{
|
type: "selection",
|
width: 60,
|
align: "center",
|
},
|
{
|
type: "index",
|
width: 60,
|
align: "center",
|
},
|
{
|
title: "名称",
|
key: "title",
|
minWidth: 120,
|
sortable: true,
|
tree: true,
|
},
|
{
|
title: "排序",
|
key: "sortOrder",
|
width: 150,
|
sortable: true,
|
align: "center",
|
sortType: "asc",
|
},
|
{
|
title: "创建时间",
|
key: "createTime",
|
sortable: true,
|
width: 200,
|
},
|
{
|
title: "操作",
|
key: "action",
|
width: 300,
|
align: "center",
|
render: (h, params) => {
|
return h("div", [
|
h(
|
"a",
|
{
|
on: {
|
click: () => {
|
this.tableAdd(params.row);
|
},
|
},
|
},
|
"添加子节点"
|
),
|
h("Divider", {
|
props: {
|
type: "vertical",
|
},
|
}),
|
h(
|
"a",
|
{
|
on: {
|
click: () => {
|
this.remove(params.row);
|
},
|
},
|
},
|
"删除"
|
),
|
]);
|
},
|
},
|
],
|
<% } %>
|
};
|
},
|
methods: {
|
init() {
|
// 计算高度
|
let height = document.documentElement.clientHeight;
|
this.maxHeight = Number(height - 287) + "px";
|
<% if(isDrawer){ %>
|
this.maxDrawerHeight = Number(height - 121) + "px";
|
<% } %>
|
// 初始化一级节点
|
this.getParentList();
|
// 初始化一级节点为编辑上级节点使用
|
this.getParentListEdit();
|
},
|
getParentList() {
|
<%
|
if(api){
|
%>
|
this.loading = true;
|
init${apiName}().then(res => {
|
this.loading = false;
|
if (res.success) {
|
res.result.forEach(function(e) {
|
if (e.isParent) {
|
e.loading = false;
|
e.children = [];
|
<% if(enableTable){ %>
|
e._loading = false;
|
<% } %>
|
}
|
});
|
this.data = res.result;
|
}
|
});
|
<%
|
} else {
|
%>
|
// this.loading = true;
|
// this.getRequest("一级数据请求路径，如/tree/getByParentId/0").then(res => {
|
// this.loading = false;
|
// if (res.success) {
|
// res.result.forEach(function(e) {
|
// if (e.isParent) {
|
// e.loading = false;
|
// e.children = [];
|
<% if(enableTable){ %>
|
// e._loading = false;
|
<% } %>
|
// }
|
// });
|
// this.data = res.result;
|
// }
|
// });
|
// 模拟请求成功
|
this.data = [
|
];
|
<%
|
}
|
%>
|
},
|
getParentListEdit() {
|
<%
|
if(api){
|
%>
|
this.loadingEdit = true;
|
init${apiName}().then(res => {
|
this.loadingEdit = false;
|
if (res.success) {
|
res.result.forEach(function(e) {
|
if (e.isParent) {
|
e.loading = false;
|
e.children = [];
|
}
|
});
|
// 头部加入一级
|
let first = {
|
id: "0",
|
title: "一级节点"
|
};
|
res.result.unshift(first);
|
this.dataEdit = res.result;
|
}
|
});
|
<%
|
} else {
|
%>
|
// this.loadingEdit = true;
|
// this.getRequest("/tree/getByParentId/0").then(res => {
|
// this.loadingEdit = false;
|
// if (res.success) {
|
// res.result.forEach(function(e) {
|
// if (e.isParent) {
|
// e.loading = false;
|
// e.children = [];
|
// }
|
// });
|
// // 头部加入一级
|
// let first = {
|
// id: "0",
|
// title: "一级节点"
|
// };
|
// res.result.unshift(first);
|
// this.dataEdit = res.result;
|
// }
|
// });
|
// 模拟请求成功
|
this.dataEdit = [
|
];
|
<%
|
}
|
%>
|
},
|
loadData(item, callback) {
|
<%
|
if(api){
|
%>
|
load${apiName}(item.id).then(res => {
|
if (res.success) {
|
res.result.forEach(function(e) {
|
if (e.isParent) {
|
e.loading = false;
|
e.children = [];
|
<% if(enableTable){ %>
|
e._loading = false;
|
<% } %>
|
}
|
});
|
callback(res.result);
|
}
|
});
|
<%
|
} else {
|
%>
|
// 异步加载树子节点数据
|
// this.getRequest("请求路径，如/tree/getByParentId/" + item.id).then(res => {
|
// if (res.success) {
|
// res.result.forEach(function(e) {
|
// if (e.isParent) {
|
// e.loading = false;
|
// e.children = [];
|
<% if(enableTable){ %>
|
// e._loading = false;
|
<% } %>
|
// }
|
// });
|
// callback(res.result);
|
// }
|
// });
|
<%
|
}
|
%>
|
},
|
search() {
|
// 搜索树
|
if (this.searchKey) {
|
<%
|
if(api){
|
%>
|
this.loading = true;
|
search${apiName}({ title: this.searchKey }).then(res => {
|
this.loading = false;
|
if (res.success) {
|
res.result.forEach(function(e) {
|
if (e.isParent) {
|
e.loading = false;
|
e.children = [];
|
<% if(enableTable){ %>
|
e._loading = false;
|
<% } %>
|
}
|
});
|
this.data = res.result;
|
}
|
});
|
<%
|
} else {
|
%>
|
// 模拟请求
|
// this.loading = true;
|
// this.getRequest("搜索请求路径", { title: this.searchKey }).then(res => {
|
// this.loading = false;
|
// if (res.success) {
|
// res.result.forEach(function(e) {
|
// if (e.isParent) {
|
// e.loading = false;
|
// e.children = [];
|
<% if(enableTable){ %>
|
// e._loading = false;
|
<% } %>
|
// }
|
// });
|
// this.data = res.result;
|
// }
|
// });
|
// 模拟请求成功
|
this.data = [
|
];
|
<%
|
}
|
%>
|
} else {
|
// 为空重新加载
|
this.getParentList();
|
}
|
},
|
selectTree(v) {
|
if (v.length > 0) {
|
// 转换null为""
|
for (let attr in v[0]) {
|
if (v[0][attr] === null) {
|
v[0][attr] = "";
|
}
|
}
|
let str = JSON.stringify(v[0]);
|
let data = JSON.parse(str);
|
this.form = data;
|
this.editTitle = data.title;
|
} else {
|
this.cancelEdit();
|
}
|
},
|
cancelEdit() {
|
let data = this.$refs.tree.getSelectedNodes()[0];
|
if (data) {
|
data.selected = false;
|
}
|
this.$refs.form.resetFields();
|
this.form.id = "";
|
this.editTitle = "";
|
},
|
selectTreeEdit(v) {
|
if (v.length > 0) {
|
// 转换null为""
|
for (let attr in v[0]) {
|
if (v[0][attr] === null) {
|
v[0][attr] = "";
|
}
|
}
|
let str = JSON.stringify(v[0]);
|
let data = JSON.parse(str);
|
if (this.form.id == data.id) {
|
this.$Message.warning("请勿选择自己作为父节点");
|
v[0].selected = false;
|
return;
|
}
|
this.form.parentId = data.id;
|
this.form.parentTitle = data.title;
|
}
|
},
|
handleReset() {
|
this.$refs.form.resetFields();
|
this.form.status = 0;
|
},
|
submitEdit() {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
if (!this.form.id) {
|
this.$Message.warning("请先点击选择要修改的节点");
|
return;
|
}
|
<%
|
for(item in fields){
|
if(item.editable&&item.type=="date"){
|
%>
|
if (typeof this.form.${item.field} == "object") {
|
this.form.${item.field} = this.format(this.form.${item.field}, "yyyy-MM-dd");
|
}
|
<%
|
}else if(item.editable&&item.type=="datetime"){
|
%>
|
if (typeof this.form.${item.field} == "object") {
|
this.form.${item.field} = this.format(this.form.${item.field}, "yyyy-MM-dd HH:mm:ss");
|
}
|
<%
|
}
|
}
|
%>
|
this.submitLoading = true;
|
<%
|
if(api){
|
%>
|
edit${apiName}(this.form).then(res => {
|
this.submitLoading = false;
|
if (res.success) {
|
this.$Message.success("编辑成功");
|
this.init();
|
this.modalVisible = false;
|
}
|
});
|
<%
|
} else {
|
%>
|
// this.postRequest("请求路径，如/tree/edit", this.form).then(res => {
|
// this.submitLoading = false;
|
// if (res.success) {
|
// this.$Message.success("编辑成功");
|
// this.init();
|
// this.modalVisible = false;
|
// }
|
// });
|
// 模拟成功
|
this.submitLoading = false;
|
this.$Message.success("编辑成功");
|
this.modalVisible = false;
|
<%
|
}
|
%>
|
}
|
});
|
},
|
submitAdd() {
|
this.$refs.formAdd.validate(valid => {
|
if (valid) {
|
this.submitLoading = true;
|
<%
|
if(api){
|
%>
|
add${apiName}(this.formAdd).then(res => {
|
this.submitLoading = false;
|
if (res.success) {
|
this.$Message.success("添加成功");
|
this.init();
|
this.modalVisible = false;
|
}
|
});
|
<%
|
} else {
|
%>
|
// this.postRequest("请求路径，如/tree/add", this.formAdd).then(res => {
|
// this.submitLoading = false;
|
// if (res.success) {
|
// this.$Message.success("添加成功");
|
// this.init();
|
// this.modalVisible = false;
|
// }
|
// });
|
// 模拟成功
|
this.submitLoading = false;
|
this.$Message.success("添加成功");
|
this.modalVisible = false;
|
<%
|
}
|
%>
|
}
|
});
|
},
|
add() {
|
if (this.form.id == "" || this.form.id == null) {
|
this.$Message.warning("请先点击选择一个节点");
|
return;
|
}
|
this.modalTitle = "添加子节点";
|
this.showParent = true;
|
if (!this.form.children) {
|
this.form.children = [];
|
}
|
this.formAdd = {
|
parentId: this.form.id,
|
sortOrder: this.form.children.length + 1
|
};
|
this.modalVisible = true;
|
},
|
addRoot() {
|
this.modalTitle = "添加一级节点";
|
this.showParent = false;
|
this.formAdd = {
|
parentId: 0,
|
sortOrder: this.data.length + 1
|
};
|
this.modalVisible = true;
|
},
|
changeSelect(v) {
|
this.selectList = v;
|
},
|
<% if(enableTable){ %>
|
clearSelectAll() {
|
this.$refs.table.selectAll(false);
|
},
|
tableAdd(v) {
|
this.form = v;
|
this.add();
|
this.editTitle = "";
|
let data = this.$refs.tree.getSelectedNodes()[0];
|
if (data) {
|
data.selected = false;
|
}
|
},
|
showSelect(e) {
|
this.selectList = e;
|
},
|
remove(v) {
|
this.selectList = [];
|
this.selectList.push(v);
|
this.delAll();
|
},
|
<% } %>
|
delAll() {
|
if (this.selectList.length <= 0) {
|
this.$Message.warning("您还未勾选要删除的数据");
|
return;
|
}
|
this.$Modal.confirm({
|
title: "确认删除",
|
content: "您确认要删除所选的 " + this.selectList.length + " 条数据及其下级所有数据?",
|
loading: true,
|
onOk: () => {
|
let ids = "";
|
this.selectList.forEach(function(e) {
|
ids += e.id + ",";
|
});
|
ids = ids.substring(0, ids.length - 1);
|
<%
|
if(api){
|
%>
|
delete${apiName}({ids: ids}).then(res => {
|
this.$Modal.remove();
|
if (res.success) {
|
this.$Message.success("删除成功");
|
this.selectList = [];
|
this.cancelEdit();
|
this.init();
|
}
|
});
|
<%
|
} else {
|
%>
|
// this.deleteRequest("请求路径，如/tree/delByIds/" + ids).then(res => {
|
// this.$Modal.remove();
|
// if (res.success) {
|
// this.$Message.success("删除成功");
|
// this.selectList = [];
|
// this.cancelEdit();
|
// this.init();
|
// }
|
// });
|
// 模拟成功
|
this.$Modal.remove();
|
this.$Message.success("删除成功");
|
this.selectList = [];
|
this.cancelEdit();
|
<%
|
}
|
%>
|
}
|
});
|
}
|
},
|
mounted() {
|
this.init();
|
}
|
};
|
</script>
|
<style lang="less">
|
@import "@/styles/tree-common.less";
|
@import "@/styles/drawer-common.less";
|
</style>
|
