pal关联模型dialog+pal关联组织架构dialog实现筛选

This commit is contained in:
446052889@qq.com 2022-11-14 15:27:38 +08:00
parent ad8d808eba
commit 9e417c85a7
11 changed files with 1820 additions and 6 deletions

View File

@ -23,7 +23,7 @@
<% }%>
<script>
<%if (process.env.NODE_ENV === "development") {%>
var wsId = '4645328c-d20e-4a3c-bcb0-4518c9abdd93';
var wsId = '497710ef-5514-4ff1-89af-3054380f7b43';
var teamId = '';
var levelSelect = [{
value: 1,

View File

@ -0,0 +1 @@
说明调用aws平台的部门、人员、角色组件

View File

@ -0,0 +1,352 @@
<template>
<el-container>
<el-dialog
id="bpmOrgAddress"
:title="title"
:visible.sync="dialogVisible"
:destroy-on-close=true
:width="width"
:modal-append-to-body=false
:append-to-body=true
:close-on-click-modal=false
:before-close="handleClose">
<template v-if="refresh">
<div
v-loading="loading"
element-loading-text="拼命加载中">
<!-- <el-autocomplete-->
<!-- v-model="treeSearchKey"-->
<!-- size="small"-->
<!-- :fetch-suggestions="treeSearch"-->
<!-- @select="treeSearchSelect"-->
<!-- suffix-icon="el-icon-search"-->
<!-- placeholder="快速查询"-->
<!-- :trigger-on-focus=false-->
<!-- style="width:100%;">-->
<!-- <template slot-scope="{ item }">-->
<!-- <el-tooltip class="item" placement="bottom">-->
<!-- <div slot="content">{{item.pathName}}</div>-->
<!-- <span>{{ item.name }}</span>-->
<!-- </el-tooltip>-->
<!-- </template>-->
<!-- </el-autocomplete>-->
<div style="height: 300px;overflow: auto;border: 1px solid #f2f2f2;">
<div class="tree">
<el-tree
ref="tree"
:props="treeProps"
:show-checkbox="multiple"
:expand-on-click-node=false
:check-strictly=true
:highlight-current=true
@node-click="openNode"
@node-expand="expandNode"
@node-collapse="closeNode"
node-key="id"
lazy
:load="loadNode">
<span slot-scope="{node, data}">
<i class="awsui-iconfont tree-content-icon tree-content-icon-padding" :style="{'color': node.data.icon.color}" v-html="node.data.icon.icon"></i>
<span>{{node.label}}</span>
</span>
</el-tree>
</div>
</div>
</div>
</template>
<span slot="footer" class="dialog-footer">
<awsui-button class="button-general-color" type="primary" @click="submit">确定</awsui-button>
<awsui-button @click="cancel">取消</awsui-button>
</span>
</el-dialog>
</el-container>
</template>
<script>
import awsuiAxios from "../../../awsuiAxios";
export default {
name: "BpmOrgAddress",
props: {
visible: {
type: Boolean,
default: false
},
addressType: {// 簿簿departmentuserrole
type: String,
default: 'department'
},
multiple: {//
type: Boolean,
default: false
},
rootDeptId: {// ,
type: String,
default: ''
},
highSecurityFilter: {// 簿 簿usersysAdminsecAdminauditor
type: String,
default: ''// sysAdmin,auditor簿
},
title: {//
type: String,
default: ''
},
selected: {// {'department':[],'user':[],'role':[],'position':[]}
type: Object,
default: function () {
return {'department':[],'user':[],'role':[],'position':[]}
}
}
},
data() {
return {
refresh: false,
dialogVisible: false,
loading: false,
searchKey: '',
treeSearchKey: '',
timeout: null,
pid: '',
width: '500px',
treeProps: {
label: 'name',
isLeaf: 'leaf'
}
};
},
methods: {
handleClose(done) {
this.closeDlalog('cancel');
done();
},
cancel() {
this.closeDlalog('cancel');
this.dialogVisible = false;
},
submit() {
this.closeDlalog('save');
this.dialogVisible = false;
},
closeDlalog(type) {// /
if (type == 'save') {
let result = [];
if (this.multiple) {//
result = this.$refs.tree.getCheckedNodes();
} else {//
const node = this.$refs.tree.getCurrentNode();
if (node != null) {
result.push(node);
}
}
this.$emit('getResult', JSON.parse(JSON.stringify(result)));
} else {
this.$emit('cancel');
}
//
},
handleNodeClick(data) {
// console.log(data);
},
openNode(obj, node, tree) {//
},
treeSearchSelect(item) {
this.queryTreeByIdAndPath(item.id, item.path);
},
treeSearch(key, cb) {
const that = this;
if (key != undefined && key.trim() != '') {
// that.loading = true;
const data = {
url:'jd',
data:{
cmd: 'com.actionsoft.apps.coe.pal_repository_tree_component_search',
addressType: that.addressType,
rootDeptId: that.rootDeptId,
name: key
}
};
//
awsuiAxios.post(data).then(function (ro) {
if (ro.result == 'ok') {
if (ro.data.length > 0) {
clearTimeout(that.timeout);
that.timeout = setTimeout(() => {
cb(ro.data);
}, 3000 * Math.random());
} else {
clearTimeout(that.timeout);
}
} else {
clearTimeout(that.timeout);
}
}).catch(error=>{
console.log(error);
})
} else {
clearTimeout(that.timeout);
}
},
queryTreeByIdAndPath(id, path) {//
const that= this;
const tree = that.$refs.tree;
//
const pathArr = path.split(',');
let index = 1;
for (let i = 0; i < pathArr.length; i++) {//
if (i > 0) {
if (tree.getNode(pathArr[i-1]) != null) {
setTimeout(that._expandNode(tree, pathArr[i-1]), index * 300);
index++;
}
}
}
setTimeout(function() {
if (tree.getNode(id) != null) {
tree.setCurrentKey(id);
}
}, index * 300);
},
_expandNode(tree, id) {
return function() {
tree.getNode(id).expand();
}
},
loadNode(node, resolve) {// ``
const that = this;
that.loading = true;
const data = {
url:'jd',
data:{
cmd: 'com.actionsoft.apps.coe.pal_bpm_org_address_component_subjson',
addressType: that.addressType,
pid: '',
highSecurityFilter: that.highSecurityFilter
}
};
if (node.level === 0) {
//
data.data.pid = that.pid;
data.data.parentType = '';
} else {
//
data.data.pid = node.data.id;
data.data.parentType = node.data.type;
}
//
awsuiAxios.post(data).then(function (ro) {
//
if (that.multiple) {//
const isDept = that.addressType.indexOf('department') > -1;
const isUser = that.addressType.indexOf('user') > -1;
const isRole = that.addressType.indexOf('role') > -1;
const isPosition = that.addressType.indexOf('position') > -1;
for (let i = 0; i < ro.data.length; i++) {
const curr = ro.data[i];
if (curr.type == 'company' || curr.type == 'roleRoot' || curr.type == 'roleGroup' || curr.type == 'positionRoot' || curr.type == 'positionGroup') {
curr.disabled = true;
} else {
if (isDept && curr.type == 'department') curr.disabled = false;
if (!isDept && curr.type == 'department') curr.disabled = true;
if (isUser && curr.type == 'user') curr.disabled = false;
if (!isUser && curr.type == 'user') curr.disabled = true;
if (isRole && curr.type == 'role') curr.disabled = false;
if (!isRole && curr.type == 'role') curr.disabled = true;
if (isPosition && curr.type == 'position') curr.disabled = false;
if (!isPosition && curr.type == 'position') curr.disabled = true;
}
}
};
resolve(ro.data);
that.loading = false;
if (node.level == 0 && ro.data.length > 0) {
const tree = that.$refs.tree;
tree.getNode(ro.data[0].id).expand();
setTimeout(function(){
const childNode = tree.getNode(ro.data[0].id).childNodes[0];
if (childNode != null) {
childNode.expand();
}
}, 500);
}
}).catch(error=>{
console.log(error);
})
},
expandNode(obj, node, tree) {//
},
closeNode(obj, node, tree) {//
node.childNodes = [];
node.loaded = false;
},
refreshNode(id) {// loadNode
if (id == undefined) {//
const nodeData = this.$refs.tree.getCurrentNode();
if (nodeData != null) {
if (this.$refs.tree.store.nodesMap[nodeData.id] != undefined) {
this.$refs.tree.store.nodesMap[nodeData.id].expanded = false;
}
const node = this.$refs.tree.getNode(nodeData.id);
this.closeNode(null, node, null);
node.expand();
}
} else {//
if (this.$refs.tree.store.nodesMap[id] != undefined) {
this.$refs.tree.store.nodesMap[id].expanded = false;
}
const node = this.$refs.tree.getNode(id);
if (node != null) {
this.closeNode(null, node, null);
node.expand();
}
}
}
},
watch: {
visible(val) {
this.dialogVisible = val;
if (val) {//
if (this.addressType.indexOf('department') > 0) {
this.pid = this.rootDeptId;
}
this.refresh = true;
} else {//
this.refresh = false;
}
}
}
}
</script>
<style scoped>
#bpmOrgAddress >>> .el-dialog__body {
padding: 10px 20px;
color: #606266;
font-size: 14px;
word-break: break-all;
}
#bpmOrgAddress >>> .el-input__inner {
border-radius: 0px;
}
#bpmOrgAddress >>> .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background-color: #F5F7FA;
color: #4E7FF9;
}
#bpmOrgAddress >>> .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content .awsui-iconfont {
color: #4E7FF9 !important;
}
/*#bpmOrgAddress >>> .el-tree .el-tree-node>.el-tree-node__children{*/
/* overflow: visible;*/
/*}*/
.tree{
overflow: auto;
width:458px;
height: 300px;
}
#bpmOrgAddress >>> .el-tree {
min-width: 100%;
display:inline-block !important;
}
</style>

