138 lines
3.5 KiB
Vue
138 lines
3.5 KiB
Vue
<template>
|
|
<div>
|
|
<div class="container-div">
|
|
<el-card class="box-card" style="padding-right: 10%; padding-left: 10%">
|
|
<el-form ref="ruleForm" :model="form" :rules="rules" label-position="top" status-icon label-width="120px" @submit.prevent>
|
|
<el-form-item :label="$t('flow.logo')" prop="logo">
|
|
<upload-img v-model:imageUrl="form.logo" height="100px" width="100px">
|
|
<template #empty>
|
|
<el-icon>
|
|
<Avatar />
|
|
</el-icon>
|
|
<span>{{ $t('flow.logo') }}</span>
|
|
</template>
|
|
</upload-img>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('flow.name')" prop="name">
|
|
<el-input v-model="form.name" />
|
|
</el-form-item>
|
|
<el-form-item :label="$t('flow.businessKey')" prop="businessKey">
|
|
<el-input v-model="form.businessKey" />
|
|
</el-form-item>
|
|
<el-form-item :label="$t('flow.formDetail')" prop="formDetail">
|
|
<el-input v-model="form.formDetail" :placeholder="$t('flow.formDetailTips')" />
|
|
</el-form-item>
|
|
<el-form-item :label="$t('flow.remark')" prop="remark">
|
|
<el-input v-model="form.remark" />
|
|
</el-form-item>
|
|
<el-form-item :label="$t('flow.group')" prop="groupId">
|
|
<el-select v-model="form.groupId" :placeholder="$t('flow.groupTips')">
|
|
<el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('flow.admin')" prop="adminList">
|
|
<select-show v-model:orgList="form.adminList" type="user" :multiple="false"></select-show>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type {FormRules} from 'element-plus';
|
|
import selectShow from '/@/components/OrgSelector/index.vue';
|
|
import {queryGroupList} from '/@/api/flow/group';
|
|
import {useRoute} from 'vue-router';
|
|
import {useFlowStore} from '../workflow/stores/flow';
|
|
import {GroupVO} from '/@/api/flow/group/types';
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
const validate = (f) => {
|
|
proxy.$refs.ruleForm.validate((valid, fields) => {
|
|
var arr = [];
|
|
if (!valid) {
|
|
for (var err in fields) {
|
|
arr.push(fields[err][0].message);
|
|
}
|
|
}
|
|
|
|
f(valid, arr);
|
|
});
|
|
};
|
|
|
|
// 暴露方法和属性给父组件
|
|
defineExpose({ validate });
|
|
const rules = reactive<FormRules>({
|
|
name: [
|
|
{ required: true, message: '请填写名称', trigger: 'blur' },
|
|
{ min: 2, max: 10, message: '2-10个字符', trigger: 'blur' },
|
|
],
|
|
remark: [
|
|
{ required: false, message: '请填写描述', trigger: 'blur' },
|
|
{ min: 2, max: 20, message: '2-20个字符', trigger: 'blur' },
|
|
],
|
|
groupId: [
|
|
{
|
|
required: true,
|
|
message: '请选择分组',
|
|
trigger: 'change',
|
|
},
|
|
],
|
|
logo: [
|
|
{
|
|
required: true,
|
|
message: '请上传图标',
|
|
trigger: 'change',
|
|
},
|
|
],
|
|
adminList: [
|
|
{
|
|
required: true,
|
|
message: '请选择管理员',
|
|
trigger: 'change',
|
|
},
|
|
],
|
|
});
|
|
|
|
let props = defineProps({
|
|
groupId: {
|
|
type: Number,
|
|
default: undefined,
|
|
},
|
|
});
|
|
|
|
const route = useRoute();
|
|
const groupList = ref<GroupVO[]>([]);
|
|
|
|
onMounted(() => {
|
|
queryGroupList().then(({ data }) => {
|
|
groupList.value = data;
|
|
});
|
|
});
|
|
|
|
watch(
|
|
() => props.groupId,
|
|
(val) => {
|
|
if (val) {
|
|
form.value.groupId = parseInt(val);
|
|
}
|
|
}
|
|
);
|
|
|
|
const flowStore = useFlowStore();
|
|
|
|
const form = computed(() => {
|
|
return flowStore.step1;
|
|
});
|
|
</script>
|
|
<style scoped>
|
|
.container-div {
|
|
width: 800px;
|
|
height: 100vh; /* Set the container height to 100% of the viewport height */
|
|
margin-left: calc(50% - 400px);
|
|
text-align: center;
|
|
}
|
|
</style>
|