feat: 允许流程在某个节点单独控制是否可以明细表新加行
This commit is contained in:
gaoyunqi
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="tbl-toolbar">
|
||||
<a-button v-if="useSelectButton" :disabled="disabled" class="select-btn" type="primary" @click="multipleDialog = true">
|
||||
<a-button v-if="useSelectButton && !disableAddRow" :disabled="disabled" class="select-btn" type="primary" @click="multipleDialog = true">
|
||||
{{ buttonName }}
|
||||
</a-button>
|
||||
<a-button v-if="!disabled" type="primary" @click="add">
|
||||
<a-button v-if="!disabled && !disableAddRow" type="primary" @click="add">
|
||||
<PlusOutlined />
|
||||
{{ t('新增') }}
|
||||
</a-button>
|
||||
@ -154,6 +154,10 @@
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disableAddRow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 预加载数据为api时使用
|
||||
*/
|
||||
|
||||
@ -146,6 +146,9 @@ function schemeList(
|
||||
if (isViewProcess) {
|
||||
schema.dynamicDisabled = true;
|
||||
}
|
||||
if ((permissionConfig.children || []).find((item) => item.fieldId === '_row_ctrl_' && !item.edit)) {
|
||||
schema.componentProps.disableAddRow = true;
|
||||
}
|
||||
if (!permissionConfig?.view) {
|
||||
schema.show = false;
|
||||
} else {
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="opr-box">
|
||||
<NodeHead :nodeName="t('表单列表')" />
|
||||
<div class="button-box">
|
||||
<SettingModal :list="[]" :isSingle="false" @submit="addItem">
|
||||
<SettingModal :isSingle="false" :list="[]" @submit="addItem">
|
||||
<a-button type="primary">{{ t('添加表单') }}</a-button>
|
||||
</SettingModal>
|
||||
</div>
|
||||
@ -15,14 +15,11 @@
|
||||
<span class="form-type">{{ t('表单类型') }}</span>
|
||||
<span class="opr">{{ t('操作') }}</span>
|
||||
</div>
|
||||
<div class="body" v-if="formSetting.list.length > 0">
|
||||
<div class="box" v-for="(item, index) in formSetting.list" :key="index">
|
||||
<div v-if="formSetting.list.length > 0" class="body">
|
||||
<div v-for="(item, index) in formSetting.list" :key="index" class="box">
|
||||
<div class="row item">
|
||||
<div class="up-or-down" @click="item.showChildren = !item.showChildren">
|
||||
<Icon
|
||||
class="icon"
|
||||
:icon="item.showChildren ? 'ant-design:up-outlined' : 'ant-design:down-outlined'"
|
||||
/>
|
||||
<Icon :icon="item.showChildren ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" class="icon" />
|
||||
</div>
|
||||
<span class="form-name">{{ item.formName }}</span>
|
||||
<span class="form-type">{{ formTypeOptions[item.formType] }}</span>
|
||||
@ -32,118 +29,61 @@
|
||||
<div style="width: 300px">
|
||||
<p>{{ t('删除表单') }}</p>
|
||||
<p>{{ t('删除表单会清空已引用该表单数据的所有配置，请确认是否继续？') }}</p>
|
||||
<p class="pop-desc">{{
|
||||
t('如果引用该表单的配置较多，清空时间会相应变长，请耐心等待。')
|
||||
}}</p>
|
||||
<p class="pop-desc">{{ t('如果引用该表单的配置较多，清空时间会相应变长，请耐心等待。') }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<Icon icon="ant-design:delete-outlined" class="delete-icon" />
|
||||
<Icon class="delete-icon" icon="ant-design:delete-outlined" />
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="children list"
|
||||
v-if="item.showChildren && item.children && item.children.length > 0"
|
||||
>
|
||||
<div v-if="item.showChildren && item.children && item.children.length > 0" class="children list">
|
||||
<div class="row head">
|
||||
<span class="flex-baisc-4"></span>
|
||||
<span>{{ t('字段名') }}</span>
|
||||
<span>{{ t('字段ID') }}</span>
|
||||
<span
|
||||
><a-checkbox
|
||||
v-model:checked="item.requiredAll"
|
||||
size="small"
|
||||
@change="requiredAll(item)"
|
||||
>{{ t('必填') }}</a-checkbox
|
||||
></span
|
||||
>
|
||||
<span
|
||||
><a-checkbox v-model:checked="item.viewAll" size="small" @change="viewAll(item)">{{
|
||||
t('查看')
|
||||
}}</a-checkbox></span
|
||||
>
|
||||
<span
|
||||
><a-checkbox v-model:checked="item.editAll" size="small" @change="editAll(item)">{{
|
||||
t('编辑')
|
||||
}}</a-checkbox></span
|
||||
>
|
||||
<span>
|
||||
<a-checkbox v-model:checked="item.requiredAll" size="small" @change="requiredAll(item)">{{ t('必填') }}</a-checkbox>
|
||||
</span>
|
||||
<span>
|
||||
<a-checkbox v-model:checked="item.viewAll" size="small" @change="viewAll(item)">{{ t('查看') }}</a-checkbox>
|
||||
</span>
|
||||
<span>
|
||||
<a-checkbox v-model:checked="item.editAll" size="small" @change="editAll(item)">{{ t('编辑') }}</a-checkbox>
|
||||
</span>
|
||||
</div>
|
||||
<div class="body" v-if="item.children.length > 0">
|
||||
<div
|
||||
v-for="(child, childIndex) in item.children"
|
||||
:key="childIndex"
|
||||
class="padding-left"
|
||||
>
|
||||
<div class="row item" v-if="child.type != hiddenComponentType">
|
||||
<span
|
||||
><em
|
||||
class="flex-baisc-4"
|
||||
v-if="child.isSubTable"
|
||||
@click="child.showChildren = !child.showChildren"
|
||||
>
|
||||
<Icon
|
||||
class="icon"
|
||||
:icon="
|
||||
child.showChildren ? 'ant-design:up-outlined' : 'ant-design:down-outlined'
|
||||
"
|
||||
/> </em
|
||||
>{{ child.fieldName }}</span
|
||||
>
|
||||
<div v-if="item.children.length > 0" class="body">
|
||||
<div v-for="(child, childIndex) in item.children" :key="childIndex" class="padding-left">
|
||||
<div v-if="child.type != hiddenComponentType" class="row item">
|
||||
<span>
|
||||
<em v-if="child.isSubTable" class="flex-baisc-4" @click="child.showChildren = !child.showChildren"> <Icon :icon="child.showChildren ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" class="icon" /> </em
|
||||
>{{ child.fieldName }}
|
||||
</span>
|
||||
<span>{{ child.fieldId }}</span>
|
||||
<span>
|
||||
<a-switch
|
||||
v-if="!child.isSubTable && !doNotShowControl.includes(child.type)"
|
||||
v-model:checked="child.required"
|
||||
:disabled="requiredDisabled.includes(child.type) || child.isSaveTable"
|
||||
size="small"
|
||||
@change="TableRequired(child.required, child, item)"
|
||||
size="small"
|
||||
/></span>
|
||||
<span>
|
||||
<a-switch
|
||||
v-model:checked="child.view"
|
||||
size="small"
|
||||
@change="TableView(child.view, child, item)"
|
||||
/></span>
|
||||
<span
|
||||
><a-switch
|
||||
v-if="!child.isSubTable && !doNotShowControl.includes(child.type)"
|
||||
:disabled="child.disabled"
|
||||
v-model:checked="child.edit"
|
||||
@change="TableEdit(child.edit, child, item)"
|
||||
size="small"
|
||||
/></span>
|
||||
/>
|
||||
</span>
|
||||
<span><a-switch v-model:checked="child.view" size="small" @change="TableView(child.view, child, item)" /></span>
|
||||
<span><a-switch v-if="!child.isSubTable && !doNotShowControl.includes(child.type)" v-model:checked="child.edit" :disabled="child.disabled" size="small" @change="TableEdit(child.edit, child, item)" /></span>
|
||||
</div>
|
||||
<template
|
||||
v-if="child.showChildren && child.isSubTable && child.children.length > 0"
|
||||
>
|
||||
<div
|
||||
class="row item padding-left"
|
||||
v-for="(child2, childIndex2) in child.children"
|
||||
:key="childIndex2"
|
||||
>
|
||||
<template v-if="child.showChildren && child.isSubTable && child.children.length > 0">
|
||||
<div v-for="(child2, childIndex2) in child.children" :key="childIndex2" class="row item padding-left">
|
||||
<span>{{ child2.fieldName }}</span>
|
||||
<span>{{ child2.fieldId }}</span>
|
||||
<span
|
||||
><a-switch
|
||||
:disabled="child2.disabled || child2.isSaveTable"
|
||||
v-model:checked="child2.required"
|
||||
@change="TableRequired(child2.required, child2, item, child)"
|
||||
size="small"
|
||||
/></span>
|
||||
<span
|
||||
><a-switch
|
||||
:disabled="child2.disabled"
|
||||
v-model:checked="child2.view"
|
||||
@change="TableView(child2.view, child2, item, child)"
|
||||
size="small"
|
||||
/></span>
|
||||
<span
|
||||
><a-switch
|
||||
:disabled="child2.disabled || child2.isSaveTable"
|
||||
v-model:checked="child2.edit"
|
||||
@change="TableEdit(child2.edit, child2, item, child)"
|
||||
size="small"
|
||||
/></span>
|
||||
<span>
|
||||
<a-switch v-model:checked="child2.required" :disabled="child2.disabled || child2.isSaveTable || child2.fieldId === ROW_CTRL" size="small" @change="TableRequired(child2.required, child2, item, child)" />
|
||||
</span>
|
||||
<span>
|
||||
<a-switch v-model:checked="child2.view" :disabled="child2.disabled || child2.fieldId === ROW_CTRL" size="small" @change="TableView(child2.view, child2, item, child)" />
|
||||
</span>
|
||||
<span>
|
||||
<a-switch v-model:checked="child2.edit" :disabled="child2.disabled || child2.isSaveTable" size="small" @change="TableEdit(child2.edit, child2, item, child)" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@ -157,7 +97,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import useStateFormInfo from '/@bpmn/hooks/useStateFormInfo';
|
||||
import Icon from '/@/components/Icon/index';
|
||||
import { NodeHead, EmptyBox } from '/@/components/ModalPanel/index';
|
||||
@ -166,17 +106,15 @@
|
||||
import { FormConfigItem } from '/@/model/workflow/formSetting';
|
||||
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import {
|
||||
formPermissionList,
|
||||
hiddenComponentType,
|
||||
requiredDisabled,
|
||||
doNotShowControl,
|
||||
} from '/@bpmn/config/formPermission';
|
||||
import { formPermissionList, hiddenComponentType, requiredDisabled, doNotShowControl } from '/@bpmn/config/formPermission';
|
||||
import { updateFormDataInfo } from '/@bpmn/config/useUpdateAllFormInfo';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { buildUUID } from '/@/utils/uuid';
|
||||
|
||||
const { t } = useI18n();
|
||||
const { formInfo } = useStateFormInfo();
|
||||
const formTypeOptions = {};
|
||||
const ROW_CTRL = '_row_ctrl_';
|
||||
formTypeOptions[FormType.CUSTOM] = t('自定义表单');
|
||||
formTypeOptions[FormType.SYSTEM] = t('系统表单');
|
||||
let formSetting: { list: Array<FormConfigItem> } = reactive({ list: [] });
|
||||
@ -184,9 +122,48 @@
|
||||
onMounted(() => {
|
||||
if (formInfo.value.formConfigs) formSetting.list = formInfo.value.formConfigs;
|
||||
formSetting.list.forEach((val) => {
|
||||
addTableRowCtrl();
|
||||
checkIsAll(val);
|
||||
});
|
||||
});
|
||||
|
||||
function addTableRowCtrl() {
|
||||
formSetting.list.forEach((form) => {
|
||||
recAddTableRowCtrl(form);
|
||||
});
|
||||
}
|
||||
|
||||
function recAddTableRowCtrl(parent) {
|
||||
if (parent.isSubTable) {
|
||||
if (!parent.children || parent.children.length === 0) {
|
||||
return;
|
||||
}
|
||||
const hasRowCtrl = parent.children.find((item) => item.fieldId === '_row_ctrl_');
|
||||
if (!hasRowCtrl) {
|
||||
parent.children.push({
|
||||
disabled: false,
|
||||
edit: true,
|
||||
fieldId: ROW_CTRL,
|
||||
fieldName: '添加新行*',
|
||||
isSaveTable: false,
|
||||
isSubTable: true,
|
||||
key: buildUUID(),
|
||||
required: false,
|
||||
showChildren: false,
|
||||
tableName: parent.tableName,
|
||||
view: true
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (parent.children && parent.children.length) {
|
||||
parent.children.forEach((child) => {
|
||||
recAddTableRowCtrl(child);
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function deleteItem(index: number) {
|
||||
updateFormDataInfo(formSetting.list[index]['key']);
|
||||
formSetting.list.splice(index, 1);
|
||||
@ -220,8 +197,10 @@
|
||||
}
|
||||
if (requiredAll) ele.view = true;
|
||||
if (ele.children && ele.children.length > 0) {
|
||||
ele.children.map(
|
||||
(ele2: { disabled: any; required: boolean; view: boolean; edit: boolean }) => {
|
||||
ele.children.map((ele2: { disabled: any; required: boolean; view: boolean; edit: boolean }) => {
|
||||
if (ele2.fieldId === ROW_CTRL) {
|
||||
return;
|
||||
}
|
||||
if (!ele2.disabled) {
|
||||
if (requiredAll) {
|
||||
ele2.required = true;
|
||||
@ -231,8 +210,7 @@
|
||||
}
|
||||
}
|
||||
if (requiredAll) ele2.view = true;
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
return ele;
|
||||
});
|
||||
@ -258,8 +236,7 @@
|
||||
}
|
||||
if (editAll) ele.view = true;
|
||||
if (ele.children && ele.children.length > 0) {
|
||||
ele.children.map(
|
||||
(ele2: { disabled: any; required: boolean; view: boolean; edit: boolean }) => {
|
||||
ele.children.map((ele2: { disabled: any; required: boolean; view: boolean; edit: boolean }) => {
|
||||
if (!ele2.disabled) {
|
||||
if (editAll) {
|
||||
ele2.edit = true;
|
||||
@ -269,12 +246,12 @@
|
||||
}
|
||||
}
|
||||
if (editAll) ele2.view = true;
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
return ele;
|
||||
});
|
||||
}
|
||||
|
||||
function viewAll(item) {
|
||||
// 查看所有为true， 所有的查看都为true（除了disabled）
|
||||
// 查看所有为false， 所有查看都为false（除了disabled）
|
||||
@ -293,6 +270,9 @@
|
||||
}
|
||||
if (ele.children && ele.children.length > 0) {
|
||||
ele.children.map((ele2) => {
|
||||
if (ele2.fieldId === ROW_CTRL) {
|
||||
return;
|
||||
}
|
||||
if (viewAll) {
|
||||
ele2.view = true;
|
||||
} else {
|
||||
@ -305,6 +285,7 @@
|
||||
return ele;
|
||||
});
|
||||
}
|
||||
|
||||
function TableRequired(required, child, item, cur?) {
|
||||
if (required) {
|
||||
child.view = true;
|
||||
@ -315,6 +296,7 @@
|
||||
checkCurTableIsEdit(cur);
|
||||
}
|
||||
}
|
||||
|
||||
function TableView(view, child, item, cur?) {
|
||||
if (!view) {
|
||||
child.required = view;
|
||||
@ -339,6 +321,7 @@
|
||||
checkCurTableIsEdit(cur);
|
||||
}
|
||||
}
|
||||
|
||||
function TableEdit(edit, child, item, cur?) {
|
||||
if (edit) {
|
||||
child.view = true;
|
||||
@ -350,6 +333,7 @@
|
||||
checkCurTableIsEdit(cur);
|
||||
}
|
||||
}
|
||||
|
||||
function checkCurTableIsEdit(item) {
|
||||
let view = 0;
|
||||
let edit = 0;
|
||||
@ -361,6 +345,7 @@
|
||||
item.view = view > 0 ? true : false;
|
||||
item.edit = edit > 0 ? true : false;
|
||||
}
|
||||
|
||||
function checkIsAll(item) {
|
||||
let all = 0;
|
||||
let required = 0;
|
||||
|
||||
Reference in New Issue
Block a user