Newer
Older
KaiFengPC / src / views / project / projectQuality / qualityRectification / qualityComponents / tableDalgo.vue
@zhangdeliang zhangdeliang on 23 May 24 KB 初始化项目
<template>
  <div class="water-analysis-page4">
    <div class="top">
      <el-form ref="ruleForm" inline :model="FormList" :rules="rules" :key="isKey" :disabled="typeList.type == 4" label-width="auto">
        <el-row>
          <el-form-item label="项目名称" prop="projectNo" style="width: 45%">
            <el-select
              style="width: 100%"
              v-model="FormList.projectNo"
              placeholder="请选择项目名称"
              @change="ProjectChange"
              :disabled="typeList.status == 'projectDeptReplay'"
            >
              <el-option v-for="dict in ProjectListData" :key="dict.projectNo" :label="dict.projectName" :value="dict.projectNo" />
            </el-select>
          </el-form-item>
          <el-form-item label="项目编号" style="width: 45%">
            <el-input
              disabled
              v-model="FormList.projectNo"
              readonly
              class="readonlyClass"
              :disabled="typeList.status == 'projectDeptReplay'"
            />
          </el-form-item>
          <el-form-item label="责任人:" style="width: 45%" prop="chargeUser">
            <el-input
              disabled
              v-model="FormList.chargeUser"
              placeholder="请输入责任人"
              :disabled="typeList.status == 'projectDeptReplay'"
            />
          </el-form-item>
          <el-form-item label="整改发起时间:" style="width: 45%" prop="abarbeitungStartTime">
            <el-date-picker
              style="width: 100%"
              clearable
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD HH:mm:ss"
              v-model="FormList.abarbeitungStartTime"
              type="date"
              range-separator="到"
              placeholder="整改发起时间"
              :disabled="typeList.status == 'projectDeptReplay'"
            />
          </el-form-item>
          <el-form-item label="限制整改时间:" style="width: 45%" prop="abarbeitungEndTime">
            <el-date-picker
              style="width: 100%"
              clearable
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD HH:mm:ss"
              v-model="FormList.abarbeitungEndTime"
              type="date"
              range-separator="到"
              placeholder="请选择限制整改时间"
              :disabled="typeList.status == 'projectDeptReplay'"
            />
          </el-form-item>
          <el-form-item label="补充说明:" style="width: 92%" prop="supplementaryInstruction">
            <el-input
              v-model="FormList.supplementaryInstruction"
              type="textarea"
              placeholder="请输入补充说明"
              :disabled="typeList.status == 'projectDeptReplay'"
            />
          </el-form-item>
          <el-form-item label="指定处理人:" prop="dealUsers" style="width: 45%">
            <el-select
              clearable
              v-model="FormList.dealUsers"
              class="m-2"
              placeholder="请选择指定处理人"
              size="mini"
              style="width: 100%"
              :disabled="typeList.status == 'projectDeptReplay'"
            >
              <el-option v-for="item in personList" :key="item.userId" :label="item.nickName" :value="item.userId + ''" />
            </el-select>
          </el-form-item>
          <el-form-item label="流程抄送人:" prop="pushUsers" style="width: 45%">
            <el-select
              clearable
              v-model="FormList.pushUsers"
              class="m-2"
              placeholder="请选择流程抄送人"
              size="mini"
              style="width: 100%"
              :disabled="typeList.status == 'projectDeptReplay'"
            >
              <el-option v-for="item in personList" :key="item.userId" :label="item.nickName" :value="item.userId + ''" />
            </el-select>
          </el-form-item>
          <el-form-item label="附件:" prop="fileSaveRequestList" style="width: 100%" v-if="[4, 6].includes(typeList.type)">
            <ImageFileUpload
              listType="text"
              :limit="10"
              :saveFileArr="FormList.fileSaveRequestList"
              refType="projectQualityReform"
              :fileType="['pdf', 'doc', 'docx', 'xlsx', 'xls', 'txt']"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <el-divider content-position="left">整改问题清单</el-divider>
      <div style="text-align: right">
        <el-button type="primary" v-if="typeList.type == 3 || typeList.type == 'add'" @click="addInfoList(null, 3)">新增问题清单</el-button>
      </div>
      <el-table :data="projectList" :span-method="objectSpanMethod" border max-height="500" style="width: 100%; margin-top: 10px">
        <el-table-column type="index" />
        <el-table-column prop="problemType" label="问题类型" width="180" />
        <el-table-column prop="checkItem" label="检查项" />
        <!-- <el-table-column label="检查项明细" prop="nodeName">
                </el-table-column> -->
        <el-table-column prop="problemDescription" label="整改前问题描述"> </el-table-column>
        <el-table-column prop="abarbeitungRequire" label="整改要求"> </el-table-column>
        <el-table-column prop="abarbeitungType" label="整改类型">
          <template #default="scope">
            <dict-tag :options="abarbeitung_type" :value="scope.row.abarbeitungType" />
          </template>
        </el-table-column>
        <el-table-column prop="fileSaveRequestList" label="整改前附图">
          <template #default="{ row }">
            <el-image
              preview-teleported
              style="width: 60px"
              v-for="i in row?.fileSaveRequestList"
              :src="i.url"
              :zoom-rate="1"
              :initial-index="14"
              :preview-src-list="[i.url]"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="320">
          <template #default="{ row }">
            <el-button type="primary" plain @click="addInfoList(row, 1)">详情</el-button>
            <el-button type="primary" plain @click="handle(row)" v-show="typeList.type === 6 && row.status === '1'">处理</el-button>
            <el-button v-if="typeList.type != 4" type="danger" plain @click="addInfoList(row, 2)" v-hasPermi="['monitor:job:info']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-form-item v-if="typeList.type == 4 && stapesDate?.length > 0" props="stapesDate">
        <el-divider content-position="left">流程日志</el-divider>
        <el-steps direction="vertical" :active="stapesDate?.length">
          <el-step v-for="(i, index) in stapesDate" :title="i.activityName" style="height: 30px; width: 230px">
            <template #description>
              <div class="direction">时间:{{ i.endTime }}</div>
              <div class="direction">分配人:{{ i.assigneeName }}</div>
              <!-- <div class="direction">任务备注:{{ i.comment  }}</div> -->
            </template>
          </el-step>
        </el-steps>
      </el-form-item>
    </div>
    <el-dialog
      v-model="infoDalgo"
      title="整改问题清单"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      width="50%"
      style="min-height: 60%"
    >
      <el-form label-width="auto" ref="ruleForm" inline :model="dataForm" v-if="infoDalgo" :disabled="ziShow == 1">
        <el-row>
          <el-form-item label="问题类型:" prop="patrolProblemId" style="width: 97%">
            <el-select
              clearable
              @change="probolmChange"
              v-model="dataForm.patrolProblemId"
              placeholder="请选择问题类型"
              style="width: 100%"
            >
              <el-option v-for="dict in Problome" :key="dict.id" :label="dict.problemType" :value="dict.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="检查项:" prop="checkItem" style="width: 97%">
            <el-input disabled v-model="dataForm.checkItem" placeholder="请输入检查项" />
          </el-form-item>
          <el-form-item label="整改问题描述:" style="width: 97%" prop="problemDescription">
            <el-input disabled type="textarea" v-model="dataForm.problemDescription" placeholder="请输入整改项" clearable />
          </el-form-item>
          <el-form-item style="width: 93%" label="整改前附图:" props="fileSaveRequestList">
            <el-image
              style="width: 60px"
              v-for="i in dataForm?.fileSaveRequestList"
              :src="i.url"
              :zoom-rate="1"
              :initial-index="14"
              :preview-src-list="[i.url]"
            />
          </el-form-item>
          <el-form-item label="整改要求:" style="width: 97%">
            <el-input type="textarea" v-model="dataForm.abarbeitungRequire" placeholder="请输入整改要求" clearable />
          </el-form-item>

          <el-form-item label="整改类型:" style="width: 97%">
            <el-select clearable v-model="dataForm.abarbeitungType" placeholder="请选择整改类型" style="width: 100%">
              <el-option v-for="dict in abarbeitung_type" :key="dict.id" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>

          <el-form-item
            style="width: 93%"
            label="整改后附图:"
            props="afterRectificationFileList"
            v-if="ziShow == 1 && dataForm?.afterRectificationFileList?.length > 0"
          >
            <el-image
              v-if="ziShow == 1"
              style="width: 60px"
              v-for="i in dataForm?.afterRectificationFileList"
              :src="i.url"
              :zoom-rate="1"
              :initial-index="14"
              :preview-src-list="[i.url]"
            />

            <ImageFileUpload
              v-else
              listType="picture"
              :limit="10"
              :saveFileArr="dataForm.afterRectificationFileList"
              :fileType="['pdf', 'doc', 'docx', 'xlsx', 'xls', 'txt']"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button v-if="ziShow != 1" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="infoDalgo = false">关 闭 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="handleVisible"
      title="处理"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      width="50%"
      :before-close="handleClose"
      style="min-height: 60%"
    >
      <el-form label-width="auto" ref="handleFormRef" :model="handleForm" :rules="handleFormRules" v-if="handleVisible">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目名称:" prop="projectName">
              <el-input disabled v-model="handleForm.projectName" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="问题类型:" prop="problemType">
              <el-input disabled v-model="handleForm.problemType" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="检查项:" prop="checkItem">
              <el-input disabled v-model="handleForm.checkItem" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="整改前问题描述:" prop="problemDescription">
              <el-input disabled type="textarea" v-model="handleForm.problemDescription" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="整改要求:" prop="abarbeitungRequire">
              <el-input disabled type="textarea" v-model="handleForm.abarbeitungRequire" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="整改类型:" prop="abarbeitungType">
              <el-select v-model="handleForm.abarbeitungType" style="width: 100%" disabled>
                <el-option v-for="dict in abarbeitung_type" :key="dict.id" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="整改前附图:" props="fileSaveRequestList">
              <el-image
                style="width: 60px"
                v-for="i in handleForm?.fileSaveRequestList"
                :src="i.url"
                :zoom-rate="1"
                :initial-index="14"
                :preview-src-list="[i.url]"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="整改状态:" prop="status">
              <el-select v-model="handleForm.status" style="width: 100%" disabled>
                <el-option key="1" label="未整改" value="1" />
                <el-option key="0" label="已整改" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="整改完成时间:" prop="completeTime">
              <el-date-picker
                placeholder="请选择整改完成时间"
                value-format="YYYY-MM-DD"
                v-model="handleForm.completeTime"
                type="date"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="整改措施说明:" prop="abarbeitungDescription">
              <el-input v-model="handleForm.abarbeitungDescription" type="textarea" placeholder="请输入整改措施说明" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="整改后附图:" prop="afterRectificationFileList">
            <ImageFileUpload
              listType="picture"
              :limit="10"
              :saveFileArr="handleForm.afterRectificationFileList"
              :fileType="['png', 'jpg', 'jpeg']"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmitForm">确 定</el-button>
          <el-button @click="handleClose">关 闭 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {
  projectTypeList,
  projectCompany,
  userList,
  projectPatrolProblemPage,
  projectQualityReformRecordAdd,
  projectQualityReformRecordEdit,
  projectQualityReformRecordSubmit,
  projectQualityReformRecordapprove,
  projectPatrolProblemselectByProjectNo,
  getProjectQualityReformDetailById,
  projectQualityReformDetailEdit,
} from '@/api/project/qualityRectification';
import { projectInfoList, FileSystemList } from '@/api/project/tenderReview';
import { workflowProcess } from '@/api/project/qualityRectificationDetails';
import { getToken } from '@/utils/auth';
import { ElMessage, ElMessageBox } from 'element-plus';
import { required } from '@/utils/validate-helper';
import { inheritAttr } from '@/utils/v3';
const { typeList } = defineProps(['typeList']);
const { proxy } = getCurrentInstance();
const { abarbeitung_type } = proxy.useDict('abarbeitung_type');
const emits = defineEmits();
const project_TypeId = ref([]);
const infoDalgo = ref(false);
const unit_list = ref([]);
const personList = ref([]);
const projectList = ref([]);
const dataForm = ref({});
const ProjectListData = ref([]);
const Problome = ref([]);
// const fileList1 = ref([]);
const uploadHeader = ref({
  Authorization: 'Bearer ' + getToken(),
});
const stapesDate = ref([]);
const handleForm = reactive({
  problemNo: '',
  projectName: '',
  checkItem: '',
  problemType: '',
  problemDescription: '',
  abarbeitungRequire: '',
  abarbeitungType: '',
  fileSaveRequestList: [],
  status: '',
  completeTime: '',
  abarbeitungDescription: '',
  afterRectificationFileList: [],
});
const handleFormRules = reactive({
  completeTime: required('整改完成时间'),
  abarbeitungDescription: required('整改措施说明'),
});
const handleVisible = ref(false);
let curRow = null;
defineExpose({ closed, submit, resect });
let FormList = ref({
  pageNum: 1,
  pageSize: 10,
});
const rules = reactive({
  abarbeitungStartTime: required('整改发起时间'),
  abarbeitungEndTime: required('限制整改时间'),
});
function handlePreview(file) {
  return ElMessageBox.confirm(`下载此文件: ${file.name}?`).then(
    () => window.open(file.url),
    () => false
  );
}
function handleBeforeUpload(file) {
  if (file.name.length > 50) {
    proxy.$modal.msgError(`文件名称过长(50个字符以内),请先修改再上传!`);
    return false;
  }
  return true;
}
function beforeRemove(file) {
  return true;
}
function submit(v) {
  proxy.$refs.ruleForm.validate(valid => {
    if (valid) {
      // let arr = [];
      // projectList.value.forEach((i) => {
      //   if (i?.afterRectificationFileList?.length > 0) {
      //     i.afterRectificationFileList.forEach((k) => {
      //       k.refType = "proProjectQualityReformDetail";
      //       k.url = k.response.data.url;
      //       k.name = k.response.data.name;
      //       k.originalName = k.response.data.originalName;
      //       arr.push({
      //         refType: "proProjectQualityReformDetail",
      //         url: k.response.data.url,
      //         name: k.response.data.name,
      //         originalName: k.response.data.originalName,
      //       });
      //     });
      //   }
      //   i.fileSaveRequestList = arr;
      // });
      FormList.value.projectQualityReformDetailSaveRequestList = projectList.value;

      let { dealUsers, pushUsers } = FormList.value;
      if (pushUsers?.length > 0 && Array.isArray(pushUsers)) {
        FormList.value.pushUsers = pushUsers.join(',');
      }
      if (dealUsers?.length > 0 && Array.isArray(dealUsers)) {
        FormList.value.dealUsers = dealUsers?.join(',');
      }
      // 编辑
      if (FormList.value.type == 5) {
        projectQualityReformRecordEdit(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits('onModalClose');
          }
        });
      } else if (FormList.value.type == 6) {
        const isSubmit = projectList.value.every(item => item.status === '0');
        if (!isSubmit) return ElMessage({ message: '整改问题全部处理完成才能进行操作', type: 'warning' });
        // let fileSaveRequestList = []
        // if(FormList.value.fileSaveRequestList) {
        //   fileSaveRequestList = FormList.value.fileSaveRequestList.map(item => {
        //     const it = item.response.data || item
        //     it.refType = 'projectQualityReform'
        //     return it
        //   })
        // }
        const params = { ...FormList.value };
        console.log(params);
        projectQualityReformRecordapprove(params).then(({ code }) => {
          if (code == 200) {
            emits('onModalClose');
          }
        });
      } else if (FormList.value.type == 3 || v == 6) {
        if (!FormList.value.dealUsers) {
          ElMessage({
            message: '请您选择指定处理人',
            type: 'warning',
          });
        } else {
          projectQualityReformRecordSubmit(FormList.value).then(({ code }) => {
            if (code == 200) {
              emits('onModalClose');
            }
          });
        }
      } else {
        projectQualityReformRecordAdd(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits('onModalClose');
          }
        });
      }
    }
  });
}
function closed() {
  FormList.value = {};
  emits('onModalClose');
}
function resect() {
  FormList.value = {};
  projectList.value = [];
}
const projectTypeListM = async () => {
  let { data } = await projectTypeList();
  project_TypeId.value = data;
};
const projectCompanyM = async () => {
  let { data } = await projectCompany();
  unit_list.value = data;
};

