qingban-SPC/src/views/unqualified/handle20.vue

<template>

  <el-drawer v-model="drawerVisible" size="1000" @close="handClose">
    <div>
      <DetailCom ref="detailComRef"></DetailCom>
    </div>
    <el-form
      ref="remarkRef"
      :model="remark"
      label-width="150"
      :rules="rules1"
      style="max-width: 800px; margin-left: 72px; margin-top: 20px"
      class="remark-form"
    >
      <div class="border">
        <el-form-item label="分析处置要求：" prop="content2">
          <el-input
            v-model="remark.content2"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 6 }"
          />
        </el-form-item>
        <el-form-item label="技术人员" prop="user1">
          <el-tree-select v-model="remark.user1" :data="userList" filterable clearable/>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="remark.phone"/>
        </el-form-item>
        <el-form-item label="责任部门" prop="user2">
          <el-tree-select v-model="remark.user2" :data="userList" filterable clearable/>
        </el-form-item>
        <el-form-item label="附件" prop="fileUrl">
          <FilesUpload
            v-model:src="remark.fileUrl"
            :generate-pdf="false"
            v-model:file-name-list="fileNameList"
            ref="load"
          />
        </el-form-item>
      </div>
      <div class="border">
        <el-form-item label="原因分析：" prop="content3">
          <el-input
            v-model="remark.content3"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 6 }"
          />
        </el-form-item>
        <el-form-item label="分析单位:" prop="company">
          <el-input v-model="remark.company"/>
        </el-form-item>
        <el-form-item label="附件" prop="fileUrl1">
          <FilesUpload
            v-model:src="remark.fileUrl1"
            :generate-pdf="false"
            v-model:file-name-list="fileNameList1"
            ref="load1"
          />
        </el-form-item>
      </div>
      <div class="border">
        <el-form-item label="采取的措施：" prop="content4">
          <el-input
            v-model="remark.content4"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 6 }"
          />
        </el-form-item>
        <el-form-item label="责任部门" prop="users">
          <!--        <el-tree-select-->
          <!--          v-model="remark.users"-->
          <!--          :data="userList"-->
          <!--          multiple-->
          <!--          filterable-->
          <!--          allow-create-->
          <!--          default-first-option-->
          <!--          placeholder="输入后按回车键可自定义输入"-->
          <!--        />-->
          <el-input v-model="remark.users"/>
        </el-form-item>
        <el-form-item label="附件" prop="fileUrl2">
          <FilesUpload
            v-model:src="remark.fileUrl2"
            :generate-pdf="false"
            v-model:file-name-list="fileNameList2"
            ref="load2"
          />
        </el-form-item>
      </div>

      <div class="border">
        <el-form-item label="措施落实：" prop="content5">
          <el-input
            v-model="remark.content5"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 6 }"
          />
        </el-form-item>
        <el-form-item label="责任部门" prop="user5">
          <!--        <el-tree-select-->
          <!--          v-model="remark.user5"-->
          <!--          :data="userList"-->
          <!--          filterable-->
          <!--          allow-create-->
          <!--          default-first-option-->
          <!--          placeholder="输入后按回车键可自定义输入"-->
          <!--        />-->
          <el-input v-model="remark.user5"/>
        </el-form-item>
        <el-form-item label="附件" prop="fileUrl3">
          <FilesUpload
            v-model:src="remark.fileUrl3"
            :generate-pdf="false"
            v-model:file-name-list="fileNameList3"
            ref="load3"
          />
        </el-form-item>
      </div>

      <el-form-item
        label="下一步处理人"
        prop="nextRemarkUser"
        v-if="remark.state == 0"
      >
        <el-tree-select
          v-model="remark.nextRemarkUser"
          :data="userList"
          filterable
          multiple
        />
      </el-form-item>
      <el-form-item label="是否通过" prop="state">
        <el-radio-group v-model="remark.state">
          <el-radio :value="0">同意</el-radio>
          <el-radio :value="1">不同意</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="drawer-bottom">
        <el-button type="primary" @click="saveClick">暂存</el-button>
        <el-button type="info" @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">提交</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import DetailCom from "@/views/unqualified/DetailCom.vue";
import {dealFeedback, saveBack} from "@/api/unqualified/index";
import {getUserTree} from "@/api/user/index";
import {useUserStore} from "@/store";
import FilesUpload from "@/components/Upload/FilesUpload.vue";
import {ElMessage} from "element-plus";

const drawerVisible = ref(false);
const detailComRef = ref(null);
const saleModel = ref({});
const userStore = useUserStore();
const dutyDept = ref("");
const load = ref(null)
const load1 = ref(null)
const load2 = ref(null)
const load3 = ref(null)
const showDrawer = (row) => {
  console.log(row, "ioio")
  row.isEdit = '是';
  drawerVisible.value = true;
  saleModel.value = row;
  dutyDept.value = JSON.parse(row.remark2).user2;
  nextTick(() => {
    detailComRef.value && detailComRef.value.refreshView(row);
    if (row.remark2) {
      remark.content2 = JSON.parse(row.remark2).content ? JSON.parse(row.remark2).content : "";
      remark.user1 = JSON.parse(row.remark2).user1 ? JSON.parse(row.remark2).user1 : "";
      remark.user2 = JSON.parse(row.remark2).user2 ? JSON.parse(row.remark2).user2 : "";
      remark.phone = JSON.parse(row.remark2).phone ? JSON.parse(row.remark2).phone : "";
      remark.fileUrl = JSON.parse(row.remark2).fileUrl ? JSON.parse(row.remark2).fileUrl : "";
      fileNameList.value = JSON.parse(row.remark2).fileName ? [JSON.parse(row.remark2).fileName] : [];
      if (JSON.parse(row.remark2).fileName) {
        load.value?.setFileList([{name: JSON.parse(row.remark2).fileName}])
      }
    }

    if (row.remark3) {
      remark.content3 = JSON.parse(row.remark3).content ? JSON.parse(row.remark3).content : "";
      remark.company = JSON.parse(row.remark3).company ? JSON.parse(row.remark3).company : "";
      remark.fileUrl1 = JSON.parse(row.remark3).fileUrl ? JSON.parse(row.remark3).fileUrl : "";
      fileNameList1.value = JSON.parse(row.remark3).fileName ? [JSON.parse(row.remark3).fileName] : [];
      if (JSON.parse(row.remark3).fileName) {
        load1.value?.setFileList([{name: JSON.parse(row.remark3).fileName}])
      }
    }
    if (row.remark4) {
      remark.content4 = JSON.parse(row.remark4).content ? JSON.parse(row.remark4).content : "";
      remark.users = JSON.parse(row.remark4).users ? JSON.parse(row.remark4).users : "";
      remark.fileUrl2 = JSON.parse(row.remark4).fileUrl ? JSON.parse(row.remark4).fileUrl : "";
      fileNameList2.value = JSON.parse(row.remark4).fileName ? [JSON.parse(row.remark4).fileName] : [];
      if (JSON.parse(row.remark4).fileName) {
        load2.value?.setFileList([{name: JSON.parse(row.remark4).fileName}])
      }
    }
    if (row.remark5) {
      remark.content5 = JSON.parse(row.remark5).content ? JSON.parse(row.remark5).content : "";
      remark.user5 = JSON.parse(row.remark5).user ? JSON.parse(row.remark5).user : "";
      remark.fileUrl3 = JSON.parse(row.remark5).fileUrl ? JSON.parse(row.remark5).fileUrl : "";
      fileNameList3.value = JSON.parse(row.remark5).fileName ? [JSON.parse(row.remark5).fileName] : [];
      if (JSON.parse(row.remark5).fileName) {
        load3.value?.setFileList([{name: JSON.parse(row.remark5).fileName}])
      }
    }
  });
  getUserInfo();
};
const disabledDate = (time) => {
  //选择今天以及今天之后的日期
  return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择
  //选择今天以及今天之前的日期
  //return time.getTime() > Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
};
const rules1 = {
  content2: [
    {required: true, message: "请输入分析处置要求", trigger: "blur"},
    {min: 2, max: 200, message: "长度在 2 到 200 个字符", trigger: "blur"},
  ],
  content3: [
    {required: true, message: "请输入原因分析", trigger: "blur"},
    {min: 2, max: 200, message: "长度在 2 到 200 个字符", trigger: "blur"},
  ],
  content4: [
    {required: true, message: "请输入采取的措施", trigger: "blur"},
    {min: 2, max: 200, message: "长度在 2 到 200 个字符", trigger: "blur"},
  ],
  content5: [
    {required: true, message: "请输入措施落实", trigger: "blur"},
    {min: 2, max: 200, message: "长度在 2 到 200 个字符", trigger: "blur"},
  ],
  users: [{required: true, message: "请选择人员", trigger: "blur"}],
  user1: [{required: true, message: "请选择人员", trigger: "blur"}],
  user2: [{required: true, message: "请选择人员", trigger: "blur"}],
  user5: [{required: true, message: "请选择人员", trigger: "blur"}],
  phone: [
    {required: true, message: "请输入电话", trigger: "blur"},
    {min: 11, max: 11, message: "长度在11个字符", trigger: "blur"},
  ],
  company: [{required: true, message: "请输入责任部门", trigger: "change"}],
  nextRemarkUser: [
    {required: true, message: "请选择处理人", trigger: "blur"},
  ],
};