View File

@ -0,0 +1,7 @@
import BPMOrgAddress from './component'
BPMOrgAddress.install = function(Vue) {
Vue.component(BPMOrgAddress.name, BPMOrgAddress);
}
export default BPMOrgAddress;

View File

@ -0,0 +1 @@
说明PAL模型树组件

View File

@ -0,0 +1,338 @@
<template>
<el-container>
<el-dialog
id="palRepositoryTree"
:title="title"
:visible.sync="dialogVisible"
:destroy-on-close=true
:width="width"
:modal-append-to-body=false
:append-to-body=true
:close-on-click-modal=false
:before-close="handleClose">
<template v-if="refresh">
<div
v-loading="loading"
element-loading-text="拼命加载中">
<el-autocomplete
v-model="treeSearchKey"
size="small"
:fetch-suggestions="treeSearch"
@select="treeSearchSelect"
suffix-icon="el-icon-search"
placeholder="快速查询"
:trigger-on-focus=false
style="width:100%;"
>
<template slot-scope="{ item }">
<el-tooltip class="item" placement="bottom-start">
<div slot="content">{{item.pathName}}</div>
<span>{{ item.name }}</span>
</el-tooltip>
</template>
</el-autocomplete>
<div style="height: 300px;overflow: auto;border: 1px solid #f2f2f2;">
<div class="tree">
<el-tree
ref="tree"
:props="treeProps"
:expand-on-click-node=false
:highlight-current=true
@node-click="openNode"
@node-expand="expandNode"
@node-collapse="closeNode"
:show-checkbox=multiple
node-key="id"
lazy
:load="loadNode">
<span slot-scope="{node, data}">
<i class="awsui-iconfont tree-content-icon tree-content-icon-padding" :style="{'color': node.data.icon.color}" v-html="node.data.icon.icon"></i>
<span>{{node.label}}</span>
</span>
</el-tree>
</div>
</div>
</div>
</template>
<span slot="footer" class="dialog-footer">
<awsui-button class="button-general-color" type="primary" @click="submit">确定</awsui-button>
<awsui-button @click="cancel">取消</awsui-button>
</span>
</el-dialog>
</el-container>
</template>
<script>
import awsuiAxios from "../../../awsuiAxios";
export default {
name: "PALRepositoryTree",
props: {
visible: {
type: Boolean,
default: false
},
wsId: {// ID
type: String,
default: '',
required: true
},
teamId: {// ID
type: String,
default: ''
},
categorys: {// ,
type: String,
default: ''
},
rootId: {//
type: String,
default: ''
},
multiple: {//
type: Boolean,
default: false
},
title: {//
type: String,
default: '请选择'
},
// width: {//
// type: String,
// default: '500px'
// },
selected: {// []
type: Array,
default: function () {
return []
}
}
},
data() {
return {
refresh: false,
dialogVisible: false,
loading: false,
searchKey: '',
treeSearchKey: '',
timeout: null,
pid: '',
width: '500px',
treeProps: {
label: 'name',
isLeaf: 'leaf'
}
};
},
methods: {
handleClose(done) {
this.closeDlalog('cancel');
done();
},
cancel() {
this.closeDlalog('cancel');
this.dialogVisible = false;
},
submit() {
this.closeDlalog('save');
this.dialogVisible = false;
},
closeDlalog(type) {// /
if (type == 'save') {
let result = [];
if (this.checkbox) {//
result = this.$refs.tree.getCheckedNodes();
} else {//
const node = this.$refs.tree.getCurrentNode();
if (node != null) {
result.push(node);
}
}
this.$emit('getResult', result);
} else {
this.$emit('cancel');
}
//
},
handleNodeClick(data) {
console.log(data);
},
openNode(obj, node, tree) {//
},
treeSearchSelect(item) {
this.queryTreeByIdAndPath(item.id, item.versionId, item.path);
},
treeSearch(key, cb) {
const that = this;
if (key != undefined && key.trim() != '') {
// that.loading = true;
const data = {
url:'jd',
data:{
cmd: 'com.actionsoft.apps.coe.pal_repository_tree_component_search',
wsId: that.wsId,
teamId: that.teamId,
categorys: that.categorys,
rootId: that.rootId,
name: key
}
};
//
awsuiAxios.post(data).then(function (ro) {
if (ro.result == 'ok') {
if (ro.data.length > 0) {
clearTimeout(that.timeout);
that.timeout = setTimeout(() => {
cb(ro.data);
}, 3000 * Math.random());
} else {
clearTimeout(that.timeout);
}
} else {
clearTimeout(that.timeout);
}
}).catch(error=>{
console.log(error);
})
} else {
clearTimeout(that.timeout);
}
},
queryTreeByIdAndPath(id, versionId, path) {//
const that= this;
const tree = that.$refs.tree;
//
const pathArr = path.split(',');
let index = 1;
for (let i = 0; i < pathArr.length; i++) {//
if (i > 0) {
if (tree.getNode(pathArr[i-1]) != null) {
setTimeout(that._expandNode(tree, pathArr[i-1]), index * 300);
index++;
}
}
}
setTimeout(function() {
if (tree.getNode(versionId) != null) {
tree.setCurrentKey(versionId);
}
}, index * 300);
},
_expandNode(tree, versionId) {
return function() {
tree.getNode(versionId).expand();
}
},
loadNode(node, resolve) {// ``
const that = this;
that.loading = true;
const data = {
url:'jd',
data:{
cmd: 'com.actionsoft.apps.coe.pal_repository_tree_component_subjson',
wsId: that.wsId,
teamId: that.teamId,
categorys: that.categorys,
pid: ''
}
};
if (node.level === 0) {
//
data.data.pid = that.pid;
} else {
//
data.data.pid = node.data.id;
}
//
awsuiAxios.post(data).then(function (ro) {
resolve(ro.data);
that.loading = false;
if (node.level == 0 && ro.data.length > 0) {
const tree = that.$refs.tree;
tree.getNode(ro.data[0].id).expand();
setTimeout(function(){
const childNode = tree.getNode(ro.data[0].id).childNodes[0];
if (childNode != null) {
childNode.expand();
}
}, 500);
}
}).catch(error=>{
console.log(error);
})
},
expandNode(obj, node, tree) {//
},
closeNode(obj, node, tree) {//
node.childNodes = [];
node.loaded = false;
},
refreshNode(id) {// loadNode
if (id == undefined) {//
const nodeData = this.$refs.tree.getCurrentNode();
if (nodeData != null) {
if (this.$refs.tree.store.nodesMap[nodeData.id] != undefined) {
this.$refs.tree.store.nodesMap[nodeData.id].expanded = false;
}
const node = this.$refs.tree.getNode(nodeData.id);
this.closeNode(null, node, null);
node.expand();
}
} else {//
if (this.$refs.tree.store.nodesMap[id] != undefined) {
this.$refs.tree.store.nodesMap[id].expanded = false;
}
const node = this.$refs.tree.getNode(id);
if (node != null) {
this.closeNode(null, node, null);
node.expand();
}
}
}
},
watch: {
visible(val) {
this.dialogVisible = val;
if (val) {//
this.pid = this.rootId;
this.refresh = true;
} else {//
this.refresh = false;
}
}
}
}
</script>
<style scoped>
#palRepositoryTree >>> .el-dialog__body {
padding: 10px 20px;
color: #606266;
font-size: 14px;
word-break: break-all;
}
#palRepositoryTree >>> .el-input__inner {
border-radius: 0px;
}
#palRepositoryTree >>> .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background-color: #F5F7FA;
color: #4E7FF9;
}
#palRepositoryTree >>> .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content .awsui-iconfont {
color: #4E7FF9 !important;
}
/*#palRepositoryTree >>> .el-tree .el-tree-node>.el-tree-node__children{*/
/* overflow: visible;*/
/*}*/
.tree{
overflow: auto;
width:458px;
height: 300px;
}
#palRepositoryTree >>> .el-tree {
min-width: 100%;
display:inline-block !important;
}
</style>

