<template>
|
<el-container style="border: 1px solid #eee">
|
<el-aside ref="left-aside" class="regular-aside" width="200px" style="background-color: rgb(238, 241, 246)">
|
<el-menu :default-openeds="defaultOpeneds" unique-opened @select="menuSelect">
|
<el-submenu v-for="item in menuData" :key="item.exportInfo_Id" :index="'' + item.exportInfo_Id">
|
<template slot="title">
|
<div @click="menuSelect(0, null, item)">
|
<i class="el-icon-menu"></i>{{ item.tableNameCn }}({{ item.exportInfo_Id }},{{ item.children?item.children.length:0 }})
|
</div>
|
</template>
|
<el-menu-item v-for="subItem in item.children" :key="subItem.exportInfo_Id" :sub-item="subItem" :index="'' + subItem.exportInfo_Id">{{ subItem.tableNameCn }}({{ subItem.exportInfo_Id }})
|
</el-menu-item>
|
</el-submenu>
|
</el-menu>
|
</el-aside>
|
|
<el-main ref="el-main" style="padding:0">
|
<!--通用信息 编辑器-->
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>设置导出字段 - {{ title }}</span>
|
</div>
|
<el-tabs v-model="currentTabId" @tab-click="vueDataClick" @tab-remove="vueDataRemove" @dblclick.native="vueDataTabDblClick">
|
<template v-for="(tab, index) in vueDataList">
|
<el-tab-pane v-if="index == 0" :ref="'tab' + index" :key="index" :closable="false" :name="'' + index" :label="tab.label"> </el-tab-pane>
|
<el-tab-pane v-else :ref="'tab' + index" :key="index" :name="'' + index" :label="tab.label" closable> </el-tab-pane>
|
</template>
|
</el-tabs>
|
<el-row class="field-row">
|
<el-col ref="leftCard" :span="9">
|
<el-card class="field-card">
|
<div slot="header" class="clearfix">
|
<template v-if="selectedMenuItem.exportInfo_Id">
|
<span>{{ selectedMenuItem.tableNameCn }}（{{ selectedMenuItem.exportInfo_Id }}）</span>
|
<el-link type="primary" @click="dialogVisibleModule=true">编辑模块</el-link>
|
<el-link type="danger" @click="deleteModule()">删除模块</el-link>
|
</template>
|
</div>
|
<el-scrollbar :noresize="false" :native="false" wrap-class="scrollbar-wrap">
|
<draggable :list="fields" :options="{ group: { name: 'group', pull: 'clone', put: false }, sort: false, ghostClass: 'ghost' }" tag="ul" class="field-group">
|
<li v-for="(item, index) in fields" :key="index" class="field-item" @click="handleSelectWidgetLeft(index)">
|
<el-checkbox v-model="item.check">
|
{{ item.cnName }}(
|
<span :style="'color:'+(item.enable?'blue': 'red')">{{ item.enable?'开启': '已关闭' }}</span>, {{ item.orderNo }})
|
</el-checkbox>
|
<div>
|
<el-link type="primary" @click="handleWidgetEditLeft(index)">编辑</el-link>
|
<el-link type="danger" @click="deleteField(item)">删除</el-link>
|
</div>
|
</li>
|
</draggable>
|
</el-scrollbar>
|
<div v-if="selectedMenuItem.exportInfo_Id" class="card-footer">
|
<el-link type="primary" @click="selectAll()">{{ check?'反选':'全选' }}</el-link>
|
<el-link type="primary" @click="changeEnable(1)">开启导出</el-link>
|
<el-link type="danger" @click="changeEnable(0)">关闭导出</el-link>
|
<el-link type="primary" @click="addField">新增字段</el-link>
|
<el-link type="danger" @click="deleteField()">删除字段</el-link>
|
<span class="right">(共{{ fields.length }}个字段)</span>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col v-if="currentTab.vueData_Id" :span="2" class="drag-col">
|
<div class="icon">
|
<i class="el-icon-yrt-jiaoyiguanli"></i>
|
</div>
|
<div class="text">左右拖拽</div>
|
</el-col>
|
<el-col v-if="currentTab.vueData_Id" :span="13">
|
<el-card class="field-card2">
|
<div slot="header" class="clearfix">
|
<span>已选字段</span>
|
<el-button type="text" class="right no-padding" icon="el-icon-yrt-addplus" @click="showFieldDialog()">添加自定义字段</el-button>
|
</div>
|
<el-scrollbar :noresize="false" :native="false" wrap-class="scrollbar-wrap">
|
<draggable v-model="currentTab.vueData" :options="{ group: 'group', ghostClass: 'ghost', animation: 300, chosenClass: 'chosen-item' }" tag="ul" class="field-group draggable-main" @add="handleWidgetAdd">
|
<template v-for="(item, index) in currentTab.vueData">
|
<li :key="item.key" :index="index" class="field-item">
|
<el-button :item-data="item" type="primary" plain icon="el-icon-yrt-liebiao3" class="selected-item" @click="handleSelectWidget(index)">{{ item.cnName }}</el-button>
|
<el-input v-model="item.aliasName" placeholder="自定义标题名" class="w-120"></el-input>
|
<el-input v-model="item.colExpression" placeholder="计算公式" class="w-150"></el-input>
|
<div v-if="currentTab.vueData_Id !== 0" class="tool">
|
<el-button v-if="selectWidget && selectWidget.key == item.key" title="编辑" class="widget-action-btn" circle plain type="primary" @click.stop="handleWidgetEdit(index)">
|
<i class="el-icon-yrt-bianji"></i>
|
</el-button>
|
<el-button v-if="selectWidget && selectWidget.key == item.key" title="删除" class="widget-action-btn" circle plain type="danger" @click.stop="handleWidgetDelete(index)">
|
<i class="el-icon-yrt-shanchu2"></i>
|
</el-button>
|
</div>
|
</li>
|
</template>
|
</draggable>
|
</el-scrollbar>
|
</el-card>
|
</el-col>
|
</el-row>
|
<div class="footer">
|
<el-button type="success" @click.native="imortModule">导入模块</el-button>
|
<el-button type="success" @click.native="copeVueData">复制一个新模板</el-button>
|
<el-button ref="common-btn" type="primary" @click.native="saveData">保存</el-button>
|
<el-alert :closable="false" title="说明" type="info" show-icon class="msg">
|
<div class="line-height-1_5">
|
将左侧候选字段拖放到右侧，选中右侧字段，可以删除不需要的字段。<br />
|
<span class="color-red">自定义字段名称请使用大括号括起来，例如：{销售价} * 2</span>
|
</div>
|
</el-alert>
|
</div>
|
</el-card>
|
</el-main>
|
|
<!--左侧标准字段弹出窗-->
|
<el-dialog v-dialogDrag :visible.sync="dialogVisibleLeft" title="标准字段编辑" append-to-body width="30%">
|
<el-form ref="form" :model="selectWidgetLeft" label-width="120px">
|
<el-form-item label="字段中文名">
|
<el-input v-model="selectWidgetLeft.cnName" class="w-200"></el-input>
|
</el-form-item>
|
<el-form-item label="字段英文名">
|
<el-input v-model="selectWidgetLeft.columnName" class="w-200"></el-input>
|
</el-form-item>
|
<el-form-item label="排序号">
|
<el-input v-model.number="selectWidgetLeft.orderNo" class="w-200"></el-input>
|
</el-form-item>
|
<el-form-item label="开启">
|
<el-switch v-model="selectWidgetLeft.enable" :active-value="1" :inactive-value="0">
|
</el-switch>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisibleLeft = false">关闭</el-button>
|
<el-button type="primary" @click="saveFieldLeft">确定</el-button>
|
</span>
|
</el-dialog>
|
|
<!--右侧自定义字段弹出窗-->
|
<el-dialog v-dialogDrag :visible.sync="dialogVisible" title="自定义字段编辑" append-to-body width="30%">
|
<el-form ref="form" :model="formData" label-width="120px">
|
<el-form-item label="字段中文名">
|
<el-input v-model="formData.cnName" class="w-200"></el-input>
|
</el-form-item>
|
<el-form-item label="字段英文名">
|
<el-input v-model="formData.columnName" class="w-200"></el-input>
|
</el-form-item>
|
<el-form-item label="开启扩展字段">
|
<el-switch v-model="formData.isExpandField">
|
</el-switch>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">关闭</el-button>
|
<el-button type="primary" @click="saveField">确定</el-button>
|
</span>
|
</el-dialog>
|
|
<!--编辑模块弹出窗-->
|
<el-dialog v-dialogDrag :visible.sync="dialogVisibleModule" title="导出模块编辑" append-to-body width="30%">
|
<el-form ref="form" :model="selectedMenuItem" label-width="120px">
|
<el-form-item label="模块ID">
|
{{ selectedMenuItem.exportInfo_Id }}
|
</el-form-item>
|
<el-form-item label="模块名称">
|
<el-input v-model="selectedMenuItem.tableNameCn" class="w-200"></el-input>
|
</el-form-item>
|
<el-form-item label="表名">
|
<el-input v-model="selectedMenuItem.tableName" class="w-200"></el-input>
|
</el-form-item>
|
<el-form-item label="父级ID">
|
<el-input v-model="selectedMenuItem.parentId" class="w-200"></el-input>
|
</el-form-item>
|
<el-form-item label="排序号">
|
<el-input v-model.number="selectedMenuItem.orderNo" class="w-200"></el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisibleModule = false">关闭</el-button>
|
<el-button type="primary" @click="saveModule">确定</el-button>
|
</span>
|
</el-dialog>
|
</el-container>
|
</template>
|
|
<script>
|
import "@/styles/animate.css";
|
import Draggable from "vuedraggable";
|
|
export default {
|
name: "sys-basic-export-setting",
|
components: { Draggable },
|
data() {
|
return {
|
// 是否全选
|
check: false,
|
// 左侧菜单默认打开项
|
defaultOpeneds: [],
|
// 选中模块
|
selectedMenuItem: {},
|
// 菜单数据
|
menuData: [],
|
value: "-",
|
editMode: "common",
|
title: "请选择模块",
|
// 已经选择好的项
|
currentTab: {},
|
// 默认规则
|
defaultCodeRegular: null,
|
// 加载状态
|
loading: false,
|
// 字段候选项
|
fields: [],
|
// 左侧选中项
|
selectWidgetLeft: {
|
enable: 1
|
},
|
// 选中项
|
selectWidget: {},
|
// 当前导出模板Tab Id
|
currentTabId: "0",
|
// 当前选中菜单下的导出模板列表
|
vueDataList: [],
|
// 左侧自定义字段弹窗
|
dialogVisibleLeft: false,
|
// 自定义字段弹窗
|
dialogVisible: false,
|
// 编辑模块弹出窗
|
dialogVisibleModule: false,
|
// 自定义字段
|
formData: {
|
columnName: null,
|
cnName: null,
|
isExpandField: false
|
}
|
};
|
},
|
computed: {},
|
created() {
|
this.$nextTick(() => {
|
this.getMenuData();
|
});
|
},
|
methods: {
|
// 左侧加载数据
|
getMenuData() {
|
var where = { parentId: 0 };
|
|
var url = "/api/common/loadTreeNodeAll";
|
var params = {
|
folder: "sys/import",
|
DBServer: "Sys",
|
tableName: "Sys_ExportInfo",
|
tableView: "Sys_ExportInfo",
|
keyName: "exportInfo_Id",
|
nodeName: "tableNameCn",
|
fixHasChild: false,
|
isBreakWay: false,
|
displayBreakWay: false,
|
parentName: "parentId",
|
orderBy: "orderNo desc, exportInfo_Id",
|
where: where,
|
extendColumns: "orderNo,tableName"
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
if (res.result) {
|
this.menuData = res.data;
|
if (this.menuData.length) {
|
// 默认打开项
|
this.defaultOpeneds = ["" + this.menuData[0].exportInfo_Id];
|
}
|
} else {
|
this.$message.error(res.msg);
|
}
|
},
|
this.$refs["left-aside"]
|
);
|
},
|
// 左侧菜单点击事件
|
menuSelect(index, indexPath, item) {
|
if (index === 0) {
|
this.selectedMenuItem = item;
|
this.title = item.tableNameCn;
|
this.currentTabId = "0";
|
} else if (item) {
|
var subItem = item.$attrs["sub-item"];
|
this.selectedMenuItem = subItem;
|
this.title = subItem.tableNameCn;
|
this.currentTabId = "0";
|
}
|
|
var url = "/api/sys/export/getExportColList";
|
var params = {
|
exportInfo_Id: this.selectedMenuItem.exportInfo_Id,
|
showAll: true
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.fields = res.data.map(item => {
|
item.check = false;
|
return item;
|
});
|
// 初始化标准模板
|
var vueData = this.fields.map(item => {
|
var key = Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
|
return {
|
cnName: item.cnName,
|
columnName: item.columnName,
|
colExpression: item.colExpression,
|
aliasName: item.aliasName,
|
orderNo: item.orderNo,
|
key: key
|
};
|
});
|
this.vueDataList = [
|
{
|
vueData_Id: 0, // 0表示为主模板
|
exportInfo_Id: 0,
|
label: "系统标准模板",
|
vueData: vueData
|
}
|
];
|
this.currentTab = this.vueDataList[0];
|
// 加载vueData列表
|
this.loadVueDtaList();
|
}
|
},
|
true
|
);
|
},
|
// 加载VueData列表
|
loadVueDtaList() {
|
var exportInfo_Id = this.selectedMenuItem.exportInfo_Id;
|
var url = "/api/sys/export/getExportVueDataList";
|
var params = {
|
exportInfo_Id: exportInfo_Id
|
};
|
this.common.ajax(url, params, res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
res.data.forEach(item => {
|
var vueDataItem = JSON.parse(item.vueData);
|
vueDataItem.vueData_Id = item.vueData_Id;
|
vueDataItem.exportInfo_Id = item.exportInfo_Id;
|
vueDataItem.label = item.vueDataName;
|
this.vueDataList.push(vueDataItem);
|
});
|
}
|
});
|
},
|
|
// 拖拽添加事件
|
handleWidgetAdd(evt) {
|
const newIndex = evt.newIndex;
|
var newItem = this.currentTab.vueData[newIndex];
|
newItem = JSON.parse(JSON.stringify(newItem));
|
newItem.key = Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
|
this.currentTab.vueData[newIndex] = newItem;
|
},
|
// 左侧选中
|
handleSelectWidgetLeft(index) {
|
this.selectWidgetLeft = this.fields[index];
|
},
|
// 选中
|
handleSelectWidget(index) {
|
this.selectWidget = this.currentTab.vueData[index];
|
},
|
// 删除选择项
|
handleWidgetDelete(index) {
|
if (this.currentTab.length - 1 === index) {
|
if (index === 0) {
|
this.selectWidget = {};
|
} else {
|
this.selectWidget = this.currentTab.vueData[index - 1];
|
}
|
} else {
|
this.selectWidget = this.currentTab.vueData[index + 1];
|
}
|
|
this.$nextTick(() => {
|
this.currentTab.vueData.splice(index, 1);
|
});
|
},
|
// 左侧编辑选择项
|
handleWidgetEditLeft(index) {
|
this.dialogVisibleLeft = true;
|
},
|
// 编辑选择项
|
handleWidgetEdit(index) {
|
this.leftDialogVisible = true;
|
this.formData.columnName = this.selectWidget.columnName;
|
this.formData.cnName = this.selectWidget.cnName;
|
this.formData.isExpandField = this.selectWidget.isExpandField;
|
},
|
// common类型保存
|
saveData() {
|
if (this.currentTab.vueData_Id === 0) {
|
this.$message.error("系统标准模板不允许操作！");
|
return;
|
}
|
var vueData = JSON.stringify(this.currentTab);
|
var exportInfo_Id = this.selectedMenuItem.exportInfo_Id;
|
|
var url = "/api/sys/export/saveData";
|
var params = {
|
vueData_Id: this.currentTab.vueData_Id,
|
label: this.currentTab.label,
|
vueData: vueData,
|
exportInfo_Id: exportInfo_Id
|
};
|
var callback = res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.currentTab.vueData_Id = res.vueData_Id;
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
},
|
// vueData Tab点击切换
|
vueDataClick(tab, event) {
|
var item = this.vueDataList[parseInt(this.currentTabId)];
|
this.currentTab = item;
|
},
|
// 复制VueData
|
copeVueData() {
|
this.$prompt("请输入新导入设置名称", "复制当前项", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消"
|
})
|
.then(({ value }) => {
|
if (value) {
|
var currentItem = this.vueDataList[this.currentTabId];
|
if (!currentItem) {
|
this.$message.error("需要复制的数据不存在！");
|
return;
|
}
|
var newVueData = JSON.parse(JSON.stringify(currentItem));
|
newVueData.vueData_Id = -1; // -1表示为新增
|
newVueData.label = value;
|
this.vueDataList.push(newVueData);
|
this.$message.success("复制成功");
|
} else {
|
this.$message.error("名称不能为空");
|
}
|
})
|
.catch(() => {
|
this.$message.info("取消输入");
|
});
|
},
|
// 删除VueData Item
|
vueDataRemove(name) {
|
this.$confirm("此操作将永久删除该VueData, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
var index = parseInt(name);
|
var vueDataItem = this.vueDataList[index];
|
if (vueDataItem.vueData_Id > 0) {
|
var url = "/api/sys/export/deleteItem";
|
var params = {
|
vueData_Id: vueDataItem.vueData_Id
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.vueDataList.splice(index, 1);
|
this.$message.success("删除成功！");
|
}
|
},
|
true
|
);
|
} else if (vueDataItem.vueData_Id === 0) {
|
this.$message.error("主VueData不允许删除！");
|
} else {
|
this.vueDataList.splice(index, 1);
|
this.$message.success("删除成功！");
|
}
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消删除"
|
});
|
});
|
},
|
// 修改VueData名称
|
vueDataTabDblClick() {
|
var vueDataItem = this.vueDataList[this.currentTabId];
|
this.$prompt("请输入新名称", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
inputValue: vueDataItem.label
|
})
|
.then(({ value }) => {
|
if (!value) {
|
this.$message.error("名称不能为空！");
|
return;
|
}
|
if (vueDataItem.vueData_Id > 0) {
|
var url = "/api/sys/export/updateTitle";
|
var params = {
|
vueData_Id: vueDataItem.vueData_Id,
|
value: value
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
vueDataItem.label = value;
|
},
|
true
|
);
|
} else {
|
vueDataItem.label = value;
|
}
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "取消输入"
|
});
|
});
|
},
|
// 显示添加对话框
|
showFieldDialog() {
|
this.dialogVisible = true;
|
this.formData.columnName = null;
|
this.formData.cnName = null;
|
this.formData.isExpandField = false;
|
},
|
// 左侧修改字段
|
saveFieldLeft() {
|
if (!this.selectWidgetLeft.columnName) {
|
this.$message.error("英文字段名称不能为空");
|
return;
|
}
|
if (!this.selectWidgetLeft.cnName) {
|
this.$message.error("中文字段名称不能为空");
|
return;
|
}
|
var url = "/api/sys/export/saveFieldLeft";
|
var params = this.selectWidgetLeft;
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.dialogVisibleLeft = false;
|
this.menuSelect(); // 刷新字段
|
}
|
},
|
true
|
);
|
},
|
// 修改字段
|
saveField() {
|
if (!this.formData.columnName) {
|
this.$message.error("英文字段名称不能为空");
|
return;
|
}
|
if (!this.formData.cnName) {
|
this.$message.error("中文字段名称不能为空");
|
return;
|
}
|
const fieldInfo = this.currentTab.vueData.find(item => item.cnName === this.formData.cnName);
|
// 修改
|
if (fieldInfo) {
|
fieldInfo.cnName = this.formData.cnName;
|
fieldInfo.columnName = this.formData.columnName;
|
fieldInfo.isExpandField = this.formData.isExpandField;
|
this.$message.success("修改成功");
|
} else {
|
// 新增
|
var index = this.currentTab.vueData.length;
|
this.currentTab.vueData.push({
|
cnName: this.formData.cnName,
|
columnName: this.formData.columnName,
|
isExpandField: this.formData.isExpandField,
|
colExpression: null,
|
key: "key_" + index,
|
aliasName: ""
|
});
|
this.$message.success("添加成功");
|
}
|
this.dialogVisible = false;
|
},
|
// 保存模块
|
saveModule() {
|
if (!this.selectedMenuItem.tableNameCn) {
|
this.$message.error("模块名称不能为空");
|
return;
|
}
|
if (!this.selectedMenuItem.tableName) {
|
this.$message.error("表名不能为空");
|
return;
|
}
|
var url = "/api/sys/export/saveModule";
|
var params = this.selectedMenuItem;
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.dialogVisibleModule = false;
|
this.getMenuData(); // 刷新左侧
|
this.selectedMenuItem = {};
|
this.fields = [];
|
}
|
},
|
true
|
);
|
},
|
// 导入模块
|
imortModule() {
|
var currentItem = this.selectedMenuItem;
|
if (!this.selectedMenuItem) {
|
this.$message.error("请选择需要放置的节点");
|
return;
|
}
|
this.$prompt("请输入模块表别名", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
inputValue: ""
|
})
|
.then(({ value }) => {
|
if (!value) {
|
this.$message.error("名称不能为空！");
|
return;
|
}
|
var url = "/api/sys/export/imortModule";
|
var params = {
|
exportInfo_Id: currentItem.exportInfo_Id,
|
tableView: value
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.getMenuData();
|
}
|
},
|
true
|
);
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "取消输入"
|
});
|
});
|
},
|
// 全选
|
selectAll() {
|
this.check = !this.check;
|
for (const field of this.fields) {
|
this.$set(field, "check", this.check);
|
}
|
},
|
//
|
changeEnable(enable) {
|
const idList = this.fields.filter(item => item.check).map(item => item.columnInfo_Id);
|
if (!idList.length) {
|
this.$message.error("至少勾选一项！");
|
return;
|
}
|
var url = "/api/sys/export/changeEnable";
|
var params = {
|
idList: idList,
|
enable: enable
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.menuSelect(); // 刷新字段
|
}
|
},
|
true
|
);
|
},
|
// 新增字段
|
addField() {
|
this.dialogVisibleLeft = true;
|
this.selectWidgetLeft = {
|
exportInfo_Id: this.selectedMenuItem.exportInfo_Id,
|
cnName: "",
|
columnName: "",
|
orderNo: 0,
|
enable: 1
|
};
|
},
|
// 删除字段
|
deleteField(field) {
|
let idList = [];
|
if (field) {
|
idList.push(field.columnInfo_Id);
|
} else {
|
idList = this.fields.filter(item => item.check).map(item => item.columnInfo_Id);
|
}
|
if (!idList.length) {
|
this.$message.error("至少勾选一项！");
|
return;
|
}
|
const submit = () => {
|
var url = "/api/sys/export/deleteField";
|
var params = {
|
idList: idList
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.menuSelect(); // 刷新字段
|
}
|
},
|
true
|
);
|
};
|
|
this.$confirm("此操作将永久删除该字段, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
submit();
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消删除"
|
});
|
});
|
},
|
// 删除模块
|
deleteModule() {
|
if (!this.selectedMenuItem.exportInfo_Id) {
|
this.$message.error("至少勾选一项！");
|
return;
|
}
|
const submit = () => {
|
var url = "/api/sys/export/deleteModule";
|
var params = {
|
exportInfo_Id: this.selectedMenuItem.exportInfo_Id
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.getMenuData(); // 刷新左侧
|
this.selectedMenuItem = {};
|
this.fields = [];
|
}
|
},
|
true
|
);
|
};
|
|
this.$confirm("此操作将永久删除该模块, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
submit();
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消删除"
|
});
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.regular-aside {
|
::v-deep .el-menu {
|
.el-submenu {
|
.el-menu-item,
|
.el-submenu__title {
|
height: 35px;
|
line-height: 35px;
|
}
|
.el-menu-item.is-active {
|
background-color: #ecf5ff;
|
}
|
|
&.is-active,
|
&.is-opened {
|
background-color: #66b1ff;
|
.el-submenu__title {
|
color: white;
|
.el-icon-menu,
|
.el-submenu__icon-arrow {
|
color: white;
|
}
|
&:hover {
|
background-color: #66b1ff;
|
}
|
}
|
}
|
}
|
}
|
}
|
.box-card {
|
::v-deep .el-card__body {
|
padding: 0px 20px 20px;
|
}
|
::v-deep .scrollbar-wrap {
|
max-height: 440px;
|
overflow-x: hidden;
|
padding: 0px;
|
}
|
.field-row {
|
width: 1300px;
|
.field-card {
|
width: 100%;
|
height: 520px;
|
::v-deep .el-card__body {
|
padding: 10px 0px 10px 5px;
|
}
|
.field-group {
|
margin: 0;
|
padding: 0 10px 20px 0;
|
.field-item {
|
padding: 5px 10px 5px 5px;
|
display: flex;
|
justify-content: space-between;
|
&:nth-of-type(odd) {
|
background-color: #ecf5ff;
|
}
|
}
|
}
|
.card-footer {
|
padding-top: 5px;
|
font-size: 12px;
|
color: #afafaf;
|
padding-right: 10px;
|
.right {
|
line-height: 1.5;
|
}
|
}
|
}
|
.drag-col {
|
text-align: center;
|
padding-top: 150px;
|
line-height: 3;
|
color: #888;
|
.icon {
|
color: dodgerblue;
|
i {
|
font-size: 60px;
|
}
|
}
|
}
|
.field-card2 {
|
width: auto;
|
height: 520px;
|
::v-deep .el-card__body {
|
padding: 10px 5px 10px 20px;
|
}
|
.field-group {
|
margin: 0;
|
padding: 0 10px 20px 0;
|
.field-item {
|
padding: 0px 10px 10px 0;
|
.selected-item {
|
padding: 10px 10px;
|
width: 200px;
|
}
|
.splitter {
|
width: 100px;
|
}
|
.custom-letter {
|
width: 150px;
|
}
|
}
|
}
|
}
|
}
|
.footer {
|
width: 920px;
|
padding: 40px 10px 20px;
|
text-align: center;
|
.msg {
|
line-height: 1.5;
|
margin-top: 30px;
|
text-align: left;
|
font-size: 14px;
|
}
|
}
|
.demo.el-alert {
|
display: inline-table;
|
::v-deep .el-alert__icon {
|
position: relative;
|
top: 20px;
|
}
|
}
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.field-item {
|
position: relative;
|
.tool {
|
position: absolute;
|
z-index: 100;
|
left: 160px;
|
top: 20px;
|
.widget-action-btn {
|
width: 36px !important;
|
height: 36px !important;
|
}
|
}
|
}
|
.draggable-main {
|
min-height: 400px;
|
margin: 0;
|
padding: 0;
|
|
li.item {
|
border: 1px solid #f8f8f8;
|
padding: 10px;
|
margin: 1px;
|
background-color: #f3f3f3;
|
line-height: 30px;
|
|
&.over {
|
background-color: #fff;
|
}
|
|
&.active {
|
background-color: rgb(211, 228, 253);
|
}
|
|
&.chosen-item {
|
border: 1px dotted rgb(44, 104, 163);
|
background-color: #409eff;
|
color: white;
|
}
|
}
|
}
|
</style>
|
