130 lines
3.4 KiB
Vue
130 lines
3.4 KiB
Vue
|
<!--模型的新增和修改的弹出框-->
|
||
|
|
<template>
|
||
|
|
<el-dialog
|
||
|
|
draggable
|
||
|
|
class="cn-operate-dialog"
|
||
|
|
v-model="modelVisible"
|
||
|
|
:title="title"
|
||
|
|
style="width: 415px; height: 400px"
|
||
|
|
top="30vh"
|
||
|
|
>
|
||
|
|
<el-scrollbar>
|
||
|
|
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
||
|
|
<el-form-item label="模型标识">
|
||
|
|
<el-input v-model="form.modelKey" clearable disabled />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="模型名称" prop='modelName'>
|
||
|
|
<el-input v-model="form.modelName" placeholder="请输入模型名称" clearable />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="流程分类" prop="category">
|
||
|
|
<el-select v-model='form.category' clearable>
|
||
|
|
<el-option
|
||
|
|
v-for='item in categoryList'
|
||
|
|
:key='item.id'
|
||
|
|
:label='item.name'
|
||
|
|
:value='item.code'
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="描述" prop="description">
|
||
|
|
<el-input v-model="form.description" type="textarea" placeholder="请输入内容" maxlength="200" show-word-limit />
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</el-scrollbar>
|
||
|
|
<template #footer>
|
||
|
|
<span class="dialog-footer">
|
||
|
|
<el-button @click="modelVisible = false">取消</el-button>
|
||
|
|
<el-button type="primary" @click="submit">确认</el-button>
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref, reactive, inject } from 'vue'
|
||
|
|
import { ElMessage } from 'element-plus'
|
||
|
|
import TableStore from '@/utils/tableStore'
|
||
|
|
import { useDictData } from '@/stores/dictData'
|
||
|
|
import { addWFModel,updateWFModel } from '@/api/process-boot/workflow/model'
|
||
|
|
|
||
|
|
|
||
|
|
const dictData = useDictData()
|
||
|
|
const categoryList = dictData.getBasicData('flow_category')
|
||
|
|
|
||
|
|
const tableStore = inject('tableStore') as TableStore
|
||
|
|
const modelVisible = ref(false)
|
||
|
|
const title = ref('')
|
||
|
|
const formRef = ref()
|
||
|
|
|
||
|
|
// 注意不要和表单ref的命名冲突
|
||
|
|
const form = reactive({
|
||
|
|
modelId: undefined,
|
||
|
|
modelKey: `Process_${new Date().getTime()}`,
|
||
|
|
modelName: '',
|
||
|
|
category: '',
|
||
|
|
description: '',
|
||
|
|
})
|
||
|
|
|
||
|
|
//form表单校验规则
|
||
|
|
const rules = {
|
||
|
|
modelName: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
|
||
|
|
category: [{ required: true, message: '流程分类必选', trigger: 'change' }],
|
||
|
|
}
|
||
|
|
|
||
|
|
const open = (text: string, data?: any) => {
|
||
|
|
title.value = text
|
||
|
|
if (data) {
|
||
|
|
// 表单赋值
|
||
|
|
for (let key in form) {
|
||
|
|
form[key] = data[key]
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
resetForm()
|
||
|
|
// 在此处恢复默认表单
|
||
|
|
for (let key in form) {
|
||
|
|
form[key] = ''
|
||
|
|
}
|
||
|
|
form.modelKey = `Process_${new Date().getTime()}`
|
||
|
|
}
|
||
|
|
modelVisible.value = true
|
||
|
|
}
|
||
|
|
|
||
|
|
//重置表单内容
|
||
|
|
const resetForm = () => {
|
||
|
|
if (formRef.value) {
|
||
|
|
formRef.value.resetFields()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 提交用户表单数据
|
||
|
|
*/
|
||
|
|
const submit = () => {
|
||
|
|
formRef.value.validate(async (valid: any) => {
|
||
|
|
if (valid) {
|
||
|
|
if (form.modelId) {
|
||
|
|
await updateWFModel(form)
|
||
|
|
} else {
|
||
|
|
await addWFModel(form)
|
||
|
|
}
|
||
|
|
ElMessage.success('保存成功')
|
||
|
|
tableStore.index()
|
||
|
|
modelVisible.value = false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
/************针对tab切换*************/
|
||
|
|
|
||
|
|
defineExpose({ open })
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.el-upload-list__item {
|
||
|
|
transition: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-select {
|
||
|
|
min-width: 180px;
|
||
|
|
}
|
||
|
|
</style>
|