Skip to content

R
rbc-demo
Commit 936a494a by Joey
Options

feat(@gms/gms-plugin-mainpage-commonfunctions): 改为根据用户区分配置

parent ee7693b2
Showing with 380 additions and 135 deletions
develop/@gms/gms-plugin-mainpage-commonfunctions/package.json
......@@ -5,6 +5,7 @@
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-dev": "vue-cli-service build --mode development",
"build-dev-watch": "vue-cli-service build --mode development --watch",
"lint": "vue-cli-service lint"
},
"dependencies": {
......
develop/@gms/gms-plugin-mainpage-commonfunctions/src/components/CardItem.vue
<template>
<div
class="commonfunctions-card"
@click="gotoQuery(item)"
>
<div class="icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>{{item.function.title}}</title>
<use :xlink:href="`${item.icon}`"></use>
</svg>
</div>
<div class="title">
{{item.function.title}}
<div class="click-area" @click="gotoQuery(item)">
<div class="icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>{{item.function.title}}</title>
<use :xlink:href="`${item.icon}`"></use>
</svg>
</div>
<div class="title">
{{item.function.title}}
</div>
</div>
</div>
</template>
......@@ -105,25 +106,30 @@ export default {
background: #FFFFFF;
padding: 24px 16px 16px 16px;
font-family: PingFangSC-Regular, PingFang SC;
cursor: pointer;
.icon {
width: 46px;
height: 46px;
margin: 0 auto 12px auto;
svg {
.click-area {
height: 100%;
width: fit-content;
margin: 0 auto;
cursor: pointer;
.icon {
width: 46px;
height: 46px;
margin: 0 auto 12px auto;
svg {
width: 100%;
height: 100%;
}
}
.title {
height: 20px;
font-size: 14px;
font-weight: 400;
color: #424242;
line-height: 20px;
width: 100%;
height: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
}
.title {
height: 20px;
font-size: 14px;
font-weight: 400;
color: #424242;
line-height: 20px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
}
</style>
\ No newline at end of file
develop/@gms/gms-plugin-mainpage-commonfunctions/src/views/gms-app.vue
<template>
<div class="commonfunctions-container">
<div class="title">常用功能</div>
<div class="card-wrapper">
<CardItem
v-for="(item, index) in reimburseList"
:key="index"
:item="item"
:style="{width: `${100 / rowIconNum}%`}"
>
</CardItem>
<div class="title">
<span>常用功能</span>
<div class="edit-icon">
<Icon type="ios-create-outline" @click="editModalVisible = true" />
</div>
</div>
<div class="carousel-wrapper">
<div class="carousel-container">
<div
class="arrow arrow-left"
v-if="pageNum > 1"
@click="switchPage(curPage - 1)"
>
<Icon type="ios-arrow-back" />
</div>
<div class="card-wrapper" ref="cardWrapper">
<CardItem
v-for="(item, index) in curPageList"
:key="index"
:item="item"
:style="{width: `${100 / rowIconNum}%`}"
>
</CardItem>
</div>
<div
class="arrow arrow-right"
v-if="pageNum > 1"
@click="switchPage(curPage + 1)"
>
<Icon type="ios-arrow-forward" />
</div>
</div>
<div class="carousel-indicator" v-if="pageNum > 1">
<div
v-for="page,index in Array.from(Array(pageNum))"
:key="index"
class="block"
@click="switchPage(index)"
:class="`${index == curPage ? 'block-active' : ''}`"
></div>
</div>
</div>
<Modal
v-model="editModalVisible"
title="编辑常用功能"
@on-ok="handleOk"
@on-cancel="handleCancel"
class-name="commonfunctions-modal"
width="50%"
>
<Form :label-width="110">
<FormItem label="每行图标数目">
<Input v-model="rowIconNum" />
</FormItem>
</Form>
<div class="transfer">
<div class="tree-wrapper">
<el-tree
:data="appTree"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
@check="handleCheckChange"
>
</el-tree>
</div>
<div class="selected-item-wrapper">
<div class="button-group-wrapper">
<Button
size="small"
:disabled="rightSideClickedNodeIndex == null || rightSideClickedNodeIndex == 0"
@click="moveItem(-1)"
>
上移
</Button>&nbsp;&nbsp;
<Button
size="small"
:disabled="rightSideClickedNodeIndex == null || rightSideClickedNodeIndex == currentSelectedNodes.length - 1"
@click="moveItem(1)"
>
下移
</Button>&nbsp;&nbsp;
<Button
size="small"
:disabled="rightSideClickedNodeIndex == null"
@click="removeItem"
>
移除
</Button>&nbsp;&nbsp;
<Button
size="small"
:disabled="currentSelectedNodes.length == 0"
@click="removeAll"
>
全部移除
</Button>
</div>
<div class="item-list">
<div
v-for="node,index in currentSelectedNodes"
:key="node.id"
>
<div
class="item"
@click="rightSideClickedNodeIndex = index"
:class="`${rightSideClickedNodeIndex == index ? 'selected-item' : ''}`"
>
{{node.title}}
</div>
</div>
</div>
</div>
</div>
</Modal>
</div>
</template>
<script>
......@@ -31,33 +138,157 @@ export default {
},
data() {
return {
postTemplate: {},
reimburseList: [],
rowIconNum: 4,
appMap: new Map(),
cardWrapperHeight: 118,
editModalVisible: false,
appTree: [],
defaultProps: {
children: 'children',
label: 'title',
},
currentSelectedNodes: [],
rightSideClickedNodeIndex: null,
curPage: 0,
rowNum: 1,
pageNum: 0,
iconList: [
{
value: '#icon-a-46_HOME_E_RBC_changyonggongneng_1',
name: '常用功能1',
},
{
value: '#icon-a-46_HOME_E_RBC_changyonggongneng_2',
name: '常用功能2',
},
{
value: '#icon-a-46_HOME_E_RBC_changyonggongneng_3',
name: '常用功能3',
},
{
value: '#icon-a-46_HOME_E_RBC_changyonggongneng_4',
name: '常用功能4',
},
{
value: '#icon-a-46_HOME_E_RBC_changyonggongneng_5',
name: '常用功能5',
},
{
value: '#icon-a-46_HOME_E_RBC_changyonggongneng_6',
name: '常用功能6',
},
{
value: '#icon-a-46_HOME_E_RBC_changyonggongneng_7',
name: '常用功能7',
},
{
value: '#icon-a-46_HOME_E_RBC_changyonggongneng',
name: '常用功能8',
},
],
}
},
async created() {
const routes = await window.GMS.util.nvwa.getRoutes()
this.addApp(routes.data.children)
let prop = this.itemSetting.properties
if (prop) {
this.rowIconNum = Number(prop?.properties?.rowIconNum || 4)
this.reimburseList = this.mapFunction(prop)
}
computed: {
curPageList() {
const pageSize = this.rowIconNum * this.rowNum
return this.reimburseList.slice(pageSize * this.curPage, pageSize * (this.curPage + 1))
},
},
watch: {
},
created() {
},
mounted() {
window.GMS.vbus.$on('widgetPluginPropertiesChange', (val) => {
if (!val.id || val.id != this.itemSetting.type + this.itemSetting.id) return
this.rowIconNum = Number(val?.properties?.rowIconNum || 4)
this.reimburseList = this.mapFunction(val.properties)
window.GMS.util.nvwa.getRoutes().then((routes) => {
this.appTree = [routes.data]
this.addApp(routes.data.children)
this.getData()
})
this.cardWrapperHeight = this.$refs.cardWrapper.clientHeight || this.$refs.cardWrapper.offsetHeight
this.rowNum = Math.floor(this.cardWrapperHeight / 118)
if (this.rowNum == 0) this.rowNum = 1
},
unmounted() {
window.GMS.vbus.$off('widgetPluginPropertiesChange')
},
methods: {
mapFunction(val = { configList: [] }) {
return val.configList.filter(o => this.appMap.has(o.function)).map(o => ({...o, function: this.appMap.get(o.function)}))
getData() {
return window.GMS.$http.get('/rbc/workflow/commonFunction/getConfig').then((res) => {
const obj = res && res.data && res.data.config || {}
this.postTemplate = obj
this.rowIconNum = obj.columnNum || 4
const idList = obj.configInfo || []
this.reimburseList = []
this.currentSelectedNodes = []
let i = 0
for (let id of idList) {
if (this.appMap.has(id)) {
this.currentSelectedNodes.push(this.appMap.get(id))
if (i >= this.iconList.length) i = 0
this.reimburseList.push({
function: this.appMap.get(id),
icon: this.iconList[i++].value
})
}
}
this.pageNum = Math.ceil(this.reimburseList.length / this.rowIconNum / this.rowNum)
this.$refs.tree.setCheckedKeys(this.currentSelectedNodes.map((o) => o.id))
})
},
updateData() {
return window.GMS.$http.post(
'/rbc/workflow/commonFunction/update',
{
...this.postTemplate,
columnNum: this.rowIconNum,
configInfo: this.currentSelectedNodes.map((o) => o.id),
}
)
},
switchPage(index) {
if (index < 0) index = 0
if (index > this.pageNum - 1) index = this.pageNum - 1
this.curPage = index
},
removeAll() {
this.$refs.tree.setCheckedKeys([])
this.currentSelectedNodes = []
this.rightSideClickedNodeIndex = null
},
removeItem() {
this.$refs.tree.setChecked(this.currentSelectedNodes[this.rightSideClickedNodeIndex].id, false)
this.currentSelectedNodes.splice(this.rightSideClickedNodeIndex, 1)
this.rightSideClickedNodeIndex = null
},
moveItem(distance) {
const curItem = this.currentSelectedNodes[this.rightSideClickedNodeIndex]
this.currentSelectedNodes[this.rightSideClickedNodeIndex] = this.currentSelectedNodes[this.rightSideClickedNodeIndex + distance]
this.currentSelectedNodes[this.rightSideClickedNodeIndex + distance] = curItem
this.currentSelectedNodes = [...this.currentSelectedNodes]
this.rightSideClickedNodeIndex += distance
},
handleCheckChange() {
const nodeList = this.$refs.tree.getCheckedNodes(true)
for (let i = 0; i < this.currentSelectedNodes.length; ++i) {
if (!nodeList.some((o) => o.id == this.currentSelectedNodes[i].id)) {
this.currentSelectedNodes.splice(i, 1)
;--i
}
}
for (let i = 0; i < nodeList.length; ++i) {
if (!this.currentSelectedNodes.some((o) => o.id == nodeList[i].id)) {
this.currentSelectedNodes.push(nodeList[i])
}
}
},
handleOk() {
this.updateData().then(this.getData)
},
handleCancel() {
this.getData()
},
addApp(l = []) {
for (let o of l) {
......@@ -100,11 +331,99 @@ export default {
background: #5369D8;
border-radius: 2px;
}
.edit-icon {
cursor: pointer;
font-size: 22px;
position: absolute;
right: 0;
top: 0;
}
}
.card-wrapper {
.carousel-wrapper {
height: ~"calc(100% - 22px)";
.carousel-container {
width: 100%;
height: ~"calc(100% - 15px)";
display: flex;
.arrow {
color: #909090;
width: 25px;
font-size: 25px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
}
.card-wrapper {
flex: 1;
display: flex;
flex-wrap: wrap;
}
}
.carousel-indicator {
height: 15px;
display: flex;
align-items: center;
justify-content: center;
.block {
width: 35px;
height: 8px;
margin: 0 5px;
position: relative;
cursor: pointer;
&::before {
position: absolute;
left: 0;
top: ~"calc(50% - 1px)";
width: 35px;
height: 2px;
background-color: #A0A0A0;
border-radius: 1px;
content: '';
}
}
.block-active {
&::before {
top: ~"calc(50% - 2px)";
height: 4px;
border-radius: 2px;
background-color: green;
}
}
}
}
}
.commonfunctions-modal {
.transfer {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
height: 45vh;
.tree-wrapper {
width: 50%;
height: 100%;
overflow: scroll;
}
.selected-item-wrapper {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
.button-group-wrapper {
padding-left: 5px;
}
.item-list {
flex: 1;
overflow: scroll;
padding: 2px 5px;
.item {
margin: 2px 0;
cursor: pointer;
}
.selected-item {
background-color: #00579130;
}
}
}
}
}
......
develop/@gms/gms-plugin-mainpage-commonfunctions/src/views/property.vue
......@@ -2,35 +2,6 @@
<Collapse v-model="value1" class="property">
<Panel name="1">
列表设置
<div slot="content">
<Form :label-width="80">
<FormItem label="每行图标数目">
<Input v-model="properties.rowIconNum" />
</FormItem>
</Form>
<Divider />
<div class="property-item" v-for="(config, index) in properties.configList" :key="index">
<Form :model="config" :label-width="80">
<FormItem label="功能">
<Select v-model="config.function" filterable>
<Option v-for="item in functionList" :value="item.id" :key="item.id">
{{item.title}}
</Option>
</Select>
</FormItem>
<FormItem label="图标">
<Select v-model="config.icon">
<Option v-for="item in iconList" :key="item.value" :value="item.value">
{{item.name}}
</Option>
</Select>
</FormItem>
</Form>
<Button size="small" type="error" @click="removeItem(index)">删除</Button>
<Divider />
</div>
<Button size="small" type="primary" @click="addItem">添加</Button>
</div>
</Panel>
</Collapse>
</template>
......@@ -38,17 +9,6 @@
<script>
export default {
watch: {
'properties.configList': {
handler(newVal) {
window.GMS.vbus.$emit('widgetPluginPropertiesChange', { id: this.type + this.id, properties: this.properties })
this.itemSetting.properties = this.properties
},
deep: true,
},
'properties.rowIconNum'() {
window.GMS.vbus.$emit('widgetPluginPropertiesChange', { id: this.type + this.id, properties: this.properties })
this.itemSetting.properties = this.properties
}
},
props: {
itemSetting: {
......@@ -62,40 +22,7 @@ export default {
properties: { configList: [] },
configList: [],
functionList: [],
iconList: [
{
value: '#icon-a-46_HOME_E_RBC_changyonggongneng_1',
name: '常用功能1',
},
{
value: '#icon-a-46_HOME_E_RBC_changyonggongneng_2',
name: '常用功能2',
},
{
value: '#icon-a-46_HOME_E_RBC_changyonggongneng_3',
name: '常用功能3',
},
{
value: '#icon-a-46_HOME_E_RBC_changyonggongneng_4',
name: '常用功能4',
},
{
value: '#icon-a-46_HOME_E_RBC_changyonggongneng_5',
name: '常用功能5',
},
{
value: '#icon-a-46_HOME_E_RBC_changyonggongneng_6',
name: '常用功能6',
},
{
value: '#icon-a-46_HOME_E_RBC_changyonggongneng_7',
name: '常用功能7',
},
{
value: '#icon-a-46_HOME_E_RBC_changyonggongneng',
name: '常用功能8',
},
],
}
},
computed: {
......@@ -130,13 +57,6 @@ export default {
},
},
created() {
window.GMS.util.nvwa.getRoutes().then((res) => {
this.addFunction(res.data.children)
})
let prop = this.itemSetting.properties
if (prop && prop.configList) {
this.properties = prop
}
},
}
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment