qingban-SPC/src/views/sales/handle5.vue

<template>
  <el-drawer v-model="drawerVisible" size="1000">
    <div>
      <DetailCom ref="detailComRef"></DetailCom>
    </div>

    <el-form
      ref="remarkRef"
      :model="remark"
      label-width="150"
      :rules="rules1"
      style="max-width: 600px; margin-left: 80px; margin-top: 20px"
    >
      <el-form-item label="整改及纠正措施验证" prop="content">
        <el-input
          v-model="remark.content"
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 6 }"
        />
      </el-form-item>
      <!--      <el-form-item label="填表人" prop="user">
              <el-select
                v-model="remark.user"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.userName"
                  :label="item.userName"
                  :value="item.userName"
                />
              </el-select>
            </el-form-item>-->
      <!--      <el-form-item label="日期" prop="time">
        <el-date-picker
            v-model="remark.time"
            type="date"
            placeholder="请选择日期"
            :disabled-date="disabledDate"
            clearable
            format="YYYY年MM月DD日"
            value-format="YYYY年MM月DD日"
            style="width: 100%"
        />
      </el-form-item>-->
      <el-form-item
        label="下一步处理人"
        prop="nextRemarkUser"
        v-if="remark.state == 0"
      >
        <!--        <el-select
                  v-model="remark.nextRemarkUser"
                  placeholder="请选择处理人"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in userList"
                    :key="item.userName"
                    :label="item.userName"
                    :value="item.userName"
                  />
                </el-select>-->
        <el-tree-select
          v-model="remark.nextRemarkUser"
          :data="userList"
          filterable
          multiple
        />
      </el-form-item>
      <el-form-item label="附件" prop="fileUrl">
        <FilesUpload
          v-model:src="remark.fileUrl"
          :generate-pdf="false"
          v-model:file-name-list="fileNameList"
        />
      </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 @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">提交</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import DetailCom from "@/views/sales/DetailCom.vue";
import { dealFeedback, getUserList } from "@/api/sales/index";
import { getUserTree } from "@/api/user/index";
import { useUserStore } from "@/store";
import FilesUpload from "@/components/Upload/FilesUpload.vue";
const drawerVisible = ref(false);
const detailComRef = ref(null);
const saleModel = ref({});
const userStore = useUserStore();
const disabledDate = (time) => {
  //选择今天以及今天之后的日期
  return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择
  //选择今天以及今天之前的日期
  //return time.getTime() > Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
};
const showDrawer = (row) => {
  drawerVisible.value = true;
  saleModel.value = row;

  nextTick(() => {
    detailComRef.value && detailComRef.value.refreshView(row);
  });

  getUserInfo();
};

const rules1 = {
  content: [
    { required: true, message: "请输入投诉或建议处置意见", trigger: "blur" },
    { min: 2, max: 200, message: "长度在 2 到 200 个字符", trigger: "blur" },
  ],
  user: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
  ],
  time: [{ required: true, message: "请选择日期", trigger: "change" }],
  nextRemarkUser: [
    { required: true, message: "请选择处理人", trigger: "change" },
    { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
  ],
};

defineExpose({ showDrawer });

const remarkRef = ref(null);

const remark = reactive({
  content: "",
  user: "",
  time: "",
  nextRemarkUser: "",
  state: 0,
  fileUrl: "",
});
const fileNameList = ref([]);

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

  remarkRef.value.resetFields();
};

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

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

const confirmClick = () => {
  remark.user = userStore.user.username;
  const date = new Date();
  const now = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
  remark.nextRemarkUser = remark.nextRemarkUser.join(",");
  remarkRef.value.validate((valid) => {
    if (valid) {
      let remark2Copy = {
        content: remark.content,
        user: remark.user,
        time: now,
        state: remark.state,
        fileUrl: remark.fileUrl,
        fileName: fileNameList.value?.length > 0 ? fileNameList.value[0] : "",
      };
      let remark3 = {
        content: "",
        user: remark.nextRemarkUser, // qinhaibo和dengyu说是user1234的
        time: "",
      };

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

      dealFeedback(p).then(() => {
        feedBackEmit("finish");
        cancelClick();
      });
    } else {
      console.log("remarkRef invalid");
      return false;
    }
  });
};
</script>

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