102 lines
		
	
	
		
			2.7 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			102 lines
		
	
	
		
			2.7 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <section class="add">
 | |
|     <ai-detail>
 | |
|       <ai-title slot="title" :title="pageTitle" isShowBottomBorder/>
 | |
|       <template #content>
 | |
|         <el-form ref="AddForm" :model="form" size="small" label-width="120px" :rules="rules">
 | |
|           <ai-card title="基础设置">
 | |
|             <template #content>
 | |
|               <el-row type="flex">
 | |
|                 <el-form-item label="流程名称" prop="name" class="fill">
 | |
|                   <el-input v-model="form.name" placeholder="请输入流程名称" clearable/>
 | |
|                 </el-form-item>
 | |
|                 <el-form-item label="对应应用" prop="app" class="fill">
 | |
|                   <el-input v-model="form.app" placeholder="请输入对应应用" clearable/>
 | |
|                 </el-form-item>
 | |
|               </el-row>
 | |
|             </template>
 | |
|           </ai-card>
 | |
|           <ai-card title="流程设计">
 | |
|             <template #content>
 | |
|               <ai-workflow v-model="form.config"/>
 | |
|             </template>
 | |
|           </ai-card>
 | |
|         </el-form>
 | |
|       </template>
 | |
|       <template #footer>
 | |
|         <el-button @click="back">取消</el-button>
 | |
|         <el-button type="primary" @click="submit">提交</el-button>
 | |
|       </template>
 | |
|     </ai-detail>
 | |
|   </section>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import AiWorkflow from "./AiWorkflow";
 | |
| import {mapActions} from "vuex"
 | |
| 
 | |
| export default {
 | |
|   name: "add",
 | |
|   components: {AiWorkflow},
 | |
|   props: {
 | |
|     instance: Function,
 | |
|     dict: Object,
 | |
|     permissions: Function
 | |
|   },
 | |
|   computed: {
 | |
|     isEdit: v => !!v.$route.query.id,
 | |
|     pageTitle: v => v.isEdit ? "编辑工作流管理" : "新增工作流管理"
 | |
|   },
 | |
|   data() {
 | |
|     return {
 | |
|       form: {},
 | |
|       rules: {
 | |
|         name: {required: true, message: "请输入"}, app: {required: true, message: "请输入"},
 | |
|       },
 | |
|     }
 | |
|   },
 | |
|   methods: {
 | |
|     ...mapActions(['getWorkflowConfigs']),
 | |
|     getDetail() {
 | |
|       let {id} = this.$route.query
 | |
|       id && this.instance.post("/app/appworkflowmanage/queryDetailById", null, {
 | |
|         params: {id}
 | |
|       }).then(res => {
 | |
|         if (res?.data) {
 | |
|           const {config} = res.data
 | |
|           this.form = res.data
 | |
|           this.form.config = JSON.parse(config || null)
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|     back() {
 | |
|       this.$router.push({})
 | |
|     },
 | |
|     submit() {
 | |
|       this.$refs.AddForm.validate(v => {
 | |
|         if (v) {
 | |
|           let {config} = this.form
 | |
|           config = JSON.stringify(config)
 | |
|           this.instance.post("/app/appworkflowmanage/addOrUpdate", {...this.form, config}).then(res => {
 | |
|             if (res?.code == 0) {
 | |
|               this.$message.success("提交成功!")
 | |
|               this.getWorkflowConfigs()
 | |
|               this.back()
 | |
|             }
 | |
|           })
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|   },
 | |
|   created() {
 | |
|     this.getDetail()
 | |
|   }
 | |
| }
 | |
| </script>
 | |
| 
 | |
| <style lang="scss" scoped>
 | |
| .add {
 | |
|   height: 100%;
 | |
| }
 | |
| </style>
 |