const userListM = async () => {
  let { data } = await userList();
  personList.value = data;
  FormList.value = typeList;
  getFileList();
};
/**获取所有的项目数据 */
function loadProjerctListData() {
  projectInfoList().then(response => {
    ProjectListData.value = response.data;
    typeList.projectNo && projectPatrolProblemPageM(typeList.projectNo);
  });
}
const ziShow = ref();
//新增质量问题清单
function addInfoList(v, t) {
  ziShow.value = t;
  if (t == 1) {
    dataForm.value = v;
    console.log('vv', v);
    infoDalgo.value = true;
  } else if (t == 3) {
    dataForm.value = {};
    infoDalgo.value = true;
    // fileList1.value=[]
  } else {
    let c = projectList.value.findIndex(i => {
      return i.id == v.id;
    });
    projectList.value.splice(c, 1);
  }
}
const projectPatrolProblemPageM = async p => {
  // let {data: { chargeUser } }=await projectPatrolProblemPage(p)
  const curInfo = ProjectListData.value.find(item => item.projectNo === p);
  FormList.value.chargeUser = curInfo?.chargeUser || '';
  projectPatrolProblemselectByProjectNo(p).then(({ data }) => {
    Problome.value = data;
  });
};
//根据项目获取项目清单
function ProjectChange(p) {
  projectList.value = [];
  projectPatrolProblemPageM(p);
}
// 新增修改单却确定
function submitForm() {
  projectList.value.push(dataForm.value);
  infoDalgo.value = false;
}
function probolmChange(v) {
  dataForm.value = Problome.value.find(item => {
    return item.id === v;
  });
  dataForm.value.patrolProblemId = v;
  console.log(dataForm.value, 231);
  projectList.value.forEach(i => {
    if (i.id == v) {
      ElMessage({
        message: '您重复添加整改单,请重新选择',
        type: 'warning',
      });
      dataForm.value = {};
    } else {
    }
  });
  console.log('projectList.valueprojectList.value', projectList.value);
}
//获取流程日志
const workflowProcessM = async () => {
  let params = {
    businessKey: typeList.id,
    workflowKey: 'projectQualityReformRecord',
    workflowUserId: '',
  };
  let { data } = await workflowProcess(params);
  stapesDate.value = data;
};

