<!doctype html>
|
<html>
|
<head>
|
<meta charset="utf-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache">
|
<title>公式定义</title>
|
<!-- <link href="//at.alicdn.com/t/font_2374495_jm5jjyo3fl.css" rel="stylesheet"> -->
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
|
<script type="text/javascript">
|
function loadJsCss(callback) {
|
var jscss_urls = [
|
{id: "js6", type: "js", url: "root/js/vuedraggable.umd.min.js"},
|
];
|
window.top.initJsCss(document, jscss_urls, callback);
|
};
|
|
function initVue() {
|
new FormVue({
|
el: "#vbody",
|
data: {
|
dataname: "fee_model_plan",
|
table_dataname: "fee_model_plan_field",
|
title: "公式定义",
|
|
dataRequest: [
|
{//协议类型
|
name: "agm_record_type",
|
dataname: "agm_record_type",
|
//url: "root/front/getOneDictionary",
|
//paramsobj: { code: "OrgType", },
|
filter: "",
|
orderby: "",
|
isnotoption: false, //true:不是选项
|
code:"id",//是下拉选项时设置
|
label:"name",//是下拉选项时设置
|
},
|
{//流向类型
|
name: "fee_model_band",
|
dataname: "fee_model_band",
|
//url: "root/front/getOneDictionary",
|
//paramsobj: { code: "OrgType", },
|
filter: "",
|
orderby: "",
|
isnotoption: false, //true:不是选项
|
code:"id",//是下拉选项时设置
|
label:"name",//是下拉选项时设置
|
},
|
{//字段库
|
name: "property",
|
dataname: "sys_data_property",
|
//url: "root/front/getOneDictionary",
|
//paramsobj: { code: "OrgType", },
|
filter: "dataobject_id='fee_memo'",
|
orderby: "list_order_no",
|
isnotoption: true, //true:不是选项
|
code:"field",//是下拉选项时设置
|
label:"label_chinese",//是下拉选项时设置
|
},
|
],
|
formAttr: {
|
istitle: false,
|
title: "基础信息",
|
columnnumber: 3,
|
labelwidth: "140px",
|
labelposition: "left",//"left",// right//top
|
size: "mini",
|
border: "3px solid #c6c6c600"
|
},
|
|
default_formFields: [],
|
formFields: [],
|
|
newformData: {},
|
formData: {
|
record_type: "",
|
flow_type: ""
|
},
|
|
isRefresh: true,
|
default_tableFields: [
|
|
],
|
tableFields: [],
|
newTableData: {
|
create_time: createDatetime(),
|
creator_name: window.top.vue.userinfo.name,
|
},
|
tableData: [],
|
|
//按键权限设置
|
isedit: false,//提交前编辑，保存/提交
|
isrefuseedit: false,//拒绝后编辑，保存/再次提交
|
isapproval: false,//审批，同意/拒绝/转办/退回
|
|
iscommit: false,//提交标记
|
|
//弹窗参数
|
popupParames: {},
|
//字段设置
|
tablefieldClick: {},
|
formfieldClick: {},
|
tableHeight: 0,
|
|
|
|
recordArray_agm: [],
|
recordArray: [],
|
flowArray: [],
|
guidelineArray: [
|
// {id: "1001", record: [], flow: [], field: "field1", name: '新字段', record_field: "field1", field_name: '字段1', flow_field: "fieldA", flow_name: '字段a'},
|
// {id: "add_field", name: '新增字段'},
|
],
|
grpup_record: {
|
name:'guideline',
|
pull:"clone",
|
put:false
|
},
|
grpup_flow: {
|
name:'guideline',
|
pull:"clone",
|
put:false
|
},
|
|
activeName: "",
|
recordTabName: "",
|
propertyFieldMap: {},
|
guidelineArray_width: 0,
|
treeDataList: [],
|
node_lineheight2: "28px",
|
},
|
created() {
|
let clientHeight = document.documentElement.clientHeight;
|
this.tableHeight = clientHeight - 94;
|
|
this.popupParames = clone(Root.popupParames);
|
this.title = this.popupParames.title || this.popupParames.text
|
if (this.popupParames.data) {
|
this.formData = clone(this.popupParames.data);
|
}
|
|
if (this.popupParames.sceneCode) {
|
if (this.popupParames.sceneCode == "add") {//新增
|
if (this.newformData) {
|
let formData_ = clone(this.formData);
|
|
for (var k in this.newformData) {
|
formData_[k] = this.newformData[k];
|
}
|
this.formData = formData_;
|
}
|
|
if (this.newTableData) {
|
this.tableData.push(clone(this.newTableData));
|
}
|
|
this.isedit = true;
|
}
|
else if (this.popupParames.sceneCode == "browse") {//只读
|
this.formAttr.disabled = true;
|
}
|
else if (this.popupParames.sceneCode == "edit") {//编辑
|
this.isedit = true;
|
}
|
else if (this.popupParames.sceneCode == "approval") {//审批
|
this.formAttr.disabled = true;
|
this.isapproval = true;
|
}
|
else if (this.popupParames.sceneCode == "refuseedit") {//拒绝后的编辑
|
this.isrefuseedit = true;
|
}
|
}
|
},
|
|
mounted() {
|
var me = this;
|
//预加载数据
|
if (this.dataRequest && this.dataRequest.length) {
|
var result = {};
|
this.loadRequestData(this.dataRequest, result, function(data) {
|
me.dataRequestObj = data;
|
//预加载数据后给哪些字段设置options或formatterjson
|
console.log("预加载", data);
|
if (me.dataRequestObj.property) {
|
me.propertyFieldMap = {};
|
me.dataRequestObj.property.map(r=>{
|
r.name = r.label_chinese
|
me.propertyFieldMap[r.field] = r;
|
})
|
}
|
me.initData();
|
});
|
}
|
else {
|
this.initData();
|
}
|
|
// 以服务的方式调用的 Loading 需要异步关闭
|
this.$nextTick(() => {
|
hideLoading();
|
|
//重新设置弹窗宽高
|
// this.$nextTick(function(){
|
// //let w_ = this.$refs.popup_body.offsetWidth "px";
|
// let w_ = "900px";
|
// let h_ = this.$refs.popup_body.offsetHeight + "px";
|
// Root.setPopupWH(w_, h_);
|
// })
|
});
|
},
|
|
methods:{
|
//关闭弹窗
|
closeDialog() {
|
var me = this;
|
if (me.popupParames.totab){
|
Root.tab.removeItem(Root.tab.selected);
|
Root.tab.open(me.popupParames.parentOption, false);
|
}
|
else {
|
Root.hidePopup();
|
}
|
},
|
//关闭前调回调
|
saveAfter() {
|
var me = this;
|
if(this.popupParames.callback) {
|
let obj = {
|
//row: this.formData
|
}
|
this.popupParames.callback(obj, function() {
|
me.closeDialog();
|
});
|
}
|
else {
|
me.closeDialog();
|
}
|
},
|
|
initData() {
|
let me = this
|
var id_ = null;
|
if (this.formData.id) {
|
id_ = this.formData.id;
|
}
|
this.getRowDataById(id_, function(result) {//查询后的回调，用于获取字段的
|
if (result.meta && result.meta[me.dataname] && result.meta[me.dataname].fields) {
|
var metas = clone(result.meta[me.dataname].fields);
|
var table_dataname_ = "";
|
for (var dataname_ in result.meta) {
|
if (dataname_ != me.dataname && !table_dataname_) {
|
table_dataname_ = dataname_;
|
}
|
}
|
var table_metas = [];
|
if (table_dataname_) {
|
me.table_dataname = table_dataname_;
|
table_metas = clone(result.meta[table_dataname_].fields);
|
}
|
|
var formFields_ = [];
|
var tableFields_ = [];
|
metas.map(f=>{
|
f.isshow = "T";
|
if (f.field == "source_agreement_id") {
|
f.options = me.dataRequestObj.agm_record_type;
|
}
|
if (f.field == "source_flow_id") {
|
f.options = me.dataRequestObj.fee_model_band;
|
}
|
|
formFields_.push(clone(f));
|
})
|
table_metas.map(f=>{
|
f.isshow = "T";
|
tableFields_.push(clone(f));
|
})
|
|
if (!me.formFields || (me.formFields && me.formFields.length == 0)) {
|
me.formFields = clone(formFields_);
|
// me.formFields = clone(me.default_formFields);
|
|
me.tableFields = clone(tableFields_);
|
|
//字段数组转字段obj
|
me.fieldsToFieldsObj();
|
|
//设置字段事件
|
me.tableFieldClick();
|
}
|
}
|
me.activeName = "tab_zdpz";
|
if (me.rowData[me.dataname]) {
|
me.formData = me.rowData[me.dataname];
|
}
|
if (me.rowData[me.table_dataname]) {
|
// me.tableData = me.rowData[me.table_dataname];
|
var guidelineArray_ = clone(me.rowData[me.table_dataname]);
|
var guidelineArray_width_ = 0;
|
guidelineArray_.map(r=>{
|
r.field = r.field_name;
|
r.name = r.field_label;
|
r.width = me.propertyFieldMap[r.field].width;
|
guidelineArray_width_ += r.width;
|
r.record = [];
|
r.flow = [];
|
if (r.agm_field_name) {
|
var fr_ = {
|
field: r.agm_field_name,
|
name: r.agm_field_label
|
}
|
r.record = [fr_];
|
}
|
if (r.flow_field_name) {
|
var ff_ = {
|
field: r.flow_field_name,
|
name: r.flow_field_label
|
}
|
r.flow = [ff_];
|
}
|
|
})
|
me.guidelineArray = guidelineArray_
|
me.guidelineArray_width = guidelineArray_width_;
|
}
|
})
|
},
|
|
tableFieldClick() {
|
var me = this;
|
//表单字段事件设置
|
this.formfieldClick = {};
|
|
//表格字段事件设置
|
this.tablefieldClick = {};
|
},
|
recordEnd(e) {
|
|
},
|
flowEnd(e) {
|
|
},
|
end1(e){
|
// console.log(e)
|
// var that=this;
|
// var items=this.formFields.filter(function(m){
|
// return m.id==that.moveId
|
// })
|
// //如果左边
|
// if(items.length<2) return;
|
// this.formFields.splice(e.newDraggableIndex, 1)
|
},
|
|
onMove(e,originalEvent){
|
// this.moveId = e.relatedContext.element.id;
|
// //不允许停靠
|
// if (e.relatedContext.element.id == 1) return false;
|
// //不允许拖拽
|
// if (e.draggedContext.element.id == 4) return false;
|
// if (e.draggedContext.element.id == 11) return false;
|
// return true;
|
},
|
onMoveGuideline(e,originalEvent) {
|
// //不允许拖拽
|
// if (e.draggedContext.element.id == "add_field") return false;
|
// return true;
|
},
|
guidelineClone(e,originalEvent) {
|
var aa = "";
|
console.log(e)
|
},
|
|
onMove_record(e,originalEvent) {
|
|
},
|
remove_g(array, row) {
|
array.remove(row);
|
},
|
|
btnOperate(operate) {
|
switch (operate) {
|
case "add":
|
this.$refs.formula_txt.innerText += " + ";
|
this.$refs.formula_txt.focus();
|
this.setFocusEnd(this.$refs.formula_txt);
|
return;
|
case "jian":
|
this.$refs.formula_txt.innerText += " - ";
|
this.$refs.formula_txt.focus();
|
this.setFocusEnd(this.$refs.formula_txt);
|
return;
|
case "cheng":
|
this.$refs.formula_txt.innerText += " * ";
|
this.$refs.formula_txt.focus();
|
this.setFocusEnd(this.$refs.formula_txt);
|
|
return;
|
case "divide":
|
this.$refs.formula_txt.innerText += " / ";
|
this.$refs.formula_txt.focus();
|
this.setFocusEnd(this.$refs.formula_txt);
|
|
return;
|
|
case "sum":
|
return alert("sum");
|
case "avg":
|
return alert("avg");
|
case "if":
|
//点击if生成一棵数
|
//this.treeDataList = this.if_else;
|
this.addNodeByIf();
|
|
return;
|
case "elseif":
|
//点击在树中插入节点
|
this.addNodeByElseIf();
|
|
return;
|
case "saveNode":
|
let me = this;
|
var value_ = me.$refs.formula_txt.innerText;
|
|
me.nodeInfo.data.value = me.formulaToValueA(value_);
|
return;
|
case "clear":
|
this.$refs.formula_txt.innerText = "";
|
this.$refs.formula_txt.focus();
|
return;
|
default:
|
return alert("error");
|
}
|
},
|
setFocusEnd(node) {
|
var range = document.createRange();
|
range.selectNodeContents(node);
|
range.collapse(false);
|
var sel = window.getSelection();
|
sel.removeAllRanges();
|
sel.addRange(range);
|
},
|
checkNode() {
|
let e = window.event || arguments[0];
|
|
if (e.key == "Shift") {
|
return;
|
}
|
|
if (window.getSelection) {
|
var sel = window.getSelection();
|
this.range = sel.getRangeAt(0);
|
|
var range_ = this.range.endContainer;
|
var formula_txt = this.$refs.formula_txt;
|
var areaTxt = this.$refs.formula_txt.innerText;
|
|
var l = 0;
|
var t = 0;
|
var w = 0;
|
|
var divW = 0;
|
|
l = range_.parentElement.offsetLeft + 260;
|
t = range_.parentElement.offsetTop;
|
w = range_.parentElement.offsetWidth;
|
|
divW = range_.parentElement.parentElement.offsetWidth;
|
|
var range2_ = this.range.endOffset;
|
var range_data = range_.data;
|
|
if (areaTxt.substring(areaTxt.length - 1, areaTxt.length) == "@") {
|
var that = this;
|
|
that.p_zz_show = true;
|
var p_zz = that.$refs.p_zz.$el;
|
p_zz.style.top = t + 30 + "px";
|
|
if ((l + 10 + w) / divW > 1) { //(divW * 2)
|
p_zz.style.top = t + 45 + "px";
|
p_zz.style.left = this.$refs.formula_txt.offsetLeft + divW - w + 40 + "px";
|
} else {
|
p_zz.style.left = (l + 10 + w) % (divW * 2) + "px";
|
}
|
|
//that.$refs.p_zz.$el.children[0].children[0].children[0].children[0].click();
|
setTimeout(function() {
|
that.$refs.p_zz.$el.children[0].children[0].children[0].children[0].focus();
|
}, 400);
|
}
|
}
|
},
|
|
insert_node() {
|
let e = window.event || arguments[0];
|
|
if (e.key == "Shift") {
|
return;
|
}
|
|
if (window.getSelection) {
|
var sel = window.getSelection();
|
this.range = sel.getRangeAt(0);
|
|
var range_ = this.range.endContainer;
|
var formula_txt = this.$refs.formula_txt;
|
var areaTxt = this.$refs.formula_txt.innerText;
|
|
var l = 0;
|
var t = 0;
|
var w = 0;
|
|
var divW = 0;
|
if (formula_txt.children.length > 0) {
|
l = range_.parentElement.offsetLeft + 260;//
|
t = range_.parentElement.offsetTop;
|
w = range_.parentElement.offsetWidth;
|
|
divW = range_.parentElement.parentElement.offsetWidth;
|
|
if (range_.parentElement.localName == "div" && e.key != "Backspace") {
|
var node = document.createElement("span");
|
node.innerHTML = range_.data;
|
this.range.insertNode(node);
|
}
|
} else {
|
l = range_.parentElement.offsetLeft + 260;
|
t = range_.parentElement.offsetTop;
|
w = range_.parentElement.offsetWidth;
|
|
// if (range_.data == undefined) {
|
// return;
|
// }
|
|
//formula_txt.innerHTML = "";
|
var node = document.createElement("span");
|
node.innerHTML = range_.data;
|
this.range.insertNode(node);
|
}
|
|
var range2_ = this.range.endOffset;
|
var range_data = range_.data;
|
|
//if (range_data && (e.key == "@" || range_data.substring(range_data.length - 1, range_data.length) == "@")) {
|
if (range_data && (e.key == "@" || areaTxt.substring(areaTxt.length - 1, areaTxt.length) == "@")) {
|
var that = this;
|
|
that.p_zz_show = true;
|
var p_zz = that.$refs.p_zz.$el;
|
p_zz.style.top = t + 30 + "px";
|
|
if ((l + 10 + w) / divW > 1) { //(divW * 2)
|
p_zz.style.top = t + 45 + "px";
|
p_zz.style.left = this.$refs.formula_txt.offsetLeft + divW - w + 40 +
|
"px"; //(l + 10 + w) % 636 + divW/w + "px";
|
} else {
|
p_zz.style.left = (l + 10 + w) % (divW * 2) + "px";
|
}
|
|
//that.$refs.p_zz.$el.children[0].children[0].children[0].children[0].click();
|
setTimeout(function() {
|
that.$refs.p_zz.$el.children[0].children[0].children[0].children[0].focus();
|
}, 400);
|
}
|
}
|
},
|
|
formulaTreeClickNode(evt) {
|
//单击将内容显示到编辑器中
|
var node = evt.node;
|
var data = evt.data;
|
var node_e = node.currentTarget;
|
var obj = document.getElementById('formula_edit');
|
obj.innerHTML = "";
|
obj.focus();
|
this.setFocusEnd(obj);
|
|
var sel = window.getSelection();
|
var rg = this.range = sel.getRangeAt(0);
|
|
if (data.value && data.value.length) {
|
|
var value_ = clone(data.value);
|
var regString = /[a-zA-Z]+/;
|
var chString = /.*[\u4e00-\u9fa5]+.*$/;//汉字
|
|
for (var i=value_.length - 1; i > -1; i--) {
|
var e = value_[i];
|
if (regString.test(e)) {
|
var node_a = document.createElement("span");
|
var node_c = document.createElement("span");
|
|
if (e.indexOf(")") != -1) {
|
e = e.replace(/\)/g, "");
|
node_c.innerHTML = ')';
|
this.range.insertNode(node_c);
|
}
|
if (e.indexOf("(") != -1) {
|
e = e.replace(/\(/g, "");
|
node_a.innerHTML = '(';
|
}
|
|
var node = document.createElement("span");
|
|
node.setAttribute("contenteditable", false);
|
node.innerHTML = " @" + e + " "
|
this.range.insertNode(node);
|
|
this.range.insertNode(node_a);
|
}
|
|
else if(chString.test(e)) {
|
var node_a = document.createElement("span");
|
var node_c = document.createElement("span");
|
|
if (e.indexOf(")") != -1) {
|
e = e.replace(/\)/g, "");
|
node_c.innerHTML = ')';
|
this.range.insertNode(node_c);
|
}
|
if (e.indexOf("(") != -1) {
|
e = e.replace(/\(/g, "");
|
node_a.innerHTML = '(';
|
}
|
|
var node = document.createElement("span");
|
|
node.setAttribute("contenteditable", false);
|
node.innerHTML = " @" + e + " "
|
this.range.insertNode(node);
|
|
this.range.insertNode(node_a);
|
}
|
else {
|
var node = document.createElement("span");
|
node.innerHTML = e;
|
this.range.insertNode(node);
|
}
|
}
|
}
|
|
obj.focus();
|
this.setFocusEnd(obj);
|
|
var node = document.createElement("span");
|
node.innerHTML = "";
|
this.range.insertNode(node);
|
|
//this.selectFormulaNode = node_e;
|
|
//this.nodeInfo.node_id = node_e.parentElement.getAttribute("data-id");
|
//this.nodeInfo.node = node_e;
|
this.nodeInfo.data = data;
|
},
|
////
|
addTableData() {
|
var new_field = {id: uuid(),record: [], flow: [], field: createBaseCode("field"), name: '新字段'};
|
this.guidelineArray.unshift(new_field);
|
|
// var table_row = clone(this.newTableData);
|
// this.rowChange(table_row, "add", this.table_dataname);
|
},
|
|
//提交
|
saveRowTable() {
|
var aa = this.guidelineArray;
|
console.log("参数", aa);
|
},
|
}
|
});
|
};
|
|
loadJsCss(function () {
|
initVue();
|
});
|
</script>
|
<style>
|
/* 在vue.js中 v-cloak 这个指令是防止页面加载时出现 vuejs 的变量名而设计的 */
|
[v-cloak] {
|
display: none !important;
|
}
|
</style>
|
<style scoped>
|
.field_title {
|
height: 40px;
|
line-height: 40px;
|
font-size: 14px;
|
}
|
|
.item {
|
/* padding: 6px 0px; */
|
height: 28px;
|
line-height: 28px;
|
background-color: #fdfdfd;
|
border: solid 1px #eee;
|
/* margin-bottom: 10px; */
|
cursor: move;
|
text-align: center;
|
display: inline-block;
|
}
|
.item:hover {
|
background-color: #f1f1f1;
|
cursor: move;
|
}
|
|
.field_list {
|
border: 1px solid #ccc;
|
overflow: auto;
|
}
|
.field_list .item span{
|
padding-left: 10px;
|
}
|
.el-icon-delete:hover {
|
/* font-size: 16px; */
|
cursor: pointer;
|
}
|
.guideline_ghost {
|
padding: 0px;
|
/* height: 10px !important; */
|
overflow: hidden;
|
/* background-color: #42adef !important;
|
color: #42adef !important; */
|
}
|
.el-divider--horizontal {
|
margin: 14px 0px !important;
|
}
|
|
</style>
|
|
<style>
|
.page {
|
position: absolute;
|
left: 10px;
|
right: 10px;
|
top: 10px;
|
bottom: 10px;
|
overflow-x: hidden;
|
overflow-y: auto;
|
}
|
|
.page_border {
|
border: 1px solid #ccc;
|
}
|
|
.tree_txt {
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
|
width: 180px;
|
}
|
|
.tree_node {
|
max-width: 120px;
|
}
|
|
.tree_txt_val {
|
margin-left: 10px;
|
}
|
|
.page_excel {}
|
|
.page_excel .selected_header,
|
.page_excel .selected_header th {
|
background-color: #a8d5a8;
|
}
|
|
.page_excel .selected_header {
|
border-left: 2px solid #23872b;
|
border-right: 2px solid #23872b;
|
box-sizing: border-box;
|
}
|
|
.page_excel .selected_row {
|
background-color: #4ad54a;
|
}
|
|
.page_excel .selected_cell {
|
background-color: #4ad54a;
|
}
|
|
.page_excel .excel_header {
|
display: inline-block;
|
}
|
|
.excel_row_watchpoint th {}
|
.excel_row_watchpoint .row_watchpoint{
|
padding: 0px;
|
width: 20px;
|
text-align: center;
|
background-color: #f7f7f7;
|
}
|
|
.excel_button th {
|
background-color: #dfead6 !important;
|
color: #83ad65;
|
font-size: 20px;
|
border-left: 1px solid #ccc;
|
}
|
|
/* .excel_button td {
|
//border-right: 1px solid #ccc0 !important;
|
//border-bottom: 1px solid #ccc0 !important;
|
} */
|
|
.excel_button th:hover {
|
cursor: pointer;
|
color: #719557;
|
background-color: #b8d09f !important;
|
}
|
|
.page_excel tr {
|
height: 24px;
|
}
|
|
.page_excel th {
|
height: 34px;
|
line-height: 34px;
|
padding: 0px 10px;
|
background-color: #eaeaea;
|
border-right: 1px solid #ccc;
|
border-bottom: 1px solid #ccc;
|
}
|
|
.page_excel .header_watchpoint {
|
height: 20px;
|
}
|
|
.page_excel .header_watchpoint td {
|
height: 20px;
|
text-align: center;
|
cursor: pointer;
|
background-color: #f7f7f7;
|
padding: 0px;
|
}
|
|
.page_excel .add_field {}
|
|
.page_excel .add_field input {
|
margin-bottom: 0px !important;
|
}
|
|
.page_excel th:hover {
|
cursor: pointer;
|
}
|
|
.page_excel td {
|
height: 28px;
|
border-right: 1px solid #ccc;
|
border-bottom: 1px solid #ccc;
|
|
padding: 2px 8px;
|
box-sizing: border-box;
|
|
font-size: 12px;
|
}
|
|
.card_excelmenu {
|
z-index: 999;
|
position: absolute;
|
background: white;
|
}
|
|
.card_excelmenu .el-card__body {
|
padding: 0px;
|
}
|
|
.card_excelmenu .card_button {
|
padding: 5px;
|
}
|
|
.ghost {
|
border-left: 3px solid #0090FF;
|
border-right: 3px solid #0090FF;
|
}
|
|
.header_item {
|
cursor: move;
|
}
|
|
#formula_edit:focus {
|
outline: 0;
|
border-color: #409EFF !important;
|
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(82 168 236 / 60%);
|
}
|
|
#delbtn {
|
display: none;
|
width: 10px;
|
right: 0;
|
top: 0;
|
margin-left: 2px;
|
padding-left: 1px;
|
}
|
|
#delbtn:after {
|
/* content: "-"; */
|
color: red;
|
/* font: bold 40px 'Microsoft Yahei'; */
|
}
|
|
.tree_txt:hover #delbtn {
|
display: inline-block;
|
}
|
|
.tree_txt:hover {
|
cursor: pointer;
|
}
|
|
.el-cascader-node:focus {
|
color: #409EFF;
|
background-color: #00FFFF;
|
}
|
.formula_tool {
|
box-shadow: 0px 1px 3px rgba(34, 25, 25, 0.2);
|
text-align: right;
|
width: 100%;
|
background-color: #ea8d110a;
|
font-family: Microsoft Yahei;
|
font-weight: bold;
|
margin: 0px;
|
height: 40px;
|
box-sizing: border-box;
|
}
|
.formula_tool .el-button--primary {
|
color: #FFF;
|
background-color: #6ab5e3;
|
border-color: #3c8dbc;
|
}
|
.formula_tool .el-button--primary:hover {
|
background-color: #92c4e3;
|
border-color: #3c8dbc;
|
}
|
.formula_notedit {
|
color: #d5d5d4;
|
background-color: #f1f1f1;
|
width: 100%;
|
height: 30px;
|
line-height: 30px;
|
margin-top:5px;
|
padding: 0px 5px;
|
box-sizing: border-box;
|
|
}
|
.formula_edit {
|
word-break: break-all;
|
width: 100%;
|
height: 30px;
|
line-height: 28px;
|
margin-top:5px;
|
border-top: 1px solid #ccc;
|
border-bottom: 1px solid #ccc;
|
padding: 0px 5px;
|
overflow: auto;
|
box-sizing: border-box;
|
}
|
.formula_tree {
|
width: 100%;
|
overflow: auto;
|
margin-top: 5px;
|
padding: 5px;
|
box-sizing: border-box;
|
}
|
|
.tree_txt_val_fh {
|
background-color: #e8b966;
|
}
|
|
|
.left_tree .tree_node {
|
font-weight: 100;
|
border-radius: 11px !important;
|
background-color: #f4f4f5 !important;
|
border: 1px solid #b9b9ba;
|
}
|
|
.left_tree .tree_root {
|
background-color: #dededf !important;
|
}
|
|
.left_tree .parent_li {
|
padding: 2px 5px 0 5px;;
|
}
|
.left_tree > ul >.parent_li {
|
padding: 10px 5px 0 5px;
|
}
|
|
.left_tree li::after {
|
top: 15px !important;
|
}
|
|
.left_tree li:last-child::before {
|
height: 20px;
|
}
|
|
.tree .selected_node {
|
background-color: #aad8f4 !important;
|
}
|
|
.tree .tree_dragnode {
|
float: right;
|
text-align: center;
|
display: inline-block;
|
}
|
|
.tree .tree_dragnode:hover {
|
cursor: move;
|
color: #00B0F0;
|
}
|
|
.el-tabs__header {
|
margin: 0;
|
}
|
|
</style>
|
</head>
|
|
<body style="margin: 0px;">
|
<div v-cloak id="vbody">
|
<div id="page_root">
|
<div ref="popup_body" style="padding: 0 20px;">
|
<div class="el-dialog__header">
|
<div class="dialog-title">
|
<span> {{title}}</span>
|
</div>
|
</div>
|
<div :style="{height: tableHeight + 'px', 'overflow-y': 'auto'}">
|
<div class="el-dialog__body">
|
<h-form
|
ref="form1"
|
:form-attr="formAttr"
|
:table-fields="formFields"
|
:form-data="formData"
|
:table-field-click="formfieldClick"
|
>
|
</h-form>
|
|
<div class="h_dialog__body">
|
<div v-if="isedit || isrefuseedit" style=" text-align: right;">
|
<!-- 工具栏 -->
|
<!-- <div style=" display: inline-block; width: 90px;">
|
<el-button-group>
|
<el-button @click="addTableData">新增明细</el-button>
|
</el-button-group>
|
</div> -->
|
</div>
|
<el-tabs v-model="activeName">
|
<el-tab-pane label="备忘录公式定义" name="tab_zdpz"></el-tab-pane>
|
</el-tabs>
|
|
<div v-show="activeName" :style="{height: (tableHeight - 180) + 'px', width: '100%'}">
|
<div :style="{height: (tableHeight - 180) + 'px', width: '100%', margin: '0 auto'}">
|
<div :style="{height: 60 + 'px', border: '1px dashed #ccc', overflow: 'auto', width: '100%'}" >
|
<draggable v-model="guidelineArray" ghost-class="guideline_ghost" group="guideline" @end="end1" @add="guidelineClone" :move="onMoveGuideline"
|
:options="{group:{name: 'itxst'},sort: true}" animation="300">
|
<transition-group :style="{height: 30 + 'px', width: guidelineArray_width + 100 + 'px', 'background-color': '#eee', display: 'block'}">
|
<div class="item" v-for="(item, index1) in guidelineArray" :key="'g'+index1" :style="{width: item.width + 'px'}">{{item.name}}
|
<!-- <el-input size="mini" placeholder="请输入字段名称" style="width: 80%;" v-model="item.name"></el-input> -->
|
</div>
|
</transition-group>
|
</draggable>
|
</div>
|
<div :style="{height: (tableHeight - 180 - 80) + 'px', border: '1px dashed #ccc', width: '100%'}">
|
<div style=" margin-top: 4px;margin-left: 2px;">
|
<el-button-group>
|
<el-tooltip content="加" placement="top" effect="light" :hide-after="500">
|
<el-button type="primary" @click="btnOperate('add')">+</el-button>
|
</el-tooltip>
|
|
<el-tooltip content="减" placement="top" effect="light" :hide-after="500">
|
<el-button type="primary" @click="btnOperate('jian')">-</el-button>
|
</el-tooltip>
|
|
<el-tooltip content="乘" placement="top" effect="light" :hide-after="500">
|
<el-button type="primary" @click="btnOperate('cheng')">×</el-button>
|
</el-tooltip>
|
|
<el-tooltip content="除" placement="top" effect="light" :hide-after="500">
|
<el-button type="primary" @click="btnOperate('divide')">÷</el-button>
|
</el-tooltip>
|
|
<!-- <el-tooltip content="汇总" placement="top" effect="light" :hide-after="500">
|
<el-button type="primary" @click="btnOperate('sum')">
|
<svg class="icon" aria-hidden="true" style="height: 10px;width: 10px;">
|
<use xlink:href="#el_icon_sum"></use>
|
</svg>
|
</el-button>
|
</el-tooltip>
|
|
<el-tooltip content="平均" placement="top" effect="light" :hide-after="500">
|
<el-button type="primary" @click="btnOperate('avg')">
|
<svg class="icon" aria-hidden="true" style="height: 10px;width: 10px;">
|
<use xlink:href="#el_icon_pingjunzhi"></use>
|
</svg>
|
</el-button>
|
</el-tooltip> -->
|
|
<el-tooltip content="if" placement="top" effect="light" :hide-after="500">
|
<el-button type="primary" @click="btnOperate('if')">if</el-button>
|
</el-tooltip>
|
|
<el-tooltip content="elseif" placement="top" effect="light"
|
:hide-after="500">
|
<el-button type="primary" @click="btnOperate('elseif')">elseif</el-button>
|
</el-tooltip>
|
</el-button-group>
|
|
<el-button-group>
|
<el-tooltip content="保存节点" placement="top" effect="light" :hide-after="500">
|
<el-button type="primary" @click="btnOperate('saveNode')" >√
|
<!-- <svg class="icon" aria-hidden="true" style="height: 10px;width: 10px;">
|
<use xlink:href="#el_icon_baocun1"></use>
|
</svg> -->
|
</el-button>
|
</el-tooltip>
|
|
<el-tooltip content="清空" placement="top" effect="light" :hide-after="500">
|
<el-button type="primary" @click="btnOperate('clear')">清空
|
<!-- <svg class="icon" aria-hidden="true" style="height: 10px;width: 10px;">
|
<use xlink:href="#el_icon_clear"></use>
|
</svg> -->
|
</el-button>
|
</el-tooltip>
|
|
</el-button-group>
|
</div>
|
|
|
<!-- <div v-show="!iseditformula " class="formula_notedit">
|
请选择需要添加公式的字段
|
</div> -->
|
<!-- @keydown="insert_node" @keyup="checkNode" -->
|
<div id="formula_edit" ref="formula_txt" contenteditable="true" @keydown="insert_node" @keyup="checkNode"
|
class="formula_edit" >
|
</div>
|
|
<!--公式树形图-->
|
<div class="formula_tree"
|
:style="{height: (tableHeight - 180 - 80 - 80) + 'px'}">
|
<h-tree
|
:datalist="treeDataList"
|
:isdrag="false"
|
:isclicknodeevent="true"
|
:nodelineheight="node_lineheight2"
|
|
v-on:click-node="formulaTreeClickNode"
|
></h-tree>
|
</div>
|
</div>
|
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="el-dialog__footer">
|
<el-button size="small" type="default" @click="closeDialog">取 消</el-button>
|
<el-button size="small" v-if="isedit || isrefuseedit" type="primary" @click="saveRowTable":icon="buttonsconfig.save.icon">{{buttonsconfig.save.name}}</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 50vh;">
|
<div class="spinner">
|
<div class="cube1"></div>
|
<div class="cube2"></div>
|
</div>
|
</div>
|
</body>
|
</html>
|
