qingban-SPC/src/views/sales/handle2.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="time">
        <el-date-picker
          v-model="remark.time"
          type="date"
          :disabled-date="disabledDate"
          placeholder="请选择日期"
          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-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 @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";
const drawerVisible = ref(false);
const detailComRef = ref(null);
const saleModel = ref({});
const userStore = useUserStore();
const showDrawer = (row) => {
  drawerVisible.value = true;
  saleModel.value = row;

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

  getUserInfo();
};
const disabledDate = (time)=> {
  //选择今天以及今天之后的日期
  return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择
  //选择今天以及今天之前的日期
  //return time.getTime() > Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
}
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,
});

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 = () => {
  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 remark2Copy = {
        content: remark.content,
        user: remark.user,
        time: now,
        state: remark.state,
      };
      let remark3 = {
        content: "",
        user: remark.nextRemarkUser, // qinhaibo和dengyu说是user1234的
        time: "",
      };

      let p = {
        id: saleModel.value.id,
        currentUserName: remark.nextRemarkUser,
        remark2: JSON.stringify(remark2Copy),
        state: remark.state,
        remark3: JSON.stringify(remark3),
        step: 1, //步骤 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>