<template>
|
<div class="basicInfo">
|
<el-row :gutter="24">
|
<el-col :span="24">
|
<el-form-item prop="deptName" label="申报处室：">
|
<span>{{state.formData.deptName}}</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form ref="formRef" :model="state.formData" :rules="state.rules" class="register-form" label-position="top">
|
<el-row :gutter="24">
|
<el-col :span="12">
|
<el-form-item prop="projectName" label="出差事由">
|
<el-input
|
maxlength="100"
|
show-word-limit
|
v-model.trim="state.formData.projectName"
|
size="large"
|
placeholder="请输入出差事由"
|
>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item prop="projectDateStart" label="项目预计时间区间">
|
<el-date-picker
|
v-model="searchTime"
|
type="daterange"
|
@change="changeTime"
|
size="large"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="YYYY-MM-DD"
|
/>
|
</el-form-item>
|
</el-col>
|
|
</el-row>
|
<el-row :gutter="24">
|
<el-col :span="12">
|
<el-form-item prop="projectAddress" label="目的地及相关企业名称等">
|
<el-input
|
v-model.trim="state.formData.projectAddress"
|
size="large"
|
placeholder="请输入目的地及相关企业名称等"
|
>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item prop="jobCategoryArr" label="工作类别">
|
<el-checkbox-group v-model="state.formData.jobCategoryArr">
|
<el-checkbox v-for="item in state.directionList" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="24">
|
<el-col :span="24">
|
<el-form-item prop="deptUserName" label="处室人员及职务">
|
<div style="display: flex">
|
<div style="display: flex;flex-direction: column;">
|
<div v-for="(item,index) in state.personNameJob" :key="index" style="display:flex;margin-bottom: 5px" >
|
<div>
|
<span style="font-size: 14px;font-weight: 500">姓名：</span>
|
<el-input
|
v-model.trim="item.deptUserName"
|
size="large"
|
placeholder="请输入姓名"
|
style="width: 200px;"
|
clearable
|
>
|
</el-input>
|
</div>
|
<div style="margin-left: 20px;display: flex;align-items: center">
|
<span>职务：</span>
|
<el-input
|
v-model.trim="item.deptPostName"
|
size="large"
|
placeholder="请输入职务"
|
style="width: 200px;"
|
clearable
|
>
|
</el-input>
|
<el-icon style="margin-left: 5px;cursor: pointer" :size="15" color="red" v-if="index !== 0" @click="delPerson(index)" >
|
<Delete />
|
</el-icon>
|
</div>
|
</div>
|
|
</div>
|
<el-button style="margin-left: 5px;color: white" color="#0FC7F0" @click="addPerson">增加一行</el-button>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="24">
|
<el-col :span="24">
|
<el-form-item prop="remark" label="备注">
|
<el-input
|
type="textarea"
|
:rows="6"
|
v-model.trim="state.formData.remark"
|
size="large"
|
placeholder="请输入备注"
|
>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
</template>
|
|
<script setup>
|
import {onMounted, reactive, ref} from "vue";
|
import Cookies from "js-cookie";
|
import {addProject, getProjectInfo, getProjectList} from "@/api/projectManage";
|
import {ElMessage} from "element-plus";
|
|
const searchTime = ref([]);
|
const emit = defineEmits(["getNextStatus"]);
|
const state = reactive({
|
formData: {
|
id:null,
|
deptId: null,
|
deptName:'',
|
projectName: '',
|
projectDateStart: '',
|
projectDateEnd: '',
|
jobCategoryArr: [],
|
projectAddress: '',
|
deptPostName: {
|
postVos: []
|
},
|
remark: ''
|
},
|
personNameJob: [
|
{
|
deptPostName: '',
|
deptUserName: ''
|
}
|
],
|
rules: {
|
projectName: [{ required: true, message: "出差事由不能为空", trigger: "blur" }],
|
projectDateStart: [{ required: true, message: "项目预计时间不能为空", trigger: "change" }],
|
projectAddress: [{ required: true, message: "目的地及相关企业名称等不能为空", trigger: "blur" }],
|
// deptUserName: [{ required: true, message: "处室人人员及职务不能为空", trigger: "blur" }],
|
jobCategoryArr: [{ required: true, message: "工作类别不能为空", trigger: "blur" }],
|
},
|
isAdmin: false,
|
directionList: [
|
{
|
value: '1',
|
label: '现场检查'
|
},
|
{
|
value: '2',
|
label: '调查评估'
|
},
|
{
|
value: '3',
|
label: '咨询服务'
|
},
|
{
|
value: '4',
|
label: '教育培训'
|
},
|
{
|
value: '5',
|
label: '其他'
|
}
|
],
|
})
|
const formRef = ref();
|
const userInfo = ref()
|
onMounted(() => {
|
userInfo.value = JSON.parse(Cookies.get('userInfo'))
|
state.formData.deptName = userInfo.value.dept.deptName
|
state.formData.deptId = userInfo.value.deptId
|
state.isAdmin = userInfo.value.admin
|
})
|
|
|
const riskOpen = async (type,val) => {
|
console.log("type",type,val)
|
let valid = null
|
if(type === 'add' || type === 'clickEdit'){
|
valid = await formRef.value.validate();
|
if (state.isAdmin) {
|
ElMessage.warning("当前用户暂无权限");
|
return;
|
}
|
}
|
if(type === 'add'){
|
if(valid){
|
for(let i = 0; i < state.personNameJob.length; i++){
|
if(state.personNameJob[i].deptPostName === '' || state.personNameJob[i].deptUserName === ''){
|
ElMessage.warning("请输入处室人员及职务");
|
return
|
}
|
}
|
//保存按钮
|
const {id,jobCategoryArr,...data} = state.formData
|
data.jobCategory = Array.isArray(state.formData.jobCategoryArr)? state.formData.jobCategoryArr.join(',') : ''
|
data.deptPostName.postVos = state.personNameJob
|
const res = await addProject(data);
|
if(res.code == 200){
|
ElMessage.success('新增成功')
|
emit('getNextStatus', res.data);
|
reset()
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
}else if(type === 'clickEdit'){
|
if(valid){
|
//变更按钮
|
for(let i = 0; i < state.personNameJob.length; i++){
|
if(state.personNameJob[i].deptPostName === '' || state.personNameJob[i].deptUserName === ''){
|
ElMessage.warning("请输入处室人员及职务");
|
return
|
}
|
}
|
const {jobCategoryArr,...data} = state.formData
|
data.jobCategory = Array.isArray(state.formData.jobCategoryArr)? state.formData.jobCategoryArr.join(',') : ''
|
data.deptPostName.postVos = state.personNameJob
|
const res = await addProject(data);
|
if(res.code == 200){
|
ElMessage.success('修改成功')
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
}else if(type === 'detail'){
|
const res = await getProjectInfo(val)
|
if(res.code == 200){
|
if(res.data) {
|
const val = res.data
|
for(let i in state.formData) {
|
if (validKey(i, val)) {
|
state.formData[i] = val[i]
|
}
|
}
|
searchTime.value = [res.data.projectDateStart,res.data.projectDateEnd]
|
if(res.data.jobCategory && res.data.jobCategory!==''){
|
state.formData.jobCategoryArr = res.data.jobCategory.split(',')
|
}else{
|
state.formData.jobCategoryArr = []
|
}
|
if(res.data.deptPostName && res.data.deptPostName.postVos.length>0){
|
state.personNameJob = res.data.deptPostName.postVos
|
}else {
|
state.personNameJob = [
|
{
|
deptPostName: '',
|
deptUserName: ''
|
}
|
]
|
}
|
|
}
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
}
|
const validKey=(key,obj)=>{
|
return key in obj
|
}
|
const reset = () => {
|
state.formData = {
|
id:null,
|
deptId: null,
|
deptName:'',
|
projectName: '',
|
projectDateStart: '',
|
projectDateEnd: '',
|
jobCategoryArr: [],
|
projectAddress: '',
|
deptUserName: '',
|
remark: ''
|
}
|
searchTime.value = [];
|
}
|
const changeTime=(value)=>{
|
if(!value){
|
state.formData.projectDateStart = ""
|
state.formData.projectDateEnd = ""
|
}else {
|
state.formData.projectDateStart = searchTime.value[0]
|
state.formData.projectDateEnd = searchTime.value[1]
|
}
|
}
|
const addPerson = () => {
|
const obj = {
|
deptPostName: '',
|
deptUserName: ''
|
}
|
state.personNameJob.push(obj)
|
}
|
|
const delPerson = (val) => {
|
state.personNameJob = state.personNameJob.filter((item,index) => index != val)
|
}
|
|
defineExpose({
|
riskOpen
|
});
|
</script>
|
|
|
<style scoped lang="scss">
|
.basicInfo{
|
|
}
|
</style>
|
