241 lines
7.0 KiB
Vue
241 lines
7.0 KiB
Vue
<!-- 开始节点配置 -->
|
|
<template>
|
|
<div class="start-event">
|
|
<a-form ref="formRef" :rules="rules" :model="node" labelAlign="left" :label-col="labelCol"
|
|
:wrapper-col="wrapperCol">
|
|
<a-form-item label="节点标识">
|
|
<a-input v-model:value="node.id" placeholder="请输入" readonly />
|
|
</a-form-item>
|
|
<a-form-item label="下一审核人">
|
|
<a-switch v-model:checked="node.isNextAuditor" />
|
|
</a-form-item>
|
|
<a-form-item label="自定义标题">
|
|
<a-switch v-model:checked="node.isCustmerTitle" />
|
|
</a-form-item>
|
|
<a-form-item label="通知策略" name="f_Color">
|
|
<a-checkbox-group v-model:value="node.messageType" name="checkboxgroup"
|
|
:options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]" />
|
|
</a-form-item>
|
|
<a-divider plain="true">表单添加</a-divider>
|
|
<a-tabs v-model:activeKey="node.formType" type="card" size="small" centered="true">
|
|
<a-tab-pane key="1" tab="自定义表单">
|
|
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
|
<a-space-compact block>
|
|
<a-select v-model:value="node.formVerison" placeholder="请选择表单版本">
|
|
<a-select-option value="shanghai">Zone one</a-select-option>
|
|
<a-select-option value="beijing">Zone two</a-select-option>
|
|
</a-select>
|
|
</a-space-compact>
|
|
<a-space-compact block>
|
|
<a-select v-model:value="node.formRelationId" placeholder="请选择流程关联字段">
|
|
<a-select-option value="shanghai">Zone one</a-select-option>
|
|
<a-select-option value="beijing">Zone two</a-select-option>
|
|
</a-select>
|
|
</a-space-compact>
|
|
</a-space>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="2" tab="系统表单">
|
|
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
|
<a-space-compact block>
|
|
<a-input v-model:value="node.formUrl" placeholder="请输入PC端表单地址" />
|
|
</a-space-compact>
|
|
<a-space-compact block>
|
|
<a-input v-model:value="node.formAppUrl" placeholder="请输入APP端表单地址" />
|
|
</a-space-compact>
|
|
</a-space>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
|
|
<a-divider plain="true">表单字段权限</a-divider>
|
|
<a-table :columns="data.columns" :data-source="node.authFields" bordered :pagination="false"
|
|
v-if="node.formType == 1">
|
|
<template #bodyCell="{ column, text, record }">
|
|
<template v-if="['label', 'field'].includes(column.dataIndex)">
|
|
<div>
|
|
{{ text }}
|
|
</div>
|
|
</template>
|
|
<template v-else-if="['required', 'isEdit','isLook'].includes(column.dataIndex)">
|
|
<div>
|
|
<a-switch v-model:checked="record[column.dataIndex]" />
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
<a-table :columns="data.columns" :data-source="node.authFields" bordered :pagination="false" v-else>
|
|
<template #bodyCell="{ column, text, record }">
|
|
<template v-if="['label', 'field'].includes(column.dataIndex)">
|
|
<div>
|
|
{{ text }}
|
|
</div>
|
|
</template>
|
|
<template v-else-if="['required', 'isEdit','isLook'].includes(column.dataIndex)">
|
|
<div>
|
|
<a-switch v-model:checked="record[column.dataIndex]" />
|
|
</div>
|
|
</template>
|
|
<template v-else-if="column.dataIndex === 'operation'">
|
|
<delete-outlined two-tone-color='#eb2f96' @click='handleDeleteAuthField(record.field)' />
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
|
|
<a-divider plain="true"></a-divider>
|
|
<a-space v-if="node.formType!=1">
|
|
<a-button @click="handleAddAuthField" width="100%" type="dashed" danger :icon="h(PlusOutlined)">添加字段</a-button>
|
|
</a-space>
|
|
</a-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, defineProps, computed, inject, ref, watch, h ,onMounted} from 'vue'
|
|
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
|
|
import { getDetail } from '@/api/sys/WFSchemeInfo'
|
|
|
|
const labelCol = { span: 7 };
|
|
const wrapperCol = { span: 17 };
|
|
const props = defineProps({
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
element: Object,
|
|
schemeCode:String,
|
|
})
|
|
const data = reactive({
|
|
columns: [
|
|
{
|
|
title: '名称',
|
|
dataIndex: 'label',
|
|
},
|
|
{
|
|
title: '字段',
|
|
dataIndex: 'field',
|
|
},
|
|
{
|
|
title: '必填',
|
|
dataIndex: 'required',
|
|
},
|
|
{
|
|
title: '编辑',
|
|
dataIndex: 'isEdit',
|
|
},
|
|
{
|
|
title: '查看',
|
|
dataIndex: 'isLook',
|
|
},
|
|
|
|
|
|
],
|
|
formRelations: [],
|
|
elementData: props.element
|
|
})
|
|
let node = ref({
|
|
id: data.elementData.id,
|
|
type: data.elementData.type,
|
|
isNextAuditor: false,
|
|
isCustmerTitle: false,
|
|
formRelations: [],
|
|
formType: "1",
|
|
formCode: "",
|
|
formVerison: "",
|
|
formRelationId: "",
|
|
formUrl: "",
|
|
formAppUrl: "",
|
|
authFields: [
|
|
{
|
|
label: '测试',
|
|
field: 'ceshi',
|
|
required: true,
|
|
isEdit: true,
|
|
isLook: true,
|
|
}
|
|
],
|
|
messageType: "",
|
|
isInit: true
|
|
})
|
|
watch(
|
|
() => props.element,
|
|
(newVal, oldVal) => {
|
|
if(newVal.type == "bpmn:StartEvent"){
|
|
node.value.id = newVal.id
|
|
node.value.type = newVal.type
|
|
getDetailInfo()
|
|
}
|
|
}
|
|
)
|
|
watch(
|
|
() => node.value.formType,
|
|
(newVal, oldVal) => {
|
|
if (newVal == 1) {
|
|
data.columns = data.columns.filter(item => item.dataIndex !== 'operation');
|
|
} else {
|
|
data.columns.push({
|
|
title: '',
|
|
dataIndex: 'operation',
|
|
})
|
|
}
|
|
}
|
|
)
|
|
async function getDetailInfo() {
|
|
let data = await getDetail({ code: props.schemeCode })
|
|
let scheme = JSON.parse(data.scheme.content);
|
|
let wfData = scheme.wfData
|
|
wfData.forEach(element => {
|
|
if(element.id == node.value.id){
|
|
node.value = element
|
|
}
|
|
});
|
|
|
|
}
|
|
function handleAddAuthField() {
|
|
node.value.authFields.push({
|
|
field: '',
|
|
label: '',
|
|
required: true,
|
|
isEdit: true,
|
|
isLook: true
|
|
})
|
|
}
|
|
function handleDeleteAuthField(key) {
|
|
node.value.authFields = node.value.authFields.filter(item => item.field !== key);
|
|
}
|
|
function getForm() {
|
|
return node.value
|
|
}
|
|
defineExpose({
|
|
getForm
|
|
})
|
|
onMounted(() => {
|
|
if (props.schemeCode) {
|
|
getDetailInfo()
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.site-space-compact-wrapper {
|
|
width: 100%;
|
|
|
|
.ant-select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
::v-deep .ant-tabs {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
::v-deep .ant-space {
|
|
width: 90%;
|
|
margin-left: 5%;
|
|
|
|
.ant-space-item {
|
|
width: 100%;
|
|
|
|
button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style> |