<script setup lang="ts">
|
import { computed, reactive, ref } from "vue";
|
import { onLoad } from "@dcloudio/uni-app";
|
import { createModel, getCategorySimpleList, getFormSimpleList, getModel, updateModel, type BpmCategory, type BpmFormConfig, type BpmModel } from "../../../api/bpm";
|
import { useAuth } from "../../../stores/auth";
|
import { toast } from "../admin-shared";
|
const { hasPermission, state }=useAuth(); const id=ref<number>(); const mode=ref("edit"); const saving=ref(false); const categories=ref<BpmCategory[]>([]); const forms=ref<BpmFormConfig[]>([]);
|
const readonly=computed(()=>mode.value==="detail"); const canSave=computed(()=>!readonly.value && (id.value ? hasPermission("bpm:model:update") : hasPermission("bpm:model:create"))); const form=reactive<BpmModel>({name:"",key:"",category:"",formType:10,status:0,formId:undefined,description:"",remark:"",formCustomCreatePath:"",formCustomViewPath:""});
|
const categoryIndex=computed(()=>Math.max(0,categories.value.findIndex(x=>x.code===form.category))); const formIndex=computed(()=>Math.max(0,forms.value.findIndex(x=>x.id===form.formId)));
|
async function loadOptions(){ if(!state.accessToken)return; const [cs,fs]=await Promise.all([getCategorySimpleList(state.accessToken),getFormSimpleList(state.accessToken)]); categories.value=cs||[]; forms.value=fs||[]; }
|
onLoad(async q=>{ await loadOptions(); if(q?.id){ id.value=Number(q.id); mode.value=String(q.mode||"edit"); if(state.accessToken) Object.assign(form,await getModel(state.accessToken,id.value)); }});
|
function chooseCategory(index:number){ const item=categories.value[index]; form.category=item?.code||""; }
|
function chooseForm(index:number){ const item=forms.value[index]; form.formId=item?.id; form.formName=item?.name; }
|
async function save(){ if(!canSave.value)return; if(!state.accessToken)return; if(!form.name||!form.key){toast("请填写模型名称和流程标识");return;} saving.value=true; try{ if(id.value) await updateModel(state.accessToken,form); else await createModel(state.accessToken,form); uni.showToast({title:"已保存",icon:"success"}); setTimeout(()=>uni.navigateBack(),500);}finally{saving.value=false}}
|
</script>
|
<template><view class="page"><view class="card"><view class="field"><text>流程名称 <text class="required">*</text></text><input v-model="form.name" :disabled="!canSave" placeholder="请输入流程名称"/></view><view class="field"><text>流程标识 <text class="required">*</text></text><input v-model="form.key" :disabled="!canSave" placeholder="请输入流程标识"/></view><view class="field"><text>流程分类</text><picker :disabled="!canSave" :range="categories" range-key="name" :value="categoryIndex" @change="chooseCategory(Number($event.detail.value))"><view class="picker"><text>{{ categories[categoryIndex]?.name || '请选择分类' }}</text><text>›</text></view></picker></view><view class="field"><text>表单类型</text><picker :disabled="!canSave" :range="['流程表单','业务表单']" :value="form.formType===20?1:0" @change="form.formType=Number($event.detail.value)===1?20:10"><view class="picker"><text>{{ form.formType===20?'业务表单':'流程表单' }}</text><text>›</text></view></picker></view><view v-if="form.formType!==20" class="field"><text>流程表单</text><picker :disabled="!canSave" :range="forms" range-key="name" :value="formIndex" @change="chooseForm(Number($event.detail.value))"><view class="picker"><text>{{ form.formName || forms[formIndex]?.name || '请选择表单' }}</text><text>›</text></view></picker></view><template v-else><view class="field"><text>创建路径</text><input v-model="form.formCustomCreatePath" :disabled="!canSave" placeholder="请输入业务表单创建路径"/></view><view class="field"><text>查看路径</text><input v-model="form.formCustomViewPath" :disabled="!canSave" placeholder="请输入业务表单查看路径"/></view></template><view class="field"><text>状态</text><switch :checked="form.status!==1" :disabled="!canSave" @change="form.status=$event.detail.value?0:1"/></view><view class="field column"><text>描述</text><textarea v-model="form.description" :disabled="!canSave" placeholder="请输入描述"/></view><view class="field column"><text>备注</text><textarea v-model="form.remark" :disabled="!canSave" placeholder="请输入备注"/></view></view><view class="tips">流程图设计、节点权限、打印模板等复杂画布建议在 Web 端维护；移动端保留基础信息和部署控制。</view><button v-if="canSave" class="save" :loading="saving" @click="save">保存</button></view></template>
|
<style lang="scss" scoped>.page{min-height:100vh;padding:24rpx 30rpx 70rpx;background:#f6f7f9}.card{overflow:hidden;background:#fff;border-radius:16rpx}.field{display:flex;align-items:center;min-height:96rpx;gap:20rpx;padding:0 24rpx;border-bottom:1rpx solid #eef1f5}.field>text:first-child{width:190rpx;flex:none;color:#33455d;font-size:27rpx}.field input,.field picker,.picker{min-width:0;flex:1;color:#1e3049;font-size:27rpx}.field input{text-align:right}.picker{display:flex;align-items:center;justify-content:space-between;gap:12rpx;color:#65758a}.picker text:first-child{min-width:0;flex:1;overflow:hidden;text-align:right;text-overflow:ellipsis;white-space:nowrap}.picker text:last-child{flex:none;color:#8092a7;font-size:36rpx}.required{color:#e23b3b}.column{align-items:flex-start;flex-direction:column;padding:20rpx 24rpx}.column>text:first-child{width:auto}.column textarea{width:100%;height:140rpx;box-sizing:border-box;font-size:27rpx}.tips{margin-top:20rpx;padding:20rpx 24rpx;color:#66778c;font-size:24rpx;line-height:1.6;background:#fff;border-radius:16rpx}.save{margin-top:32rpx;color:#fff;font-size:30rpx;background:var(--color-primary, #1769d8);border-radius:12rpx}.save::after{border:0}</style>
|
