vue-apps/com.actionsoft.apps.coe.pal/src/views/method/MethodAttribute.vue
2022-06-28 10:09:47 +08:00

1348 lines
63 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<awsui-layout id="methodAttribute" :style="{height: mainHeight}">
<awsui-aside class="attr-aside" width="280px">
<div style="height: 60px;line-height: 60px;text-align: center;">
<awsui-button style="width: 130px;" :disabled="createBtnDisabled" :class="{'button-general-color': !createBtnDisabled}" type="primary" @click="createAttrDefine">新建属性</awsui-button>
</div>
<div>
<div style="border-bottom: 1px solid #F0F0F0;"></div>
</div>
<div :style="{'overflow': 'auto', 'height': treeHeight}">
<el-tree
ref="tree"
v-loading="tree.loading"
:element-loading-text="tree.loadingText"
:data="tree.data"
:props="tree.props"
:highlight-current=true
:expand-on-click-node=false
@node-click="handleNodeClick"
node-key="id"
:default-expanded-keys="tree.defaultExpandedKeys">
<span slot-scope="{node, data}">
<i class="awsui-iconfont tree-content-icon tree-content-icon-padding" :style="{'color': data.iconColor}" v-html="node.data.iconCode"></i>
<span>{{node.label}}</span>
<span v-if="methodDataType != 'all' && data.type == 'attr'"><i class="awsui-iconfont" :style="{'margin-left': '3px','font-size':'13px','color': data.isUse ? '#00CC00' : '#DDDDDD'}">&#xe6d5;</i></span>
</span>'
</el-tree>
</div>
</awsui-aside>
<awsui-main style="height: 100%;position: relative;">
<div v-if="methodDataType == 'all'" :key="key1">
<el-table
:height="(parseInt(mainHeight) - 20 + 'px')"
:data="tableData"
v-loading="loading"
:element-loading-text="loadingText"
:row-style="{height:'50px'}"
:cell-style="{padding:'0px'}"
@cell-click="updateAttrDefine"
style="width: 100%">
<el-table-column
prop="no"
label="序号"
width="80"
align="center"/>
<el-table-column
prop="title"
label="属性名称"
width="180"/>
<el-table-column
prop="key"
label="属性代码"
width="180"/>
<el-table-column
prop="typeName"
label="属性类型"
width="180"/>
<el-table-column
prop="refName"
label="关联内容"
width="180"/>
<el-table-column
prop="groupPathName"
label="所属目录"
width="160"/>
<el-table-column
prop="value"
label="默认值"
width="120"/>
<el-table-column
prop="scopeName"
label="作用范围"
min-width="180"/>
<el-table-column
prop="readonly"
label="是否只读"
width="80"
align="center">
<template slot-scope="scope">
<awsui-switch
v-model="scope.row.readonly"
active-color="#4E7FF9"
inactive-color="#E2E2E2"
:disabled="scope.row.type == 'relation' || scope.row.type == 'awsorg'"
@change="handleChangeReadonlyAndValid(scope.row.id, scope.row.title, scope.row.readonly,scope.row.isRequired, scope.row.isValid)">
</awsui-switch>
</template>
</el-table-column>
<el-table-column
prop="readonly"
label="是否必填"
width="80"
align="center">
<template slot-scope="scope">
<awsui-switch
v-model="scope.row.isRequired"
active-color="#4E7FF9"
inactive-color="#E2E2E2"
@change="handleChangeReadonlyAndValid(scope.row.id, scope.row.title, scope.row.readonly,scope.row.isRequired, scope.row.isValid)">
</awsui-switch>
</template>
</el-table-column>
<el-table-column
prop="isValid"
label="是否有效"
width="80"
align="center">
<template slot-scope="scope">
<awsui-switch
v-model="scope.row.isValid"
active-color="#4E7FF9"
inactive-color="#E2E2E2"
@change="handleChangeReadonlyAndValid(scope.row.id, scope.row.title, scope.row.readonly,scope.row.isRequired, scope.row.isValid)">
</awsui-switch>
</template>
</el-table-column>
<el-table-column
prop="operation"
label="操作"
width="50">
<template slot-scope="scope">
<div class="operate-icon-display">
<i class="el-icon-delete" style="cursor: pointer;" @click.stop="removeAttr(scope.row.id, scope.row.title)"></i>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div v-if="methodDataType == 'file'" class="attr" :key="key2">
<el-table
row-key="id"
:height="(parseInt(mainHeight) - 20 + 'px')"
v-loading="loading"
:element-loading-text="loadingText"
:data="tableData"
:row-style="{height:'50px'}"
:cell-style="{padding:'0px'}"
@cell-mouse-enter="handleAttrMouseEnter"
@cell-mouse-leave="handleAttrMouseLeave"
style="width: 100%">
<el-table-column
prop="move"
label=""
align="center"
width="20">
<template slot-scope="scope">
<div class="operate-icon-display">
<p class="text-second-color">
<i style="display: inline-block;cursor: pointer;" class="awsui-iconfont">&#xe785;</i>
</p>
</div>
</template>
</el-table-column>
<el-table-column
prop="no"
label="排序"
width="80"
align="center"/>
<el-table-column
prop="key"
label="属性代码"
width="180"/>
<el-table-column
prop="title"
label="属性名称(默认)"
width="180"/>
<el-table-column
prop="newTitle"
label="属性名称"
width="180">
<template slot-scope="scope">
<awsui-input v-if="scope.row.isUpdate" class="input-update-attr-name" v-model="scope.row.newTitle" @input="updateAttrDbInfo(scope.row.id, scope.row.newTitle, scope.row.sort)" placeholder="请输入新的属性名称"></awsui-input>
<span v-else>{{scope.row.newTitle}}</span>
</template>
</el-table-column>
<el-table-column
prop="typeName"
label="属性类型"
width="180"/>
<el-table-column
prop="refName"
label="关联内容"
width="180"/>
<el-table-column
prop="value"
label="默认值"
width="150"/>
<el-table-column
prop="readonly"
label="只读"
width="100"
align="center">
<template slot-scope="scope">
{{scope.row.readonly ? "是" : "否"}}
</template>
</el-table-column>
<el-table-column
prop="groupPathName"
label="所属目录"
width="160"/>
<el-table-column
prop="scopeName"
label="作用范围"
min-width="200"/>
<el-table-column v-if="methodId=='process.bpmn2'"
prop="bpmFileShow"
label="审批显示"
width="100"
align="center">
<template slot-scope="scope">
<awsui-switch
v-model="scope.row.bpmFileShow"
active-color="#4E7FF9"
inactive-color="#E2E2E2"
@change="handleChangeBpmShow(scope.row.id, scope.row.title, scope.row.bpmFileShow, 'bpmFileShow')">
</awsui-switch>
</template>
</el-table-column>
</el-table>
</div>
<div v-if="methodDataType == 'shape'" class="attr" :key="key3">
<el-table
row-key="id"
:height="(parseInt(mainHeight) - 20 + 'px')"
v-loading="loading"
:element-loading-text="loadingText"
:data="tableData"
:row-style="{height:'50px'}"
:cell-style="{padding:'0px'}"
@cell-mouse-enter="handleAttrMouseEnter"
@cell-mouse-leave="handleAttrMouseLeave"
style="width: 100%">
<el-table-column
prop="move"
label=""
align="center"
width="20">
<template slot-scope="scope">
<div class="operate-icon-display">
<p class="text-second-color">
<i style="display: inline-block;cursor: pointer;" class="awsui-iconfont">&#xe785;</i>
</p>
</div>
</template>
</el-table-column>
<el-table-column
prop="no"
label="排序"
width="80"
align="center"/>
<el-table-column
prop="key"
label="属性代码"
width="180"/>
<el-table-column
prop="title"
label="属性名称(默认)"
width="180"/>
<el-table-column
prop="newTitle"
label="属性名称"
width="180">
<template slot-scope="scope">
<awsui-input v-if="scope.row.isUpdate" class="input-update-attr-name" v-model="scope.row.newTitle" @input="updateAttrDbInfo(scope.row.id, scope.row.newTitle, scope.row.sort)" placeholder="请输入新的属性名称"></awsui-input>
<span v-else>{{scope.row.newTitle}}</span>
</template>
</el-table-column>
<el-table-column
prop="typeName"
label="属性类型"
width="180"/>
<el-table-column
prop="refName"
label="关联内容"
width="180"/>
<el-table-column
prop="value"
label="默认值"
width="120"/>
<el-table-column
prop="readonly"
label="只读"
width="100"
align="center">
<template slot-scope="scope">
{{scope.row.readonly ? "是" : "否"}}
</template>
</el-table-column>
<el-table-column
prop="groupPathName"
label="所属目录"
width="160"/>
<el-table-column
prop="scopeName"
label="作用范围"
min-width="200"/>
<el-table-column v-if="methodId=='process.bpmn2'"
prop="bpmShapeShow"
label="审批显示"
width="100"
align="center">
<template slot-scope="scope">
<awsui-switch
v-model="scope.row.bpmShapeShow"
active-color="#4E7FF9"
inactive-color="#E2E2E2"
@change="handleChangeBpmShow(scope.row.id, scope.row.title, scope.row.bpmShapeShow, 'bpmShapeShow')">
</awsui-switch>
</template>
</el-table-column>
</el-table>
</div>
</awsui-main>
<!-- 属性弹框 -->
<awsui-sidebar
:title=drawer.title
:append-to-body=false
:modal-append-to-body=false
:destroy-on-close=true
:modal=false
:visible.sync="drawer.visible"
:before-close="handleDrawerClose">
<div v-loading="drawer.loading">
<div id="drawerBody" style="overflow-y: auto;margin: 20px 0 20px 20px;padding-left: 10px">
<awsui-form ref="attrForm" :model="attrForm" label-position="top" :rules="rules" style= "margin-right: 20px;">
<awsui-form-item label="属性代码" prop="key">
<awsui-input v-model="attrForm.key" :disabled="!attrForm.isCreate" placeholder="请输入属性代码,由数字、字母、下划线组成"></awsui-input>
</awsui-form-item>
<awsui-form-item label="属性名称" prop="title">
<awsui-input v-model="attrForm.title" placeholder="请输入属性名称"></awsui-input>
</awsui-form-item>
<awsui-form-item label="所属目录">
<awsui-select v-model="attrForm.groupPath" :options="attrForm.groupOpts"></awsui-select>
</awsui-form-item>
<awsui-form-item label="类型">
<awsui-select v-model="attrForm.type" :disabled="!attrForm.isCreate" :options="attrForm.typeOpts" @change="changeAttrType"></awsui-select>
</awsui-form-item>
<awsui-form-item label="属性描述" prop="desc">
<awsui-input v-model="attrForm.desc" placeholder="请输入属性描述"></awsui-input>
</awsui-form-item>
<!-- relation限制 -->
<template v-if="attrForm.type=='relation'">
<awsui-form-item label="关联的建模方法">
<awsui-select v-model="attrForm.relationRef.method" :options="attrForm.relationMethodScopeOpts" placeholder="请选择建模分类或建模方法"></awsui-select>
</awsui-form-item>
<awsui-form-item label="关联范围">
<awsui-select v-model="attrForm.relationRef.type" :options="attrForm.relationTypeOpts" placeholder="请选择关联范围"></awsui-select>
</awsui-form-item>
<awsui-form-item label="是否多选">
<awsui-select v-model="attrForm.relationRef.multiple" :options="attrForm.multipleOpts" placeholder="请选择关联范围"></awsui-select>
</awsui-form-item>
</template>
<!-- awsorg限制 -->
<template v-if="attrForm.type=='awsorg'">
<awsui-form-item label="BPM组织架构范围选择">
<awsui-select v-model="attrForm.awsorgRef.scope" multiple :options="attrForm.awsorgScopeOpts" multiple placeholder="请选择组织架构范围"></awsui-select>
</awsui-form-item>
<awsui-form-item label="是否多选">
<awsui-select v-model="attrForm.awsorgRef.multiple" :options="attrForm.multipleOpts" placeholder="请选择关联范围"></awsui-select>
</awsui-form-item>
</template>
<!-- select限制 -->
<template v-if="attrForm.type=='select'">
<awsui-form-item label="选择范围">
<awsui-input v-model="attrForm.ref" placeholder="请输入选择范围例如选项1,选项2,选项3"></awsui-input>
</awsui-form-item>
</template>
<!-- select_m限制 -->
<template v-if="attrForm.type=='select_m'">
<awsui-form-item label="选择范围">
<awsui-input v-model="attrForm.ref" placeholder="请输入选择范围例如选项1,选项2,选项3"></awsui-input>
</awsui-form-item>
</template>
<template v-if="attrForm.type=='string' || attrForm.type=='textarea'">
<awsui-form-item label="默认值" prop="value">
<awsui-input v-model="attrForm.value" placeholder="请输入属性默认值"></awsui-input>
</awsui-form-item>
</template>
<awsui-form-item label="">
<div
class="div-button-small"
:style="{'border-right': '0px','cursor':readOnlyCursor ? 'not-allowed':'', 'background-color': attrForm.readonly ? '#eef5fe' : '', 'color': attrForm.readonly ? '#4E7FF9' : ''}"
@click="(!readOnlyCursor) && changeReadOnly()"
>
<span>只读</span>
</div>
<div
class="div-button-small"
:style="{'border-right': '0px','background-color': attrForm.isRequired ? '#eef5fe' : '', 'color': attrForm.isRequired ? '#4E7FF9' : ''}"
@click="attrForm.isRequired = attrForm.isRequired ? false : true">
<span>必填</span>
</div>
<div
class="div-button-small"
:style="{'background-color': attrForm.isValid ? '#eef5fe' : '', 'color': attrForm.isValid ? '#4E7FF9' : ''}"
@click="attrForm.isValid = attrForm.isValid ? false : true">
<span>有效</span>
</div>
</awsui-form-item>
<awsui-form-item label="作用范围">
<div
class="div-button"
:style="{'border-right': '0px', 'background-color': attrForm.fileScope ? '#eef5fe' : '', 'color': attrForm.fileScope ? '#4E7FF9' : ''}"
@click="attrForm.fileScope = attrForm.fileScope ? false : true">
<span>文件属性</span>
</div>
<div
class="div-button"
:style="{'background-color': attrForm.shapeScope ? '#eef5fe' : '', 'color': attrForm.shapeScope ? '#4E7FF9' : ''}"
@click="attrForm.shapeScope = attrForm.shapeScope ? false : true">
<span>形状属性</span>
</div>
</awsui-form-item>
<awsui-form-item v-if="attrForm.shapeScope" label="形状选择">
<awsui-select v-model="attrForm.shapeScopeValue" placeholder="空值则等同于全选" clearable multiple :options="attrForm.shapeOpts"></awsui-select>
</awsui-form-item>
</awsui-form>
</div>
<div class="drawer-footer" :style="{'background-color': '#F2F2F2', height: drawer.footerHeight}">
<div id="drawerFooter" style="float: right;position: relative;top: 9px;">
<awsui-button size="large" style="width: 80px;" class="button-general-color" type="primary" :disabled="drawer.buttonDisabled" @click="saveDrawerData">保存</awsui-button>
<awsui-button size="large" style="width: 80px;" @click="closeDrawer">取消</awsui-button>
</div>
</div>
</div>
</awsui-sidebar>
</awsui-layout>
</template>
<script>
import awsuiAxios from "../../awsuiAxios";
import Sortable from 'sortablejs';
export default {
name: "MethodAttribute",
components: {Sortable},
props: {
parentHeaderHeight: {
type: String,
default: '0px'
},
methodId: {
type: String,
default: ''
},
methodName: {
type: String,
default: ''
},
searchInput: {
type: String,
default: ''
},
methodDataType: {// 数据查询类型,全部,文件属性,形状属性
type: String,
default: 'all'
}
},
data() {
return {
readOnlyCursor: false,
key1: Math.random(),
key2: Math.random(),
key3: Math.random(),
createBtnDisabled: false,
mainHeight: (parseInt(this.$store.getters.getTopMainHeightFn) - parseInt(this.parentHeaderHeight)) + 'px',
treeHeight: (parseInt(this.$store.getters.getTopMainHeightFn) - parseInt(this.parentHeaderHeight) - 61) + 'px',
loading: false,
loadingText: '加载中',
tree: {
data: [],
defaultExpandedKeys: [],
props: {
children: 'children',
label: 'label'
},
loading: false,
loadingText: '加载中'
},
tableData: [],
tableDataTemp: [],
nodeData: null,
drawer: {
title: '新增属性',
visible: false,
loading: false,
footerHeight: '50px',
buttonDisabled: false
},
attrForm: {
isCreate: true,// 是否新建
id: '',
key: '',
title: '',
newTitle: '',
type: '',
desc: '',
ref: '',
relationRef: {// 关联pal组织架构
method: '',
type: '',
multiple: 'false',
},
awsorgRef: {// 关联bpm组织架构
scope: [],
multiple: 'false'
},
value: '',
readonly: false,
isRequired: false,
isValid: true,
groupPathName: '',
groupPath: '',
fileScope: false,
shapeScope: false,
shapeScopeValue: [],
scopeName: '',
sort: '',
bpmFileShow: false,
bpmShapeShow: false,
typeOpts: [],
relationMethodScopeOpts: [],
relationTypeOpts: [],
awsorgScopeOpts: [],
multipleOpts: [
{
"label" : '多选',
"value" : "true"
},
{
"label" : '单选',
"value" : "false"// value为false select不识别改为字符串false
}
],
groupOpts: [],
shapeOpts: []
},
rules: {
key: [
{ required: true, message: '请输入属性代码', trigger: 'blur' },
{ min: 1, max: 255, message: '长度在 255 个字符以内', trigger: 'blur' }
],
title: [
{ required: true, message: '请输入属性名称', trigger: 'blur' },
{ min: 1, max: 255, message: '长度在 255 个字符以内', trigger: 'blur' }
],
value: [
{ required: false, message: '请输入属性名称', trigger: 'blur' },
{ min: 1, max: 255, message: '长度在 255 个字符以内', trigger: 'blur' }
],
desc: [
{ required: true, message: '请输入属性描述', trigger: 'blur' },
{ min: 1, max: 20, message: '长度在 20 个字符以内', trigger: 'blur' }
]
},
}
},
mounted() {
// 火狐浏览器拖拽问题
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
}
this.initTreeData();
},
methods: {
initTreeData() {// 初始化树
const that = this;
that.tree.loadingText = '加载中';
that.tree.loading = true;
const params = {
url:'jd',
data:{
cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_attr_tree_data_query',
methodId: that.methodId,
wsId: that.$store.getters.getWsIdFn
}
};
awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
that.tree.loading = false;
if (ro.result == 'ok') {
if (ro.data.length > 0) {
that.tree.defaultExpandedKeys.push(ro.data[0].id);
}
for (let i = 0; i < ro.data.length; i++) {
if (ro.data.children) {
for (let j = 0; j < ro.data.children.length; j++) {
ro.data[i].children[j].isUse = false;
}
}
}
that.tree.data = ro.data;
that.initTableData();
} else {
alert('请求响应错误');
}
}).catch(error=>{
console.log(error);
that.loading = false;
})
},
initTableData() {// 初始化表格
const that = this;
that.tableData = [];
this.tableDataTemp = [];
that.loadingText = '加载中';
that.loading = true;
const params = {
url:'jd',
data:{
cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_attr_table_data_query',
methodId: that.methodId,
wsId: that.$store.getters.getWsIdFn,
type: that.methodDataType
}
};
awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
that.loading = false;
if (ro.result == 'ok') {
const lightTreeIds = [];
for (let i = 0; i < ro.data.length; i++) {
ro.data[i].randomNum = Math.random();
if (that.methodDataType != 'all') {
ro.data[i].isUpdate = false;
if (ro.data[i].isUse) {
lightTreeIds.push(ro.data[i].id);
}
}
}
// 处理树右侧点亮图标
for (let i = 0; i < that.tree.data.length; i++) {
if (that.tree.data[i].children) {
for (let j = 0; j < that.tree.data[i].children.length; j++) {
if (lightTreeIds.indexOf(that.tree.data[i].children[j].id) > -1) {
that.tree.data[i].children[j].isUse = true;
} else {
that.tree.data[i].children[j].isUse = false;
}
}
}
}
that.tableDataTemp = ro.data;
that.search();
if (that.methodDataType != 'all') {
that.$nextTick(function(){
that.rowDrop();
});
}
} else {
alert('请求响应错误');
}
}).catch(error=>{
console.log(error);
that.loading = false;
})
},
search() {// 查询
if (this.nodeData == null) {
const data = JSON.parse(JSON.stringify(this.tableDataTemp));
for (let i = 0; i < data.length; i++) {
data[i].no = i + 1;
}
this.tableData = data;
} else {
const data = [];
let index = 1;
if (this.nodeData.type == 'group') {
for (let i = 0; i < this.tableDataTemp.length; i++) {
if (this.tableDataTemp[i].groupPath == this.nodeData.id) {
const item = JSON.parse(JSON.stringify(this.tableDataTemp[i]));
item.no = index++;
data.push(item);
}
}
} else {
for (let i = 0; i < this.tableDataTemp.length; i++) {
if (this.tableDataTemp[i].key == this.nodeData.id) {
const item = JSON.parse(JSON.stringify(this.tableDataTemp[i]));
item.no = index++;
data.push(item);
break;
}
}
}
this.tableData = data;
}
},
//行拖拽
rowDrop() {
const tbody = document.querySelector('.el-table__body-wrapper tbody')
const that = this;
Sortable.create(tbody, {
onEnd({ newIndex, oldIndex }) {
if (newIndex != oldIndex) {
const oldId = that.tableData[oldIndex].id;// 被拖拽的属性
let referenceId = '';
let position = '';
// 重点在整体混合排序之后点击树大类进行某个大类之下的属性单独排序的处理
if (newIndex - oldIndex == 1) {// 下移一位
referenceId = that.tableData[newIndex].id;
position = 'bottom';
} else if (oldIndex - newIndex == 1) {// 上移一位
referenceId = that.tableData[newIndex].id;
position = 'top';
} else if (newIndex == 0) {// 拖拽到开头位置
// 放置在原0位置属性的上方
referenceId = that.tableData[0].id;
position = 'top';// oldId在referenceId的上方
} else if (newIndex == that.tableData.length - 1) {// 放到了结尾位置
// 放置在原结尾位置属性的下方
referenceId = that.tableData[that.tableData.length - 1].id;
position = 'bottom';// oldId在referenceId的下方
} else {// 放到了中间位置
// 放置在原位置属性的上方
referenceId = that.tableData[newIndex].id;
position = 'top';// oldId在referenceId的上方
}
// 修改dataTableTemp
let currRow = null;// 被拖拽的行
for (let i = 0; i < that.tableDataTemp.length; i++) {
if (that.tableDataTemp[i].id == oldId) {
currRow = that.tableDataTemp.splice(i, 1)[0];// 删除此行
break;
}
}
// 移动位置
for (let i = 0; i < that.tableDataTemp.length; i++) {
if (that.tableDataTemp[i].id == referenceId) {
if (position == 'top') {
that.tableDataTemp.splice(i, 0, currRow);
break;
} else if (position == 'bottom') {
that.tableDataTemp.splice(i+1, 0, currRow);
break;
}
}
}
// 保存
const attrs = [];
for (let i = 0; i < that.tableDataTemp.length; i++) {
attrs.push({
id: that.tableDataTemp[i].id,
newTitle: that.tableDataTemp[i].newTitle
});
}
const params = {
url:'jd',
data:{
cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_attr_file_and_shape_sort_update',
methodId: that.methodId,
wsId: that.$store.getters.getWsIdFn,
type: that.methodDataType,
attrs: JSON.stringify(attrs),
}
};
// 查询数据
awsuiAxios.post(params).then(function (ro) {
if(ro.result == 'ok') {
that.$message({message: '移动成功',type: 'success'});
that.search();
} else {
that.$message.error(ro.msg);
}
}).catch(error=>{
console.log(error);
})
}
}
})
},
// 清空form数据
clearDrawerForm() {
this.attrForm = {
isCreate: true,// 是否新建
id: '',
key: '',
title: '',
newTitle: '',
type: '',
desc: '',
ref: '',
relationRef: {// 关联pal组织架构
method: '',
type: '',
multiple: 'false',
},
awsorgRef: {// 关联bpm组织架构
scope: [],
multiple: 'false'
},
value: '',
readonly: false,
isRequired: false,
isValid: true,
groupPathName: '',
groupPath: '',
fileScope: false,
shapeScope: false,
shapeScopeValue: [],
scopeName: '',
sort: '',
bpmFileShow: false,
bpmShapeShow: false,
typeOpts: [],
relationMethodScopeOpts: [],
relationTypeOpts: [],
awsorgScopeOpts: [],
multipleOpts: [
{
"label" : '多选',
"value" : "true"
},
{
"label" : '单选',
"value" : "false"// value为false select不识别改为字符串false
}
],
groupOpts: [],
shapeOpts: []
};
},
closeDrawer() {// 关闭drawer
this.drawer.visible = false;
},
handleDrawerClose(done) {
done();
},
initDrawer(title) {
const that = this;
that.drawer.buttonDisabled = false;
that.drawer.title = title;
that.drawer.visible = true;
that.$nextTick(function(){
that.initDrawerBodyHeight();
});
},
createAttrDefine() {// 全部-新建属性配置xml数据
this.clearDrawerForm();
const form = this.attrForm;
form.isCreate = true;
// 获取所有形状
this.initDrawer('新增属性');
this.getAttrOptsParam('');
},
// 全部-修改属性配置的xml定义文件
updateAttrDefine(row, column, cell, event) {
if (column.property == 'readonly' || column.property == 'isValid') {
return false;
}
this.clearDrawerForm();
const form = this.attrForm;
form.isCreate = false;
form.id = row.id;
form.key = row.key;
form.title = row.title;
form.newTitle = row.newTitle;
form.type = row.type;
form.ref = row.ref;
if (form.type == 'relation') {
form.relationRef.method = row.relationRef.method;
form.relationRef.type = row.relationRef.type;
form.relationRef.multiple = row.relationRef.multiple ? "true" : "false";
}
if (form.type == 'awsorg') {
form.awsorgRef.scope = row.awsorgRef.scope;
form.awsorgRef.multiple = row.awsorgRef.multiple ? "true" : "false";
}
// 类型为pal bpm 时 只读行为不可选
let arr = ['relation','awsorg'];
let type = form.type;
if(arr.includes(type)){
this.readOnlyCursor = true;
form.readonly = false;
}else{
this.readOnlyCursor = false;
form.readonly = row.readonly;
}
form.value = row.value;
form.desc = row.desc
form.isValid = row.isValid;
form.isRequired = row.isRequired
form.groupPath = row.groupPath;
form.groupPathName = row.groupPathName;
form.bpmFileShow = row.bpmFileShow;
form.bpmShapeShow = row.bpmFileShow;
this.initDrawer('修改属性');
this.getAttrOptsParam(row.scope);
console.log(this.attrForm)
},
// 获取一些选择框参数
getAttrOptsParam(scope) {
const form = this.attrForm;
const that = this;
that.drawer.loading = true;
const params = {
url:'jd',
data:{
cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_attr_shape_option_query',
methodId: that.methodId
}
};
awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
that.drawer.loading = false;
if (ro.result == 'ok') {
form.typeOpts = ro.data.typeOpts;
form.relationMethodScopeOpts = ro.data.relationMethodScopeOpts;
form.relationTypeOpts = ro.data.relationTypeOpts;
form.awsorgScopeOpts = ro.data.awsorgScopeOpts;
form.groupOpts = ro.data.groupOpts;
form.shapeOpts = ro.data.shapeOpts;
form.shapeScopeValue = [];
if (scope.indexOf('%') > -1) {
form.fileScope = true;
}
if (scope.indexOf("*") > -1 || (scope.indexOf('%') > -1 && scope.indexOf(',') > -1) || (scope.indexOf('%') == -1 && scope.length > 0)) {
form.shapeScope = true;
const shapeIds = scope.split(',');
for (let i = 0; i < form.shapeOpts.length; i++) {
if (shapeIds.indexOf(form.shapeOpts[i].value) > -1) {
form.shapeScopeValue.push(form.shapeOpts[i].value);
}
}
}
if (form.isCreate) {
form.type = form.typeOpts[0].value;
const currNode = that.$refs.tree.getCurrentNode();
if (currNode == null) {
form.groupPath = form.groupOpts[0].value;
} else if (currNode.type == 'group') {
form.groupPath = currNode.id;
} else {
form.groupPath = that.$refs.tree.getNode(currNode.pid).data.id;
}
}
} else {
alert('请求响应错误');
}
}).catch(error=>{
console.log(error);
that.drawer.loading = false;
})
},
// 新增、修改保存
saveDrawerData() {
const form = this.attrForm;
const that = this;
let scope = [];
if (form.fileScope) {
scope.push('%')
}
if (form.shapeScope) {
if (form.shapeScopeValue.length == 0) {
// 一个也没选,默认为全选
scope.push("*")
} else if (form.shapeScopeValue.length == form.shapeOpts.length){
scope.push("*")
} else {
scope = scope.concat(form.shapeScopeValue);
}
}
if (!(/^\w+$/.test(form.key))) {
that.$message({message: '[属性代码]请输入数字、字母、下划线的组合',type: 'warning'});
return false;
}
if (scope.length == 0) {
that.$message({message: '[作用范围]不允许为空',type: 'warning'});
return false;
}
if (form.type == 'string' || form.type == 'textarea' || form.type == 'number') {
form.ref = '';
}
if (form.type == 'boolean') {
form.ref = '是,否';
}
if (form.type == 'select' || form.type == 'select_m') {
if (form.ref == '') {
that.$message({message: '[选择范围]不允许为空',type: 'warning'});
return false;
}
}
if (form.type == 'awsorg') {
if (form.awsorgRef.scope == '') {
that.$message({message: '[BPM组织架构范围选择]不允许为空',type: 'warning'});
return false;
}
form.ref = form.awsorgRef;
form.ref.multiple = form.ref.multiple == 'true' ? true : false;// 转换为boolean
form.ref = JSON.stringify(form.ref);
}
if (form.type == 'relation') {
if (form.relationRef.method == '') {
that.$message({message: '[关联的建模方法]不允许为空',type: 'warning'});
return false;
}
if (form.relationRef.type == '') {
that.$message({message: '[关联范围]不允许为空',type: 'warning'});
return false;
}
form.ref = form.relationRef;
form.ref.multiple = form.ref.multiple == 'true' ? true : false;// 转换为boolean
form.ref = JSON.stringify(form.ref);
}
const data = {
url:'jd',
data:{
cmd : 'com.actionsoft.apps.coe.pal_pl_manage_method_attr_add_or_update_save',
methodId: that.methodId,
isCreate: form.isCreate,
key: form.key,
title: form.title,
type: form.type,
desc: form.desc,
ref: form.ref,
value: form.value,
readonly: form.readonly,
isRequired: form.isRequired,
groupPath: form.groupPath,
isValid: form.isValid,
bpmFileShow: form.bpmFileShow,
bpmShapeShow: form.bpmShapeShow
}
};
data.data.scope = scope;
this.$refs['attrForm'].validate((valid) => {
if (valid) {
that.drawer.buttonDisabled = true;
awsuiAxios.post(data).then(function (ro) {
if (ro.result == 'ok') {
// 成功,刷新当前页面
let msg = '修改';
if (form.isCreate) {
msg = '新增';
}
that.$message({message: msg + '成功',type: 'success'});
that.closeDrawer();
that.clearDrawerForm();
that.initTreeData();
} else {
that.$message({message: ro.msg, type: 'warning'});
that.drawer.buttonDisabled = false;
}
}).catch(error=>{
console.log(error);
})
} else {
return false;
}
});
},
handleNodeClick(data) {
this.nodeData = data;
this.search();
},
// 变更是否只读,必填,有效
handleChangeReadonlyAndValid(id, name, readonly,isRequired, isValid,) {
const that = this;
const params = {
url:'jd',
data:{
cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_attr_readonly_and_valid_update',
methodId: that.methodId,
key: id,
readonly: readonly,
isRequired,
isValid: isValid
}
};
awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
if (ro.result == 'ok') {
that.$message({message: '修改成功',type: 'success'});
for (let i = 0; i < that.tableDataTemp.length; i++) {
if (id == that.tableDataTemp[i].id) {
that.tableDataTemp[i].readonly = readonly;
that.tableDataTemp[i].isRequired = isRequired;
that.tableDataTemp[i].isValid = isValid;
that.tableDataTemp[i].randomNum = Math.random();
that.search();
break;
}
}
// that.initTableData();
} else {
that.$message({message: ro.msg,type: 'warning'});
}
}).catch(error=>{
console.log(error);
that.drawer.loading = false;
})
},
handleChangeBpmShow(id, name, bpmShow, type) {// 变更是否在bpm运行时显示的通配
const that = this;
const params = {
url:'jd',
data:{
cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_attr_bpm_show_update',
methodId: that.methodId,
key: id,
bpmShow: bpmShow,
type: type
}
};
awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
if (ro.result == 'ok') {
that.$message({message: '修改成功',type: 'success'});
for (let i = 0; i < that.tableDataTemp.length; i++) {
if (id == that.tableDataTemp[i].id) {
if (type == 'bpmFileShow') {
that.tableDataTemp[i].bpmFileShow = bpmShow;
} else if (type == 'bpmShapeShow') {
that.tableDataTemp[i].bpmShapeShow = bpmShow;
}
that.tableDataTemp[i].randomNum = Math.random();
that.search();
break;
}
}
// that.initTableData();
} else {
that.$message({message: ro.msg,type: 'warning'});
}
}).catch(error=>{
console.log(error);
that.drawer.loading = false;
})
},
handleAttrMouseEnter(row, column, cell, event) {// 文件属性行移入显示属性修改输入框
for (let i = 0; i < this.tableData.length; i++) {
if (row.id == this.tableData[i].id) {
this.tableData[i].isUpdate = true;
} else {
this.tableData[i].isUpdate = false;
}
}
},
handleAttrMouseLeave(row, column, cell, event) {// 文件属性行移出隐藏属性修改输入框
for (let i = 0; i < this.tableData.length; i++) {
if (row.id == this.tableData[i].id) {
this.tableData[i].isUpdate = false;
}
}
},
updateAttrDbInfo(attrId, newTitle, orderIndex) {// 更新属性名称信息
const that = this;
const params = {
url:'jd',
data:{
cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_attr_file_and_shape_update',
methodId: that.methodId,
wsId: that.$store.getters.getWsIdFn,
type: that.methodDataType,
attrId: attrId,
newTitle: newTitle,
orderIndex: orderIndex
}
};
awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
if (ro.result == 'ok') {
that.$message({message: '修改成功',type: 'success'});
// 把临时的数据进行更新
for (let i = 0; i < that.tableDataTemp.length; i++) {
if (attrId == that.tableDataTemp[i].id) {
that.tableDataTemp[i].newTitle = newTitle;
}
}
} else {
alert('请求响应错误');
}
}).catch(error=>{
console.log(error);
that.drawer.loading = false;
})
},
removeAttr(attrId, title) {
let confirmText = [
"确定要删除吗?",
'注意:将一并删除该属性在所有资产库的文件属性和形状属性中的配置信息(不包含业务内容数据)'
];
const newDatas = [];
const h = this.$createElement;
for (const i in confirmText) {
newDatas.push(h("p", null, confirmText[i]))
}
this.$confirm('提示', {
message: h("div", null, newDatas),
confirmButtonText: '确定',
confirmButtonClass: 'button-general-color',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const that = this;
const params = {
url:'jd',
data:{
cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_attr_remove',
methodId: that.methodId,
attrId: attrId
}
};
// 查询数据
awsuiAxios.post(params).then(function (ro) {
if(ro.result == 'ok') {
that.$message({
message: '删除成功',
type: 'success'
});
that.initTreeData();
} else {
that.$message(ro.msg);
}
}).catch(error=>{
console.log(error);
})
}).catch(() => {
});
},
changeReadOnly(){
if(this.attrForm.readonly){
this.attrForm.readonly = false;
}else{
this.attrForm.readonly = true;
}
},
changeAttrType(obj) {
// 类型为pal bpm 时 只读行为不可选
let arr = ['relation','awsorg'];
if(arr.includes(obj)){
this.readOnlyCursor = true;
this.attrForm.readonly = false;
}else{
this.readOnlyCursor = false;
}
this.attrForm.ref = '';
this.attrForm.relationRef.value = '';
this.attrForm.relationRef.multiple = 'false';
this.attrForm.relationRef.type = '';
this.attrForm.awsorgRef.scope = [];
this.attrForm.awsorgRef.multiple = 'false';
this.attrForm.value = '';
},
initDrawerBodyHeight() {
if (document.getElementById("drawerBody") != null) {
document.getElementById("drawerBody").style.height =
parseInt(this.mainHeight) -40 + parseInt(this.parentHeaderHeight) - 58 - parseInt(this.drawer.footerHeight) + 'px';// 68是drawer标题高度
}
},
},
computed: {
listenTopMainHeight() {
return this.$store.getters.getTopMainHeightFn;
}
},
watch: {
listenTopMainHeight: function (newd, old) {
this.mainHeight = (parseInt(newd)) - parseInt(this.parentHeaderHeight) + 'px';
this.treeHeight = (parseInt(newd) - parseInt(this.parentHeaderHeight) - 61) + 'px';
this.initDrawerBodyHeight();
},
methodDataType: function(newV, oldV) {
this.nodeData = null;
if (this.$refs.tree) {
this.$refs.tree.setCurrentKey(null);
}
if (newV != 'all') {
this.createBtnDisabled = true;
} else {
this.createBtnDisabled = false;
}
this.initTableData();
}
}
}
</script>
<style scoped>
#methodAttribute >>> .el-tree-node__content {
background-color: #f8f8f8;
}
#methodAttribute >>> .el-tree-node__content:hover {
/*background-color: #F5F7FA;*/
background-color: #d4d4d4;
}
#methodAttribute >>> .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background-color: #F5F7FA;
color: #4E7FF9;
}
#methodAttribute >>> .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content .awsui-iconfont {
color: #4E7FF9 !important;
}
#methodAttribute >>> .awsui-main {
padding: 10px;
}
#methodAttribute >>> .awsui-sidebar__header {
margin-bottom: 0px;
padding: 15px 20px 15px 20px;
border-bottom: 1px solid #f2f2f2;
font-size: 16px;
}
.attr-aside {
background-color: #f8f8f8;
overflow: hidden;
}
#methodAttribute >>> .input-update-attr-name input {
border-style: dashed !important;
}
#methodAttribute >>> .el-table__row .operate-icon-display{
display: none;
}
#methodAttribute >>> .el-table__row:hover .operate-icon-display{
display: inline-block;
}
.attr {
cursor: move;
}
.div-button-small {
display:inline-block;
width: 32.8%;
height: 35px;
border: 1px solid #e9e9e9;
line-height: 37px;
vertical-align: middle;
text-align: center;
cursor: pointer;
}
.div-button {
display:inline-block;
width: 49%;
height: 35px;
border: 1px solid #e9e9e9;
line-height: 37px;
vertical-align: middle;
text-align: center;
cursor: pointer;
}
#methodAttribute /deep/ .el-table__body-wrapper:hover {
cursor: pointer;
}
</style>