handle4.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <template>
  2. <el-drawer v-model="drawerVisible" size="1000">
  3. <div>
  4. <DetailCom ref="detailComRef"></DetailCom>
  5. </div>
  6. <el-form
  7. ref="remarkRef"
  8. :model="remark"
  9. label-width="150"
  10. :rules="rules1"
  11. style="max-width: 600px; margin-left: 80px; margin-top: 20px"
  12. >
  13. <el-form-item label="采取的措施" prop="content">
  14. <el-input
  15. v-model="remark.content"
  16. type="textarea"
  17. :autosize="{ minRows: 3, maxRows: 6 }"
  18. />
  19. </el-form-item>
  20. <!-- <el-form-item label="责任部门" prop="user">
  21. <el-tree-select
  22. v-model="remark.user"
  23. :data="userList"
  24. filterable
  25. />
  26. </el-form-item>-->
  27. <el-form-item
  28. label="下一步处理人"
  29. prop="nextRemarkUser"
  30. v-if="remark.state == 0"
  31. >
  32. <el-tree-select
  33. v-model="remark.nextRemarkUser"
  34. :data="userList"
  35. filterable
  36. multiple
  37. />
  38. </el-form-item>
  39. <el-form-item label="附件" prop="fileUrl">
  40. <FilesUpload
  41. v-model:src="remark.fileUrl"
  42. :generate-pdf="false"
  43. v-model:file-name-list="fileNameList"
  44. />
  45. </el-form-item>
  46. <el-form-item label="是否通过" prop="state">
  47. <el-radio-group v-model="remark.state">
  48. <el-radio :value="0">同意</el-radio>
  49. <el-radio :value="1">不同意</el-radio>
  50. </el-radio-group>
  51. </el-form-item>
  52. </el-form>
  53. <template #footer>
  54. <div class="drawer-bottom">
  55. <el-button @click="cancelClick">取消</el-button>
  56. <el-button type="primary" @click="confirmClick">提交</el-button>
  57. </div>
  58. </template>
  59. </el-drawer>
  60. </template>
  61. <script setup>
  62. import DetailCom from "@/views/unqualified/DetailCom.vue";
  63. import { dealFeedback } from "@/api/unqualified/index";
  64. import { getUserTree } from "@/api/user/index";
  65. import { useUserStore } from "@/store";
  66. import FilesUpload from "@/components/Upload/FilesUpload.vue";
  67. const drawerVisible = ref(false);
  68. const detailComRef = ref(null);
  69. const saleModel = ref({});
  70. const userStore = useUserStore();
  71. const disabledDate = (time) => {
  72. //选择今天以及今天之后的日期
  73. return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择
  74. //选择今天以及今天之前的日期
  75. //return time.getTime() > Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
  76. };
  77. const dutyDept = ref("");
  78. const showDrawer = (row) => {
  79. drawerVisible.value = true;
  80. saleModel.value = row;
  81. dutyDept.value = JSON.parse(row.remark4).user;
  82. nextTick(() => {
  83. detailComRef.value && detailComRef.value.refreshView(row);
  84. });
  85. getUserInfo();
  86. };
  87. const rules1 = {
  88. content: [
  89. { required: true, message: "请输入投诉或建议处置意见", trigger: "blur" },
  90. { min: 2, max: 200, message: "长度在 2 到 200 个字符", trigger: "blur" },
  91. ],
  92. user: [
  93. { required: true, message: "请输入姓名", trigger: "blur" },
  94. { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
  95. ],
  96. time: [{ required: true, message: "请选择日期", trigger: "change" }],
  97. nextRemarkUser: [
  98. { required: true, message: "请选择处理人", trigger: "change" },
  99. { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
  100. ],
  101. };
  102. defineExpose({ showDrawer });
  103. const remarkRef = ref(null);
  104. const remark = reactive({
  105. content: "",
  106. user: "",
  107. time: "",
  108. nextRemarkUser: "",
  109. state: 0,
  110. fileUrl: "",
  111. });
  112. const fileNameList = ref([]);
  113. const cancelClick = () => {
  114. drawerVisible.value = false;
  115. remarkRef.value.resetFields();
  116. };
  117. const feedBackEmit = defineEmits(["finish"]);
  118. // 用户信息
  119. const userInfo = ref({});
  120. const userList = ref([]);
  121. const getUserInfo = async () => {
  122. getUserTree().then((data) => {
  123. userList.value = data.data;
  124. });
  125. };
  126. const confirmClick = () => {
  127. const date = new Date();
  128. const now = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
  129. remark.user = dutyDept.value;
  130. remark.nextRemarkUser = remark.nextRemarkUser.join(",")
  131. remarkRef.value.validate((valid) => {
  132. if (valid) {
  133. let remark2Copy = {
  134. content: remark.content,
  135. user: remark.user,
  136. time: now,
  137. state: remark.state,
  138. fileUrl: remark.fileUrl,
  139. fileName: fileNameList.value?.length > 0 ? fileNameList.value[0] : "",
  140. };
  141. let remark3 = {
  142. content: "",
  143. user: remark.nextRemarkUser, // qinhaibo和dengyu说是user1234的
  144. time: "",
  145. };
  146. let p = {
  147. id: saleModel.value.id,
  148. remark4: JSON.stringify(remark2Copy),
  149. remark5: JSON.stringify(remark3),
  150. currentUserName: remark.nextRemarkUser,
  151. state: remark.state,
  152. step: 4, //步骤 1 投书或建议处置意见 2 整改及纠正措施验证 3 处置情况的反馈意见
  153. };
  154. dealFeedback(p).then(() => {
  155. feedBackEmit("finish");
  156. cancelClick();
  157. });
  158. } else {
  159. console.log("remarkRef invalid");
  160. return false;
  161. }
  162. });
  163. };
  164. </script>
  165. <style scoped lang="scss">
  166. @media print {
  167. #print {
  168. position: absolute; /* 或 absolute, fixed, 根据需要调整 */
  169. top: 20px; /* 调整顶部位置 */
  170. margin: 0; /* 重置边距 */
  171. width: 1000px;
  172. }
  173. }
  174. </style>