Commit c76c3252 by Joey

feat(@gms/gms-plugin-billexpand): 取回按钮,变更轨迹

parent e77d0b19
export default {
execute(bill, param) {
bill = bill.dom || bill
bill.setControlsSate(param["_control_name_"], "enable", false)
GMS.$http.post(
`/rbc/bill/action/zgh/change/work/${param.define}/bill.Basic.retrieve`,
{
approvalComments: comments,
data: bill.getBuillData(),
detailData: [],
}
).then(() => {
GMS.$hideContainer.$Message.success('操作成功!')
bill.setControlsSate(param["_control_name_"], "enable", true)
bill.setControlsSate(param["_control_name_"], "loading", false)
}).catch(() => {
GMS.$hideContainer.$Message.error('系统错误,请联系管理员')
bill.setControlsSate(param["_control_name_"], "enable", true)
bill.setControlsSate(param["_control_name_"], "loading", false)
})
},
}
<template>
<div>
<div class="modification-button" :style="{top: styleTop, right: styleRight}" @click="showDrawer = true">
<div class="icon">
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#icon-a-28_BILLEXPAND_C_RBC_xinshenpiguiji"></use>
</svg>
</div>
</div>
<Drawer
:transfer="false"
title="变更轨迹"
:closable="true"
v-model="showDrawer"
:width="styleDrawerWidth"
:inner="true"
:mask="false"
>
<div v-if="!data || data.length == 0">暂无数据</div>
<div v-if="data && data.length" class="modification-step-wrapper">
<div
class="modification-step"
v-for="step, k in data"
:key="k"
>
<div class="step-head">
<div class="step-circle">
</div>
<div :class="`step-line waiting-line`" v-if="k != data.length - 1"></div>
</div>
<div class="step-main">
<div class="main-body">
<div class="text-black">
<div>
<span class="participants">{{step.createUserName}}</span>
</div>
</div>
<div>{{formatDate(step.createTime)}}</div>
<div class="comment">
<div class="modification">
<div
v-for="modification in step.modifyDesc"
:key="modification.label"
>
<div class="label text-main">{{modification.label}}</div>
<div v-if="isArray(modification.value)">
<div
class="sub-table-modification-header"
@click="currentExpandBlock == modification ? currentExpandBlock = null : currentExpandBlock = modification"
>
<Icon v-if="isCurrentExpandBlock(modification)" type="ios-arrow-down" />
<Icon v-else type="ios-arrow-forward" />
<div>{{ isCurrentExpandBlock(modification) ? '收起明细' : '展开明细' }}</div>
</div>
<div style="margin-left: 10px" v-if="isCurrentExpandBlock(modification)">
<div
v-for="subModification in modification.value[0]"
:key="subModification.label"
>
<div class="label text-main">{{subModification.label}}</div>
<ValueChangeDetail :value="subModification.value" />
</div>
</div>
</div>
<ValueChangeDetail v-else :value="modification.value" />
<Divider />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Drawer>
</div>
</template>
<script>
import ValueChangeDetail from './value-change-detail.vue'
export default {
components: {
ValueChangeDetail,
},
props: {
define: {
type: Object,
required: true,
},
context: {
type: Object,
default: () => { }
}
},
data() {
return {
showDrawer: false,
data: [],
currentExpandBlock: null,
}
},
computed: {
styleTop() {
return this.define.layout.top || '0px'
},
styleRight() {
return this.define.layout.right || '0px'
},
styleDrawerWidth() {
return this.define.layout.drawerWidth || '400px'
},
},
mounted() {
console.log(this.define, this.context)
const { tableName } = this.define.config
const subTable = this.context.bill.getSubData(tableName)
if (subTable instanceof Array) {
this.data = subTable.map((o) => {
const ans = {}
;['createTime', 'createUserName', 'deptName', 'modifyDesc'].forEach((key) => {
ans[key] = o.getValue(key)
})
ans['createTime'] = new Date(ans['createTime']).format('yyyy-MM-dd HH:mm:ss')
console.log(ans['modifyDesc'])
ans['modifyDesc'] = JSON.parse(ans['modifyDesc'])
return ans
})
}
console.log(this.data)
},
beforeDestroy() {
},
methods:{
isCurrentExpandBlock(block) {
return this.currentExpandBlock === block
},
isArray(obj) {
return obj instanceof Array
},
formatDate(datetime) {
const t = new Date(datetime)
return t.format('yyyy-MM-dd HH:mm:ss')
},
},
}
</script>
<style lang="less" scoped>
@icon-width: 24px;
@main-color: #0DA2E6;
.modification-button {
cursor: pointer;
position: absolute;
z-index: 1000;
padding-top: 4px;
width: 42px;
height: 36px;
background: #005791;
box-shadow: 0 0 4px 0 rgba(109,109,109,0.50);
border-radius: 100px 0 0 100px;
.icon {
width: 28px;
height: 28px;
margin-left: 11px;
}
.text {
margin-top: 2px;
text-align: center;
height: 17px;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 17px;
text-shadow: 0px 1px 6px rgba(255, 169, 56, 0.8);
}
}
.modification-step-wrapper {
width: 100%;
.modification-step {
width: 100%;
position: relative;
.step-head {
width: @icon-width;
position: absolute;
height: 100%;
.step-circle {
width: 10px;
height: 10px;
border-radius: 50%;
margin: 5px auto 0 auto;
border: 1px @main-color solid;
}
.waiting-icon {
color: @main-color;
}
.finish-icon {
color: #888;
}
.step-line {
margin-left: @icon-width / 2;
width: 1px;
height: calc(100% - 10px);
}
.finish-line {
background-color: #C8C8C8;
}
.waiting-line {
background-color: @main-color;
}
}
.step-main {
width: 100%;
min-height: calc(@icon-width + 10px);
padding-left: @icon-width;
font-size: 12px;
color: #888888;
line-height: 17px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
.main-body {
padding-bottom: 30px;
padding-left: 5px;
> div {
margin-bottom: 5px;
}
.text-gray {
color: #888888;
}
.text-black {
color: #222222;
}
.text-main {
color: @main-color;
}
.text-error {
color: #ED664B;
}
.participants {
height: 20px;
font-size: 14px;
line-height: 20px;
}
.result {
height: 20px;
font-size: 14px;
line-height: 20px;
}
.comment {
.modification {
margin-top: 5px;
.sub-table-modification-header {
user-select: none;
cursor: pointer;
display: flex;
align-items: center;
}
}
}
}
}
}
}
</style>
<template>
<div class="value-change-detail">
<div class="value-block">{{value.oldDesc || 'null'}}</div>
<div class="arrow"><Icon type="md-arrow-round-forward" /></div>
<div class="value-block">{{value.newDesc || 'null'}}</div>
</div>
</template>
<script>
export default {
props: {
value: {
default: () => ({}),
type: Object,
},
}
}
</script>
<style lang="less" scoped>
.value-change-detail {
display: flex;
.value-block {
width: 45%;
}
.arrow {
width: 10%;
height: 100%;
align-self: center;
color: #0DA2E6;
}
}
</style>
\ No newline at end of file
export default {
billControl: [
{
"title": "变更轨迹",
"description": "",
"discard": false,
"dynamicComponent": 'billForm',
"extends": {
"config": [
{
"ref": "BillClassVO.all",
"type": "field",
"title": "操作表名称",
"valueKey": "bagName",
"key": "tableName"
},
{},
],
},
"value": "ModificationTrack",
"path": "报销/通用"
},
{
"title": "绩效表样",
"description":"",
"discard": false,
......@@ -2245,6 +2265,18 @@ export default {
},
{
"discard": false,
"path": "报销/工会",
"extends": {
"param": [
]
},
"description": "",
"title": "工会_取回[GH_retrieveAction]",
"value": "GH_retrieveAction",
"btnDisable": "billEdit"
},
{
"discard": false,
"path": "资产/通用",
"extends": {
"param": [
......
......@@ -45,6 +45,7 @@ import lincaoReadView from './actions/lincaoReadView';
import GH_agreeAction from './actions/labourUnion/gh_agreeAction.js';
import GH_rejectAction from './actions/labourUnion/gh_rejectAction.js';
import GH_submitAction from './actions/labourUnion/gh_submitAction.js';
import GH_retrieveAction from './actions/labourUnion/gh_retrieveAction.js';
//queryAction
import leafletGenerationAction from './query-actions/leafletGenerationAction.js'
......@@ -87,6 +88,7 @@ import IntroduceInputControl from './control/IntroduceInputControl.vue'
import InputModalControl from './control/InputModalControl.vue'
import Achievements from './control/vxe-achievements/achievements.vue'
import VxeSubjectControl from './control/vxeTableExpand/VxeSubjectControl.js'
import ModificationTrack from './control/modification-track/modification-track.vue'
//formula
import GeneralImportFile from './formula/GeneralImportFile.js';
......@@ -213,7 +215,8 @@ export default {
openNewPageDetail,
GH_agreeAction,
GH_rejectAction,
GH_submitAction
GH_submitAction,
GH_retrieveAction,
},
billAction: {
printMultiAction,
......@@ -271,7 +274,8 @@ export default {
IntroduceInputControl,
InputModalControl,
Achievements,
VxeSubjectControl
VxeSubjectControl,
ModificationTrack,
},
formula: {
SubTableSetBaseData,
......
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