View File

@ -0,0 +1,7 @@
import PALRepositoryTree from './component'
PALRepositoryTree.install = function(Vue) {
Vue.component(PALRepositoryTree.name, PALRepositoryTree);
}
export default PALRepositoryTree;

View File

@ -0,0 +1 @@
说明调用pal的组织、数据、控制等关联属性包括前后置流程

View File

@ -0,0 +1,975 @@
<template>
<el-container>
<el-dialog
id="palRelationAddress"
:title="title"
:visible.sync="dialogVisible"
width="800px"
:modal-append-to-body=false
:destroy-on-close=true
:append-to-body=true
:close-on-click-modal=false
:before-close="handleClose">
<template>
<div v-if="dialogVisible" style="width:100%; height: 400px; border:1px solid #f2f2f2;">
<div class="div-left" :style="{'width': (relationType == 'file' ? '373px' : '249px')}">
<div style="width: 100%;height: 32px;">
<el-autocomplete
v-model="treeSearchKey"
size="small"
:fetch-suggestions="treeSearch"
@select="treeSearchSelect"
suffix-icon="el-icon-search"
placeholder="快速查询"
:trigger-on-focus=false
:style="{'width': (relationType == 'file' ? '373px' : '249px')}"
>
<template slot-scope="{ item }">
<el-tooltip class="item" placement="bottom-start">
<div slot="content">{{item.pathName}}</div>
<span>{{ item.name }}</span>
</el-tooltip>
</template>
</el-autocomplete>
</div>
<div>
<div style="height: 368px;overflow: auto;">
<div style="margin: 0px;">
<el-tree
ref="tree"
empty-text="无数据"
:expand-on-click-node=false
:props="treeProps"
:show-checkbox="isTreeCheckbox"
:check-strictly=true
:highlight-current=true
@node-expand="expandNode"
@node-collapse="closeNode"
@check-change="handleNodeCheckChange"
node-key="id"
lazy
:load="loadNode"
@node-click="handleNodeClick">
<span slot-scope="{node, data}">
<i class="awsui-iconfont tree-content-icon tree-content-icon-padding" :style="{'color': node.data.icon.color}" v-html="node.data.icon.icon"></i>
<span>{{node.label}}</span>
</span>
</el-tree>
</div>
</div>
</div>
</div>
<div v-if="relationType != 'file'" class="div-middle">
<div style="width: 100%;height: 32px;">
<el-input
size="small"
placeholder="快速查询"
suffix-icon="el-icon-search"
v-model="shapeSearchKey"
@input="shapeSearch"
width="249px">
</el-input>
</div>
<div>
<div style="height: 368px;overflow: auto;">
<div style="margin: 0px;">
<template v-if="multiple">
<el-checkbox-group style="margin: 5px 0px 5px 5px;" v-model="shapeChecked" @change="handleChangeCheckShape">
<el-checkbox class="checkbox-item" v-for="item in shapeData" :label="item.id" :key="item.id" :disabled="item.isDisabled">{{item.name}}</el-checkbox>
</el-checkbox-group>
</template>
<template v-else>
<el-radio-group style="margin: 5px 0px 5px 5px;" v-model="shapeSelected" @change="handleChangeRadioShape">
<el-radio class="redio-item" v-for="item in shapeData" :label="item.id" :key="item.id" :disabled="item.isDisabled">{{item.name}}</el-radio>
</el-radio-group>
</template>
</div>
</div>
</div>
</div>
<div class="div-right" :style="{'width': (relationType == 'file' ? '373px' : '249px')}">
<div style="height: 100%;">
<template>
<el-table
:data="tableData"
:show-header=false
empty-text="请在左侧选择数据"
size="mini"
height="400px"
style="width: 100%">
<el-table-column
prop="name"
label="名称">
</el-table-column>
<el-table-column
prop="address"
label="操作"
width="40">
<template slot-scope="scope">
<div class="icon-delete-display">
<i class="iconfont" style="cursor: pointer;" @click="remove(scope.row.id)">&#xe644;</i>
</div>
</template>
</el-table-column>
</el-table>
</template>
</div>
</div>
</div>
</template>
<span slot="footer" class="dialog-footer">
<awsui-button class="button-general-color" type="primary" @click="submit">确定</awsui-button>
<awsui-button @click="cancel">取消</awsui-button>
</span>
</el-dialog>
</el-container>
</template>
<script>
import awsuiAxios from "../../../awsuiAxios";
export default {
name: "PalRelationAddress",
props: {
visible: {
type: Boolean,
default: false
},
relationType: {// shape/file/
type: String,
default: 'shape'
},
multiple: {// singlemultiple
type: Boolean,
default: false
},
title: {//
type: String,
default: ''
},
selectFileId: {// id
type: String,
default: ''
},
selectShapeId: {// id
type: String,
default: ''
},
wsId: {// ID
type: String,
default: '',
required: true
},
teamId: {// ID
type: String,
default: ''
},
categorys: {// ,
type: String,
default: ''
},
methods: {//
type: String,
default: ''
},
rootId: {//
type: String,
default: ''
}
},
data() {
return {
dialogVisible: false,
pid: '',
shapeSearchKey: '',
shapeChecked: [],
shapeSelected: '',
shapeRecords: {},
treeProps: {
label: 'name',
isLeaf: 'leaf'
},
tableData: [],
shapeData: [],
shapeTempData: [],
treeSearchKey: '',
timeout: null,
result: [],// [{id:xxx,versionId:xxx,name:xxxx,children:[{shapeId:xxx,name:xxx},{shapeId:xxx,name:xxx}]}]
};
},
created() {
},
computed: {
isTreeCheckbox() {
if(this.relationType == 'file' && this.multiple) {
return true
} else if(this.relationType == 'shapeAndFile') {
return true
} else {
return false
}
}
},
methods: {
clearAllParam() {
this.pid = '';
this.shapeSearchKey = '';
this.shapeChecked = [];
this.shapeSelected = '';
this.shapeRecords = {};
this.tableData = [];
this.shapeData = [];
this.shapeTempData = [];
this.treeSearchKey = '';
this.timeout = null;
this.result = [];
},
shapeSearch() {//
if (this.shapeSearchKey && this.shapeSearchKey.trim() != '') {
const key = this.shapeSearchKey.trim().toLocaleLowerCase();
const shapeData = [];
for (let i = 0; i < this.shapeTempData.length; i++) {
const shape = this.shapeTempData[i];
if (shape.name != '') {
let name = (shape.name + '').toLocaleLowerCase();
if (name.indexOf(key) != -1) {
shapeData.push(JSON.parse(JSON.stringify(shape)));
}
}
}
this.shapeData = shapeData;
} else {
this.shapeData = JSON.parse(JSON.stringify(this.shapeTempData));
}
},
treeSearchSelect(item) {
this.queryTreeByIdAndPath(item.id, item.path);
},
treeSearch(key, cb) {
const that = this;
if (key != undefined && key.trim() != '') {
const data = {
url:'jd',
data:{
cmd: 'com.actionsoft.apps.coe.pal_repository_tree_component_search',
wsId: that.wsId,
teamId: that.teamId,
categorys: that.categorys,
rootId: that.rootId,
name: key
}
};
//
awsuiAxios.post(data).then(function (ro) {
if (ro.result == 'ok') {
if (ro.data.length > 0) {
clearTimeout(that.timeout);
that.timeout = setTimeout(() => {
cb(ro.data);
}, 3000 * Math.random());
} else {
clearTimeout(that.timeout);
}
} else {
clearTimeout(that.timeout);
}
}).catch(error=>{
console.log(error);
})
} else {
clearTimeout(that.timeout);
}
},
queryTreeByIdAndPath(id, path) {//
const that= this;
const tree = that.$refs.tree;
//
const pathArr = path.split(',');
let index = 1;
for (let i = 0; i < pathArr.length; i++) {//
if (i > 0) {
if (tree.getNode(pathArr[i-1]) != null) {
setTimeout(that._expandNode(tree, pathArr[i-1]), index * 300);
index++;
}
}
}
setTimeout(function() {
if (tree.getNode(id) != null) {
tree.setCurrentKey(id);
}
}, index * 300);
},
_expandNode(tree, id) {
return function() {
tree.getNode(id).expand();
}
},
loadNode(node, resolve) {// ``
const that = this;
// that.loading = true;
const data = {
url:'jd',
data:{
cmd: 'com.actionsoft.apps.coe.pal_repository_tree_component_subjson',
wsId: that.wsId,
teamId: that.teamId,
categorys: that.categorys,
pid: ''
}
};
if (node.level === 0) {
//
data.data.pid = that.pid;
} else {
//
data.data.pid = node.data.id;
}
//
awsuiAxios.post(data).then(function (ro) {
for (let i = 0; i < ro.data.length; i++) {
if (ro.data[i].id.length < 36) {
ro.data[i].disabled = true;
} else {
if (that.categorys != '' && that.methods != '') {
if (that.methods.indexOf(ro.data[i].plMethodId) > -1) {
ro.data[i].disabled = false;
} else {
ro.data[i].disabled = true;
}
} else if (that.categorys != '') {
if (that.categorys.indexOf(ro.data[i].plCategory) > -1) {
ro.data[i].disabled = false;
} else {
ro.data[i].disabled = true;
}
} else {
if (that.methods.indexOf(ro.data[i].plMethodId) > -1) {
ro.data[i].disabled = false;
} else {
ro.data[i].disabled = true;
}
}
}
}
resolve(ro.data);
that.initTreeCheck();
// that.loading = false;
if (node.level == 0 && ro.data.length > 0) {
const tree = that.$refs.tree;
tree.getNode(ro.data[0].id).expand();
setTimeout(function(){
const childNode = tree.getNode(ro.data[0].id).childNodes[0];
if (childNode != null) {
childNode.expand();
}
}, 500);
}
}).catch(error=>{
console.log(error);
})
},
expandNode(obj, node, tree) {//
},
closeNode(obj, node, tree) {//
node.childNodes = [];
node.loaded = false;
},
//
initTreeCheck() {
const relationType = this.relationType;
if (relationType == 'file') {//
if (this.multiple) {//
const result = this.result;
const tree = this.$refs.tree;
for (let i = 0; i < result.length; i++) {
if (tree.getNode(result[i].id) != null) {
tree.setChecked(result[i].id, true);
}
}
} else {//
const result = this.result;
const tree = this.$refs.tree;
for (let i = 0; i < result.length; i++) {
if (tree.getNode(result[i].id) != null) {
tree.setCurrentKey(result[i].id);
}
}
}
} else if (relationType == 'shapeAndFile'){
const result = this.result;
const tree = this.$refs.tree;
for (let i = 0; i < result.length; i++) {
if (result[i].children.length == 0 && tree.getNode(result[i].id) != null) {
tree.setChecked(result[i].id, true);
}
}
}
},
// check file shapeAndFile
handleNodeCheckChange(data, isCheck) {
if(this.relationType == 'file' || (this.relationType == 'shapeAndFile' && this.multiple)) { //
if (isCheck) {//
const result = this.result;
if (!this.isFileExist(result,data.id, data.versionId)) {
const tempObj = {};
tempObj.id = data.id;
tempObj.versionId = data.versionId;
tempObj.name = data.name;
tempObj.children = [];
result.push(tempObj);
this.initTableData();
}
}
else {//
this.remove(data.id);
}
}
else { //
if (isCheck) {
const result = this.result;
this.shapeSelected = ''
for (let i = 0; i < result.length; i++) {
if (result[i].children.length == 0) {
this.remove(result[i].id)
} else {
let children = result[i].children
for (let j = 0; j < children.length; j++) {
this.remove(children[j].shapeId)
}
}
}
if (!this.isFileExist(result,data.id, data.versionId)) {
const tempObj = {};
tempObj.id = data.id;
tempObj.versionId = data.versionId;
tempObj.name = data.name;
tempObj.children = [];
result.push(tempObj);
this.initTableData();
}
}
else {
this.remove(data.id);
}
}
},
handleClose(done) {
this.closeDlalog('cancel');
done();
},
cancel() {
this.closeDlalog('cancel');
this.dialogVisible = false;
},
submit() {
this.closeDlalog('save');
this.dialogVisible = false;
},
closeDlalog(type) {// /
if (type == 'save') {
const result = JSON.parse(JSON.stringify(this.result));
if (this.relationType == 'file') {
for (let i = 0; i < result.length; i++) {
delete result[i].children;
}
}
this.$emit('getResult', result);
} else {
this.$emit('cancel');
}
//
this.clearAllParam();
},
//
handleNodeClick(data) {
const that = this;
const relationType = this.relationType;
if (relationType == 'file') {//
if (!this.multiple) {//
//
if (that.categorys != '' && that.methods != '') {
if (that.methods.indexOf(data.plMethodId) == -1) {
//
that.$message({message: '不支持关联的模型',type: 'warning'});
return;
}
} else if (that.categorys != '') {
if (that.categorys.indexOf(data.plCategory) == -1) {
that.$message({message: '不支持关联的模型',type: 'warning'});
return;
}
} else {
if (that.methods.indexOf(data.plMethodId) == -1) {
that.$message({message: '不支持关联的模型',type: 'warning'});
return;
}
}
this.result = [];//
const result = this.result;
const tempObj = {};
tempObj.id = data.id;
tempObj.versionId = data.versionId;
tempObj.name = data.name;
tempObj.children = [];
result.push(tempObj);
this.initTableData();
}
}
else {//
//
const that = this;
that.shapeSearchKey = '';
const params = {
url:'jd',
data:{
cmd: 'com.actionsoft.apps.coe.pal_repository_tree_component_shapejson',
id: data.id
}
};
let isDisabled = true;
if (that.categorys != '' && that.methods != '') {
if (that.methods.indexOf(data.plMethodId) > -1) {
isDisabled = false;
} else {
isDisabled = true;
}
} else if (that.categorys != '') {
if (that.categorys.indexOf(data.plCategory) > -1) {
isDisabled = false;
} else {
isDisabled = true;
}
} else {
if (that.methods.indexOf(data.plMethodId) > -1) {
isDisabled = false;
} else {
isDisabled = true;
}
}
//
awsuiAxios.post(params).then(function (ro) {
if (ro.result == 'ok') {
const list = ro.data.list;
const tempData = [];
for (let i = 0; i < list.length; i++) {
const obj = {
id: list[i].id,
name: list[i].name,
fileId: list[i].fileId,
fileName: list[i].fileName,
versionId: list[i].versionId,
isDisabled: isDisabled
}
tempData.push(obj);
that.shapeRecords[list[i].id] = obj;
}
that.shapeData = tempData;
that.shapeTempData = JSON.parse(JSON.stringify(that.shapeData));//
}
}).catch(error=>{
console.log(error);
})
}
},
//
initTableData() {
const relationType = this.relationType;
if (relationType == 'file') {
const result = this.result;
const tempData = [];
for (let i = 0; i < result.length; i++) {
const tempObj = {
id: result[i].id,
name: result[i].name,
versionId: result[i].versionId
}
tempData.push(tempObj);
}
this.tableData = tempData;
}
else if (relationType == 'shapeAndFile') {
const result = this.result;
const tempData = [];
for (let i = 0; i < result.length; i++) {
const currFile = result[i];
const children = currFile.children;
if(children.length == 0) {
const tempObj = {
id: result[i].id,
name: result[i].name,
versionId: result[i].versionId
}
tempData.push(tempObj);
} else {
for (let j = 0; j < children.length; j++) {
const currShape = children[j];
const tempObj = {
id: currShape.shapeId,
name: currShape.name,
fileId: currFile.id,
fileName: currFile.name,
versionId: currFile.versionId
}
tempData.push(tempObj);
}
}
}
this.tableData = tempData;
}
else {//
const result = this.result;
const tempData = [];
for (let i = 0; i < result.length; i++) {
const currFile = result[i];
const children = currFile.children;
for (let j = 0; j < children.length; j++) {
const currShape = children[j];
const tempObj = {
id: currShape.shapeId,
name: currShape.name,
fileId: currFile.id,
fileName: currFile.name,
versionId: currFile.versionId
}
tempData.push(tempObj);
}
}
this.tableData = tempData;
}
},
//
isFileExist(result, fileId, versionId){
for (let i = 0; i < result.length; i++) {
const file = result[i];
if (file.versionId == versionId) {
return true;
}
}
return false;
},
//
remove(id) {
const relationType = this.relationType;
if (relationType == 'file') {
const result = this.result;
for (let i = 0; i < result.length; i++) {
const obj = result[i];
if (obj.id == id) {
result.splice(i, 1);
if (this.multiple) {
this.$refs.tree.setChecked(id, false);
} else {
this.$refs.tree.setCurrentKey(null);
}
break;
}
}
}
else if(relationType == 'shapeAndFile') {
const result = this.result;
for (let i = 0; i < result.length; i++) {
const obj = result[i];
if (obj.id == id) {
this.$refs.tree.setChecked(id, false);
result.splice(i, 1);
break
} else {
let data = this.shapeRecords[id]
let children = result[i].children
if (data && obj.id == data.fileId) {
for (let j = 0; j < children.length; j++) {
if (children[j].shapeId == id) {
children.splice(j, 1);
if (children.length == 0) {
result.splice(i, 1);
}
}
if(this.multiple) {
//
for (let i = 0; i < this.shapeChecked.length; i++) {
if (this.shapeChecked[i] == id) {
this.shapeChecked.splice(i, 1);
break;
}
}
} else {
this.shapeSelected = '';
}
}
}
}
}
}
else {//
if (this.multiple) {//
const data = this.shapeRecords[id];
if (data) {
const result = this.result;
const shapeId = data.id;
const name = data.name;
const fileId = data.fileId;
const fileName = data.fileName;
const fileVersionId = data.versionId;
for (let i = 0; i < result.length; i++) {
const file = result[i];
if (file.id == fileId) {
const children = file.children;
for (let j = 0; j < children.length; j++) {
if (children[j].shapeId == id) {
children.splice(j, 1);
break;
}
}
if (children.length == 0) {
result.splice(i, 1);
break;
}
}
}
}
//
for (let i = 0; i < this.shapeChecked.length; i++) {
if (this.shapeChecked[i] == id) {
this.shapeChecked.splice(i, 1);
break;
}
}
} else {//
this.result = [];
this.shapeSelected = '';
}
}
this.initTableData();
},
//
handleChangeRadioShape(id) {
const data = this.shapeRecords[id];
if (data) {
const shapeId = data.id;
const name = data.name;
const fileId = data.fileId;
const fileName = data.fileName;
const fileVersionId = data.versionId;
if (this.relationType == 'shapeAndFile') {
for (let i = 0; i < this.result.length; i++) {
if (this.result[i].children.length == 0) {
this.remove(this.result[i].id)
}
}
}
this.result = [];
const result = this.result;
const tempObj = {};
tempObj.id = fileId;
tempObj.versionId = fileVersionId;
tempObj.name = fileName;
tempObj.children = [];
const children = {
shapeId: shapeId,
name: name
};
tempObj.children.push(children);
result.push(tempObj);
this.initTableData();
}
},
//
handleChangeCheckShape(ids) {
if (this.relationType == 'shapeAndFile') {
for (let i = 0; i < this.result.length; i++) {
if (this.result[i].children.length > 0) {
this.result.splice(i,1)
}
}
} else {
this.result = []
}
const result = this.result;
for (let i = 0; i < ids.length; i++) {
const id = ids[i];
const data = this.shapeRecords[id];
if (data) {
const shapeId = data.id;
const name = data.name;
const fileId = data.fileId;
const fileName = data.fileName;
const fileVersionId = data.versionId;
let fileExist = false;
for (let j = 0; j < result.length; j++) {
const file = result[j];
if (file.id == fileId) {
fileExist = true;
const children = {
shapeId: shapeId,
name: name
}
if (file.children.findIndex(item => item.shapeId == shapeId) === -1) {
file.children.push(children);
}
}
}
if (!fileExist) {
const tempObj = {};
tempObj.id = fileId;
tempObj.versionId = fileVersionId;
tempObj.name = fileName;
tempObj.children = [];
const children = {
shapeId: shapeId,
name: name
};
tempObj.children.push(children);
result.push(tempObj);
}
}
}
this.initTableData();
},
initData() {//
// resultshapeSelectedshapeChecked
const that = this;
if (that.relationType == 'file') {
if (that.selectFileId != '') {
//
const data = {
url:'jd',
data:{
cmd: 'com.actionsoft.apps.coe.pal_repository_tree_component_file_query',
versionIds: that.selectFileId
}
};
//
awsuiAxios.post(data).then(function (ro) {
if (ro.result == 'ok') {
const result = [];
for (let i = 0; i < ro.data.length; i++) {
const currData = ro.data[i];
const tempObj = {};
tempObj.id = currData.id;
tempObj.versionId = currData.versionId;
tempObj.name = currData.name;
tempObj.children = [];
result.push(tempObj);
}
that.result = result;
that.initTableData();
}
}).catch(error=>{
console.log(error);
})
}
} else {
if (that.selectFileId != '' && that.selectShapeId != '') {
//
const data = {
url:'jd',
data:{
cmd: 'com.actionsoft.apps.coe.pal_repository_tree_component_file_shape_query',
fileIds: that.selectFileId,
shapeIds: that.selectShapeId
}
};
//
awsuiAxios.post(data).then(function (ro) {
if (ro.result == 'ok') {
if (ro.data.data.length > 0) {
that.shapeRecords = ro.data.shapes;
if (that.multiple) {
that.result = ro.data.data;
for (let i = 0; i < that.result.length; i++) {
const children = that.result[i].children;
for (let j = 0; j < children.length; j++) {
that.shapeChecked.push(children[j].shapeId);
}
}
} else {
that.result = ro.data.data;
for (let i = 0; i < that.result.length; i++) {
const children = that.result[i].children;
for (let j = 0; j < children.length; j++) {
that.shapeSelected = children[j].shapeId;//
}
}
}
that.initTableData();
}
}
}).catch(error=>{
console.log(error);
})
}
}
}
},
watch: {
visible(val) {
this.dialogVisible = val;
if (val) {//
this.clearAllParam();
this.pid = this.rootId;
this.initData();
} else {//
}
}
}
}
</script>
<style scoped>
#palRelationAddress >>> .el-dialog__body {
padding: 10px 20px;
color: #606266;
font-size: 14px;
word-break: break-all;
}
#palRelationAddress >>> .el-input__inner {
border-radius: 0px;
}
#palRelationAddress >>> .el-tree {
min-width: 100%;
display:inline-block !important;
}
.checkbox-item {
margin: 10px 0px;
display: block;
}
.redio-item {
margin: 10px 0px;
display: block;
}
.div-left {
float:left;
width:249px;
height:400px;
border-right: 1px dashed #f2f2f2;
}
.div-middle {
float:left;
width: 248px;
height:400px;
border-right: 1px dashed #f2f2f2;
}
.div-right {
float: right;
width: 249px;
height:400px;
background-color: #2a85a0;
}
#palRelationAddress >>> .el-table__row .icon-delete-display{
display: none;
}
#palRelationAddress >>> .el-table__row:hover .icon-delete-display{
display: inline;
}
#palRelationAddress >>> .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background-color: #F5F7FA;
color: #4E7FF9;
}
#palRelationAddress >>> .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content .awsui-iconfont {
color: #4E7FF9 !important;
}
</style>

