Skip to content

R
rbc-demo
Commit daf1dbd8 by yangchen
Options

审批弹框组件

parent 4be9c43f
Showing with 510 additions and 0 deletions
develop/@gms/gms-plugin-billexpand/src/actions/labourUnion/gh_agreeActionDemo.js 0 → 100644
import approvalUserControl from '../../control/approvalOpinionControl.vue'
export default {
execute: function (bill, param) {
/* 审批组件值发生改变时 会触发事件on-change */
let title = '审批意见'
GMS.$hideContainer.$Modal.confirm({
width: 700,
top:100,
render: (h) => {
return h(
approvalUserControl,
{
props: {
title,
},
on: {
'on-change': (val) => {
console.log('on-change',val)
}
}
}
)
},
onOk: () => {
console.log('OK')
},
onCancel: () => {
console.log('cancel')
}
});
},
approvalLogical: function (bill, param) {
},
executeApproval: function(bill, param) {
},
isApproverEqulloginer: function (bill, param) {
}
}
\ No newline at end of file
develop/@gms/gms-plugin-billexpand/src/control/approvalOpinionControl.vue 0 → 100644
<template>
<div>
<div class="suggestion-wrapper">
<div class="label">{{ title }}</div>
<div class="options">
<span @click="openEditModal"
><span data-v-7fbfe69a=""></span
><svg data-v-7fbfe69a="" aria-hidden="true" class="icon">
<use
data-v-7fbfe69a=""
xlink:href="#icon-a-16_BILLEXPAND_C_RBC_EDIT"
></use></svg
></span>
<span @click="handleAdd"
><span data-v-7fbfe69a=""></span
><svg data-v-7fbfe69a="" aria-hidden="true" class="icon">
<use
data-v-7fbfe69a=""
xlink:href="#icon-a-16_BILLEXPAND_A_RBC_ADD"
></use></svg
></span>
</div>
<div class="input-wrapper">
<Input
v-model="value"
type="textarea"
:placeholder="请输入您的意见或在下方选择常用意见"
:maxlength="240"
/>
<div class="suggestion-button-wrapper">
<ConfirmPopover
v-for="suggestion in suggestionOption"
:key="suggestion.code"
v-model="suggestion.visible"
@cancle="suggestion.visible = false"
@confirm="
() => {
handleDelete([suggestion]);
suggestion.visible = false;
}
"
>
<div
class="suggestion-button"
:style="{
background: `${themeColor}15`,
border: `1px solid ${themeColor}29`,
}"
v-show="suggestion.id"
@click="handleSelectSuggestion(suggestion)"
@mouseover="currentHoverSuggestion = suggestion"
@mouseout="currentHoverSuggestion = null"
>
<div class="text" :style="{ color: themeColor }">
{{ suggestion.spyj }}
</div>
<div
@click.stop="$set(suggestion, 'visible', true)"
v-show="suggestion === currentHoverSuggestion"
class="delete-icon"
>
<Icon type="md-close-circle" />
</div>
</div>
</ConfirmPopover>
</div>
</div>
</div>
<el-dialog
v-if="suggestionOptionModal"
title="常用意见列表"
:visible.sync="suggestionOptionModal"
width="60%"
:modal="false"
custom-class="suggestion-option-modal"
>
<div slot="title" class="header">编辑常用意见</div>
<div class="suggestion-modal-toolbar">
<div v-if="suggestionOption.length > 0">
共{{ suggestionOption.length }}条审批意见
</div>
<div class="button-wrapper">
<Button style="margin-right: 5px" size="small" @click="addNewRow"
>添加意见</Button
>
<Poptip
confirm
:transfer="true"
title="是否删除选中项？"
@on-ok="handleBatchDelete"
>
<Button size="small">批量删除</Button>
</Poptip>
</div>
</div>
<Table
ref="suggestionTable"
size="small"
:columns="suggestionTableColumns"
border
:max-height="400"
:data="suggestionOption"
@on-selection-change="handleSelectionChange"
>
<template slot-scope="{ row }" slot="spyj">
<div
v-show="currentEditSuggestion.code != row.code"
@click="handleClickRow(row)"
>
{{ row.spyj }}
</div>
<Input
v-model="currentEditSuggestion.spyj"
v-show="currentEditSuggestion.code === row.code"
:ref="'input-' + row.code"
@on-blur="handleInputBlur(row)"
type="textarea"
:maxlength="240"
/>
</template>
<template slot-scope="{ row, index }" slot="action">
<Button
:class="index < 1 ? '' : 'suggestion-edit-button'"
:disabled="index < 1"
size="small"
type="text"
@click="setOrder(row, -1)"
>
上移
</Button>
<Button
:class="
index >= suggestionOption.length - 1
? ''
: 'suggestion-edit-button'
"
:disabled="index >= suggestionOption.length - 1"
size="small"
type="text"
@click="setOrder(row, 1)"
>
下移
</Button>
<Poptip
confirm
:transfer="true"
title="确定要删除本条意见吗？"
@on-ok="handleDelete([row])"
popper-class="suggestion-edit-table-popper"
>
<Button class="suggestion-edit-button" size="small" type="text"
>删除</Button
>
</Poptip>
</template>
</Table>
</el-dialog>
</div>
</template>
<script>
const TABLE_NAME = "MD_SPYJ";
import ConfirmPopover from "./approval-user-control/confirm-popover";
export default {
name: "ApprovalUserControl",
components: {
ConfirmPopover,
},
props: ["title"],
data() {
return {
value: "",
suggestionOptionModal: false,
reviewParam: {},
taskId: null,
currentEditSuggestion: {},
suggestionOption: [],
suggestionTableColumns: [
{
type: "selection",
width: 50,
align: "center",
},
{
title: "序号",
width: 60,
align: "center",
key: "index",
},
{
title: "审批意见",
slot: "spyj",
},
{
title: "操作",
slot: "action",
maxWidth: 160,
},
],
selectedSuggestion: [],
themeColor: "#5369D8",
currentHoverSuggestion: null,
};
},
watch: {
value(newV) {
this.$emit("on-change", newV);
},
},
mounted() {
this.getSuggestionOptions();
},
methods: {
openEditModal() {
this.suggestionOptionModal = true;
},
genCode() {
return `${Date.now()}${Math.random().toString(36).slice(-8)}`;
},
/**
* @param {object} row
* @param {1 | -1} direction - 1下移，-1上移
*/
async setOrder(row, direction) {
// index 是从1开始的，，，，
if (
row.index + direction > this.suggestionOption.length ||
row.index + direction <= 0
)
return;
const neighborRow = this.suggestionOption[row.index + direction - 1];
await window.GAMS.Util.invokeServer({
path: "bpm/bill/action/updateOrder",
type: "POST",
contentType: "application/json",
data: JSON.stringify(
[row, neighborRow].map((o) => {
const ans = { ...o };
delete ans.index;
return ans;
})
),
});
await this.getSuggestionOptions();
},
addNewRow() {
this.currentEditSuggestion = {
code: this.genCode(),
};
this.suggestionOption.push(this.currentEditSuggestion);
this.$nextTick(() => {
this.focusInput(this.currentEditSuggestion.code);
});
},
focusInput(code) {
this.$refs[`input-${code}`] && this.$refs[`input-${code}`].focus();
},
handleInputBlur(row) {
this.saveSuggestion();
},
handleClickRow(row) {
this.currentEditSuggestion = row;
this.$nextTick(() => {
this.focusInput(row.code);
});
},
handleBatchDelete() {
this.handleDelete(this.selectedSuggestion);
this.selectedSuggestion = [];
},
handleSelectionChange(selection) {
this.selectedSuggestion = [...selection];
},
handleSelectSuggestion(s) {
this.value = s.spyj;
},
handleAdd() {
this.currentEditSuggestion = {
code: this.genCode(),
spyj: this.value,
};
this.saveSuggestion();
},
async add() {
this.currentEditSuggestion = {
name: "",
parentcode: "-",
parentcode_show: { name: "-", title: "-" },
shortname: "",
stopflag: 0,
tableName: TABLE_NAME,
...this.currentEditSuggestion,
};
await window.GAMS.Util.invokeServer({
path: "bpm/bill/action/add",
type: "POST",
contentType: "application/json",
data: JSON.stringify(this.currentEditSuggestion),
});
},
async saveSuggestion() {
if (this.currentEditSuggestion.id) {
await this.update();
} else if (
this.currentEditSuggestion.spyj &&
this.currentEditSuggestion.spyj.trim()
) {
await this.add();
}
this.currentEditSuggestion = {};
this.getSuggestionOptions();
},
async update() {
delete this.currentEditSuggestion.showTitleMap;
this.currentEditSuggestion.ver = Date.now();
await window.GAMS.Util.invokeServer({
path: "baseData/data/update",
type: "POST",
contentType: "application/json",
data: JSON.stringify(this.currentEditSuggestion),
});
},
async handleDelete(s) {
const params = {
dataList: s,
tableName: TABLE_NAME,
};
await window.GAMS.Util.invokeServer({
path: "baseData/data/batch/remove",
type: "POST",
contentType: "application/json",
data: JSON.stringify(params),
});
this.getSuggestionOptions();
},
async getSuggestionOptions() {
console.log("========");
const res = await window.GAMS.Util.invokeServer({
path: "bpm/bill/action/list",
type: "POST",
contentType: "application/json",
data: JSON.stringify({
tableName: TABLE_NAME,
pagination: false,
searchKey: "",
queryDataStructure: "ALL_WITH_REF",
stopflag: -1,
authType: "NONE",
}),
});
this.suggestionOption = ((res && res.rows) || []).map((o, index) => ({
...o,
index: index + 1,
tableName: TABLE_NAME,
}));
},
},
};
</script>
<style lang="less" scoped>
.suggestion-wrapper {
display: block;
.label {
width: auto;
display: inline-block;
height: 40px;
line-height: 40px;
font-size: 16px;
text-align: left;
float: left;
}
.options {
float: right;
height: 40px;
width: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
.input-wrapper {
clear: both;
padding-left: 0px;
.suggestion-button-wrapper {
display: flex;
flex-wrap: wrap;
padding-top: 12px;
max-height: 84px;
overflow: hidden;
.suggestion-button {
cursor: pointer;
height: 28px;
padding: 0px 11px;
margin: 0px 8px 8px 0px;
border-radius: 3px;
position: relative;
.delete-icon {
width: 12px;
height: 12px;
font-size: 10px;
color: red;
position: absolute;
top: -10px;
right: -6px;
}
.text {
height: 28px;
max-width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 28px;
}
}
}
}
}
.suggestion-edit-table-popper[style] {
z-index: 3000 !important;
}
.suggestion-option-modal {
.header {
text-align: left;
height: 22px;
font-size: 16px;
font-weight: 500;
color: #0f0f0f;
line-height: 22px;
}
.el-dialog__header {
border-bottom: 1px solid #e5e5e5;
}
.el-dialog__body {
overflow-y: scroll;
padding-top: 20px;
.suggestion-modal-toolbar {
padding-bottom: 4px;
display: flex;
justify-content: space-between;
.button-wrapper {
flex: 1;
display: flex;
justify-content: flex-end;
}
}
.ivu-table-header thead tr th {
padding: 5px 0px;
}
.ivu-table-small td {
padding: 5px 0px;
}
.ivu-table-cell {
padding: 0 10px;
}
.suggestion-edit-button {
color: #5369d8;
}
}
}
</style>
\ No newline at end of file
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