运维管理平台前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

119 lines
3.2 KiB

<template>
<a-modal v-model:open="visible" :title="title" @ok="handleOk" width="50%">
<a-form :model="form" layout="vertical" ref="formRef" :rules="rules">
<a-row :gutter="[16, 16]">
<a-col :span="24">
<a-form-item label="所属计划" name="planId">
<a-select v-model:value="form.planId" :options="planOptions" placeholder="请选择" />
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="[16, 16]">
<a-col :span="24">
<a-form-item label="监理人员" name="monitorPerson">
<a-select v-model:value="form.monitorPerson" :options="monitorPersonOptions" placeholder="请选择" />
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-modal>
</template>
<script>
import { reactive, ref } from 'vue';
import { message } from 'ant-design-vue';
import { getInfo, add, update,getPlans } from './api';
import { getStationList } from '@/api/common/index';
export default {
setup(props, { emit }) {
const title = ref('新增');
const visible = ref(false);
const form = reactive({
planId: null,
monitorPerson: null,
});
//下拉框
const planOptions = ref([])
const monitorPersonOptions = ref([
{
value:'吴昊'
},
{
value:'梁涛'
}
]);
const showModal = async (type, id, projectId) => {
visible.value = true;
const res = await getPlans()
planOptions.value = res
if (type == 1) {
title.value = '新增';
} else if (type == 2) {
title.value = '编辑';
const data = await getInfo(id);
for (let i in form) {
form[i] = data[i];
}
}
};
const handleOk = () => {
formRef.value.validate().then((valid) => {
if (valid) {
if (title.value == '新增') {
let params = {};
for (let i in form) {
params[i] = form[i];
}
delete params.id;
add(params).then((_) => {
message.success('新增成功');
emit('success');
closeModal();
});
} else {
let params = {};
for (let i in form) {
params[i] = form[i];
}
update(params).then((_) => {
message.success('编辑成功');
emit('success');
closeModal();
});
}
}
});
};
const closeModal = () => {
formRef.value.resetFields();
visible.value = false;
};
const formRef = ref();
const rules = {
planId: [{ required: true, message: '请选择' }],
monitorPerson: [{ required: true, message: '请选择' }],
};
return {
visible,
title,
form,
showModal,
handleOk,
planOptions,
monitorPersonOptions,
closeModal,
formRef,
rules,
};
},
};
</script>
<style scoped>
/* 可选样式调整 */
.ant-modal-body {
max-width: 600px;
margin: 0 auto;
}
</style>