View File

@ -0,0 +1,7 @@
import PalRelationAddress from './component'
PalRelationAddress.install = function(Vue) {
Vue.component(PalRelationAddress.name, PalRelationAddress);
}
export default PalRelationAddress;

View File

@ -13,6 +13,7 @@
<div class="head-title" style="float:left;width:200px;">
<awsui-select id="levelSelect" v-model="levelValue" collapse-tags placeholder="请选择流程层级" :options="levelOptions" multiple @change="searchProcessList(false)"></awsui-select>
</div>
<div class="head-title" style="float:right;width: 240px;">
<awsui-button class="button-general-color button_fixed_width" type="primary" @click="exportProcessList">导出</awsui-button>
<el-tooltip class="item" effect="dark" content="重置筛选条件" placement="bottom-end" :hide-after="1000">
@ -23,11 +24,57 @@
<i class="el-icon-circle-plus custom_table_dlg_icon" @click="customTableDlg = true"></i>
</el-tooltip>
</div>
<div class="head-title" style="float:right;width: 80px;">
<awsui-button class="button-general-color button_fixed_width" type="primary" @click="searchProcessList(false)">查询</awsui-button>
</div>
<div class="head-title" style="float:right;width:220px;padding-right: 20px;">
<awsui-input v-model="searchInput" size="large" prefixIcon="&#xe6e9;" placeholder="请输入流程名称进行搜索" clearable @input="searchProcessList(false)"></awsui-input>
<awsui-input v-model="searchInput" size="large" suffixIcon="&#xe6e9;" placeholder="请输入流程名称进行搜索" clearable @input="searchProcessList(false)"></awsui-input>
</div>
<!-- &lt;!&ndash; 流程架构3 &ndash;&gt;-->
<!-- <div class="head-title" style="float: right;width: 200px;padding-right: 20px;">-->
<!-- <awsui-input v-model="searchInput" size="large" prefixIcon="&#xe6e9;" placeholder="流程架构3" clearable @input="searchProcessList(false)"></awsui-input>-->
<!-- </div>-->
<!-- &lt;!&ndash; 流程架构2 &ndash;&gt;-->
<!-- <div class="head-title" style="float: right;width: 200px;padding-right: 20px;">-->
<!-- <awsui-input v-model="searchInput" size="large" prefixIcon="&#xe6e9;" placeholder="流程架构2" clearable @input="searchProcessList(false)"></awsui-input>-->
<!-- </div>-->
<!-- &lt;!&ndash; 流程架构1 &ndash;&gt;-->
<!-- <div class="head-title" style="float: right;width: 200px;padding-right: 20px;">-->
<!-- <awsui-input v-model="searchInput" size="large" prefixIcon="&#xe6e9;" placeholder="流程架构1" clearable @input="searchProcessList(false)"></awsui-input>-->
<!-- </div>-->
<!-- 流程架构 -->
<div class="head-title" style="float: right;width: 200px;padding-right: 20px;">
<awsui-input v-model="frameworkSearchInput" size="large" suffixIcon="&#xe6e9;" readonly placeholder="请选择流程架构" @click.native="choiceRelationComponent('')"></awsui-input>
</div>
<div class="head-title" style="float: right;">
<el-checkbox-group v-model="frameworkSelect" size="small">
<el-checkbox-button v-for="item in frameworkOpts" :label="item" :key="item">{{item}}</el-checkbox-button>
</el-checkbox-group>
</div>
<!-- 发布部门 -->
<div class="head-title" style="float: right;width: 200px;padding-right: 20px;">
<awsui-input v-model="issuingDeptment" size="large" suffixIcon="&#xe6e9;" readonly placeholder="请选择发布部门" @click.native="choiceAwsOrgComponent()"></awsui-input>
</div>
</el-col>
</el-row>
<!-- <el-row>-->
<!-- &lt;!&ndash; 流程架构 &ndash;&gt;-->
<!-- <div class="head-title" style="float: right;width: 200px;padding-right: 20px;">-->
<!-- <awsui-input v-model="frameworkSearchInput" size="large" suffixIcon="&#xe6e9;" readonly placeholder="请选择流程架构" @click.native="choiceRelationComponent('')"></awsui-input>-->
<!-- </div>-->
<!-- <div class="head-title" style="float: right;">-->
<!-- <el-checkbox-group v-model="frameworkSelect" size="small">-->
<!-- <el-checkbox-button v-for="item in frameworkOpts" :label="item" :key="item">{{item}}</el-checkbox-button>-->
<!-- </el-checkbox-group>-->
<!-- </div>-->
<!-- &lt;!&ndash; 发布部门 &ndash;&gt;-->
<!-- <div class="head-title" style="float: right;width: 200px;padding-right: 20px;">-->
<!-- <awsui-input v-model="issuingDeptment" size="large" suffixIcon="&#xe6e9;" readonly placeholder="请选择发布部门" @click.native="choiceAwsOrgComponent()"></awsui-input>-->
<!-- </div>-->
<!-- <div class="head-title" style="float:right;width: 80px;">-->
<!-- <awsui-button class="button-general-color button_fixed_width" type="primary" @click="searchProcessList(false)">查询</awsui-button>-->
<!-- </div>-->
<!-- </el-row>-->
</awsui-header>
<awsui-main style="padding-right: 0;padding-bottom: 0;" id="processlistMain">
<el-table
@ -144,6 +191,32 @@
</div>
</awsui-sidebar>
<iframe style="display: none" id='downloadIframe' ></iframe>
<!-- 选择流程架构 -->
<pal-relation-address
ref="palRelationAddress"
:visible.sync="palRelationAddressVisible"
v-on:cancel="palRelationAddressVisible = false"
v-on:getResult="saveRelationResult"
:title="relation.title"
:selectFileId="relation.selectFileId"
:selectShapeId="relation.selectShapeId"
:relationType="relation.relationType"
:categorys="relation.category"
:methods="relation.method"
:wsId="relation.wsId"
:teamId="relation.teamId"
:multiple = relation.multiple
/>
<BPMOrgAddress
ref="palAwsOrgAddress"
:visible.sync="bpmOrgAddress.visible"
:addressType="bpmOrgAddress.addressType"
v-on:cancel="bpmOrgAddress.visible = false"
v-on:getResult="saveBpmOrgAddressResult"
multiple
:title="bpmOrgAddress.title"
:multiple="bpmOrgAddress.multiple"
/>
</awsui-layout>
</template>
@ -151,17 +224,20 @@
import draggable from "vuedraggable";
import awsuiAxios from "../awsuiAxios";
import {openDesigner} from "../api/commonFun";
import PalRelationAddress from "@/components/common/PalRelationAddress/index.js";
import BPMOrgAddress from "@/components/common/BPMOrgAddress/index.js";// pal簿
let levelOptions = levelSelect;
let levelValue = defaultSelectVal;
//
let tempMoreAttrCheckedConfig = [];
let tempMoreAttrUnCheckedConfig = [];
let tempTableFilterObj = {};
export default {
name: "ProcesslistHome",
components: {
draggable
draggable,
PalRelationAddress,
BPMOrgAddress
},
data() {
return {
@ -182,7 +258,31 @@
customTableCheckedData: [],
customTableUncheckedData: [],
dataLoaded: false,
serialNumber: 0 //
serialNumber: 0, //
frameworkOpts: ['L1','L2','L3'],
frameworkSelect: ['L1'],
frameworkSearchInput: 'aaa',
issuingDeptment: 'xxxx',
palRelationAddressVisible: false,
relation: {
title: '选择流程',
selectFileId: '',
selectShapeId: '',
relationType: 'file',
category: 'process',
method: '',
wsId: wsId,
teamId: teamId,
multiple: true,
isRequired: false
},
bpmOrgAddress: {
title: '选择发布部门',
visible: false,
addressType: "department",
multiple: true,
isRequired: false
},
}
},
methods : {
@ -431,7 +531,32 @@
that.customTableCheckedData = [];
that.customTableUncheckedData = [];
that.saveTableColumnConfig();
}
},
choiceRelationComponent(fileIds) {// PAL/
this.relation.selectFileId = fileIds;// id
this.palRelationAddressVisible = true;
},
//
saveRelationResult(data) {
console.log(data)
this.palRelationAddressVisible = false;
},
choiceAwsOrgComponent() {// AWS//
this.bpmOrgAddress.visible = true;
},
saveBpmOrgAddressResult(data) {
this.bpmOrgAddress.visible = false;
if (this.bpmOrgAddress.isRequired && data.length == 0) {
this.$message({message: `[${this.currPropertyLabel}]不允许为空`,type: 'warning'});
return false;
}
//
const params = [];
for (let i = 0; i < data.length; i++) {
params.push({name: data[i].name, id: data[i].id, type: data[i].type})
}
this.saveCustomPropToDb(this.currPropertyId, JSON.stringify(params));
},
},
created() {