祖安之光
9 天以前 8628ac19e720c39194b60f1b0028b9aaddc16a00
src/views/safetyReview/projectManage/components/basicInfo.vue
@@ -8,21 +8,21 @@
      </el-col>
    </el-row>
    <el-form ref="formRef" :model="state.formData" :rules="state.rules" class="register-form" label-position="top">
      <el-row :gutter="30">
        <el-col :span="6">
          <el-form-item prop="projectName" label="项目名称">
      <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="请输入项目名称"
                placeholder="请输入出差事由"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="projectName" label="项目预计时间区间">
        <el-col :span="12">
          <el-form-item prop="projectDateStart" label="项目预计时间区间">
            <el-date-picker
                v-model="searchTime"
                type="daterange"
@@ -35,48 +35,75 @@
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="unit" label="被检查/对接单位">
            <el-input
                v-model.trim="state.formData.unit"
                size="large"
                placeholder="请输入被检查/对接单位"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="place" label="项目地点">
            <el-input
                v-model.trim="state.formData.place"
                size="large"
                placeholder="请输入项目地点"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item prop="people" label="处室带队人员">
        <el-col :span="12">
          <el-form-item prop="projectAddress" label="目的地及相关企业名称等">
            <el-input
                v-model.trim="state.formData.projectName"
                v-model.trim="state.formData.projectAddress"
                size="large"
                placeholder="请输入处室带队人员"
                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="description" label="概况描述">
          <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.description"
                v-model.trim="state.formData.remark"
                size="large"
                placeholder="请输入概况描述"
                placeholder="请输入备注"
            >
            </el-input>
          </el-form-item>
@@ -87,51 +114,197 @@
</template>
<script setup>
import {reactive, ref} from "vue";
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: {
    deptName:'危险化学品监督管理处',
    id:null,
    deptId: null,
    deptName:'',
    projectName: '',
    startTime: '',
    endTime: '',
    unit: '',
    place: '',
    people: '',
    description: ''
    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 searchTime = ref([]);
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'){
    state.formData.startTime = searchTime.value[0]
    state.formData.endTime = searchTime.value[1]
    //保存按钮
    //成功后自动到下一步 项目id
    emit('getNextStatus', 1);
    reset()
    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'){
    console.log("view111111111111111",type,val)
    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.startTime = ""
    state.formData.endTime = ""
    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
});