const handleSubmitForm = () => {
  proxy.$refs.handleFormRef.validate(async (valid, fields) => {
    if (valid) {
      const { problemNo, completeTime, abarbeitungDescription, afterRectificationFileList } = handleForm;
      const fileSaveRequestList = afterRectificationFileList.map(item => item?.response?.data || item);
      const params = {
        id: curRow.id,
        problemNo,
        completeTime,
        abarbeitungDescription,
        fileSaveRequestList,
      };
      console.log(params);
      const res = await projectQualityReformDetailEdit(params);
      if (res?.code !== 200) return;
      ElMessage({
        message: '操作成功',
        type: 'success',
      });
      curRow.status = '0';
      curRow.completeTime = completeTime;
      curRow.abarbeitungDescription = abarbeitungDescription;
      curRow.afterRectificationFileList = fileSaveRequestList;
      handleClose();
    } else {
      console.log('error submit!', fields);
    }
  });
};
const handleClose = () => {
  proxy.$refs.handleFormRef.resetFields();
  nextTick(() => {
    handleVisible.value = false;
    curRow = null;
  });
};
const handle = row => {
  console.log(row);
  curRow = row;
  handleVisible.value = true;
  getDetail(row.id);
};
const getDetail = async id => {
  const res = await getProjectQualityReformDetailById(id);
  if (res?.code !== 200) return;
  inheritAttr(res.data, handleForm);
  handleForm.projectName = FormList.value.projectName;
  console.log(handleForm);
};
const getFileList = async () => {
  const res = await FileSystemList({ refId: FormList.value.id, refType: 'projectQualityReform' });
  if (res?.code !== 200) return;
  FormList.value.fileSaveRequestList = res.data;
};
onMounted(() => {
  console.log(typeList, 'typeListtypeList1111');
  projectList.value = typeList.projectQualityReformDetailSaveRequestList;
  projectTypeListM();
  projectCompanyM();
  userListM();
  loadProjerctListData();
  if (typeList.status != 'start' && typeList.type != 'add') {
    workflowProcessM();
  } else {
    proxy.$refs.ruleForm.resetFields();
  }
});
</script>
<style lang="scss" scoped>
.water-analysis-page4 {
  padding: 20px;
}
.direction {
  min-width: 190px;
}
</style>