defineExpose({showDrawer});

const remarkRef = ref(null);

const remark = reactive({
  content: "",
  user: "",
  time: "",
  nextRemarkUser: "",
  state: 0,
  users: "",
  user5: "",
  fileUrl: "",
  fileUrl1: "",
  fileUrl2: "",
  fileUrl3: "",
});
const fileNameList = ref([]);
const fileNameList1 = ref([]);
const fileNameList2 = ref([]);
const fileNameList3 = ref([]);

const cancelClick = () => {
  drawerVisible.value = false;
};

const feedBackEmit = defineEmits(["finish"]);

// 用户信息
const userInfo = ref({});
const userList = ref([]);
const getUserInfo = async () => {
  getUserTree().then((data) => {
    userList.value = data.data;
  });
};

const confirmClick = () => {
  const date = new Date();
  const now = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
  remark.user = userStore.user.username;
  remark.nextRemarkUser = remark.nextRemarkUser.join(",")
  remarkRef.value.validate((valid) => {
    if (valid) {
      // let remark1 = {
      //   content: JSON.parse(saleModel.value.remark1).content,
      //   user: JSON.parse(saleModel.value.remark1).user,
      //   user1: dutyDept.value,
      //   time: now,
      // };
      let remark2Copy = {
        content: remark.content2,
        user: remark.user,
        time: now,
        user1: remark.user1,
        user2: remark.user2,
        phone: remark.phone,
        state: remark.state,
        fileUrl: remark.fileUrl,
        fileName: fileNameList.value?.length > 0 ? fileNameList.value[0] : "",
      };
      let remark3 = {
        content: remark.content3,
        company: remark.company,
        time: now,
        fileUrl: remark.fileUrl1,
        fileName: fileNameList1.value?.length > 0 ? fileNameList1.value[0] : "",
      };
      let remark4 = {
        content: remark.content4,
        users: Array.isArray(remark.users)
          ? remark.users.join(",")
          : remark.users,
        time: now,
        fileUrl: remark.fileUrl2,
        fileName: fileNameList2.value?.length > 0 ? fileNameList2.value[0] : "",
      };
      let remark5 = {
        content: remark.content5,
        user: remark.user5,
        time: now,
        fileUrl: remark.fileUrl3,
        fileName: fileNameList3.value?.length > 0 ? fileNameList3.value[0] : "",
      };
      let remark6 = {
        content: "",
        user: remark.nextRemarkUser,
      };

      let p = {
        id: saleModel.value.id,
        // remark1: JSON.stringify(remark1),
        remark2: JSON.stringify(remark2Copy),
        remark3: JSON.stringify(remark3),
        remark4: JSON.stringify(remark4),
        remark5: JSON.stringify(remark5),
        currentUserName: remark.nextRemarkUser,
        remark6: JSON.stringify(remark6),
        state: remark.state,
        step: 1, //步骤 1 投书或建议处置意见 2 整改及纠正措施验证 3 处置情况的反馈意见
      };

      dealFeedback(p).then(() => {
        feedBackEmit("finish");
        cancelClick();
      });
    } else {
      return false;
    }
  });
};
const handClose = () => {
  load.value?.setFileList([])
  load1.value?.setFileList([])
  load2.value?.setFileList([])
  load3.value?.setFileList([])
  fileNameList.value = [];
  fileNameList1.value = [];
  fileNameList2.value = [];
  fileNameList3.value = [];
  remarkRef.value.resetFields();
  feedBackEmit("finish");
}
const saveClick = () => {
  const date = new Date();
  const now = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
  remark.user = userStore.user.username;
  // remarkRef.value.validate((valid) => {
  remark.nextRemarkUser = Array.isArray(remark.nextRemarkUser)
    ? remark.nextRemarkUser.join(",")
    : "";
  // if (valid) {
  let remark2Copy = ""
  if (remark.content2 || remark.user1 || remark.user2 || remark.phone || remark.fileUrl || fileNameList.value?.length > 0) {
    remark2Copy = {
      content: remark.content2,
      user: remark.user,
      time: now,
      user1: remark.user1,
      user2: remark.user2,
      phone: remark.phone,
      state: remark.state,
      fileUrl: remark.fileUrl,
      fileName: fileNameList.value?.length > 0 ? fileNameList.value[0] : "",
      isSave: true,
    };
  }
  let remark3 = ""
  if (remark.content3 || remark.company || remark.fileUrl1 || fileNameList1.value?.length > 0) {
    remark3 = {
      content: remark.content3,
      company: remark.company,
      time: now,
      fileUrl: remark.fileUrl1,
      fileName: fileNameList1.value?.length > 0 ? fileNameList1.value[0] : "",
    };
  }
  let remark4 = ""
  if (remark.content4 || remark.users || remark.fileUrl2 || fileNameList2.value?.length > 0) {
    remark4 = {
      content: remark.content4,
      users: Array.isArray(remark.users)
        ? remark.users.join(",")
        : remark.users,
      time: now,
      fileUrl: remark.fileUrl2,
      fileName: fileNameList2.value?.length > 0 ? fileNameList2.value[0] : "",
    };
  }
  let remark5 = ""
  if (remark.content5 || remark.user5 || remark.fileUrl3 || fileNameList3.value?.length > 0) {
    remark5 = {
      content: remark.content5,
      user: remark.user5,
      time: now,
      fileUrl: remark.fileUrl3,
      fileName: fileNameList3.value?.length > 0 ? fileNameList3.value[0] : "",
    };
  }

  let remark6 = ""
  if (remark.nextRemarkUser) {
    remark6 = {
      content: "",
      user: remark.nextRemarkUser,
    };
  }


  let p = {
    id: saleModel.value.id,
    // remark1: JSON.stringify(remark1),
    remark2: remark2Copy ? JSON.stringify(remark2Copy) : "",
    remark3: remark3 ? JSON.stringify(remark3) : "",
    remark4: remark4 ? JSON.stringify(remark4) : "",
    remark5: remark5 ? JSON.stringify(remark5) : "",
    currentUserName: remark.nextRemarkUser,
    remark6: remark6 ? JSON.stringify(remark6) : "",
    state: remark.state,
    step: 1, //步骤 1 投书或建议处置意见 2 整改及纠正措施验证 3 处置情况的反馈意见
  };
  saveBack(p).then((res) => {
    if (res.data) {
      feedBackEmit("finish");
      ElMessage.success("保存成功");
    }
  });
  // } else {
  //   return false;
  // }
  // });
};
</script>

<style scoped lang="scss">
@media print {
  #print {
    position: absolute; /* 或 absolute, fixed, 根据需要调整 */
    top: 20px; /* 调整顶部位置 */
    margin: 0; /* 重置边距 */
    width: 1000px;
  }
}

.border {
  border: 1px solid #000000;
  padding: 20px;
  margin-bottom: 20px;
  font-weight: 500;
}
</style>