Newer
Older
KaiFengPC / src / views / floodSys / repair / anJian.vue
@zhangdeliang zhangdeliang on 23 May 8 KB 初始化项目
  1. <template>
  2. <!-- 排水防涝子系统 长效运维 案件管理-->
  3. <div class="publicContainer">
  4. <!-- 搜索区域 -->
  5. <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
  6. <el-form-item label="案件描述" prop="eventName">
  7. <el-input v-model="queryParams.eventName" placeholder="请输入" clearable @keyup.enter="handleQuery" />
  8. </el-form-item>
  9. <el-form-item label="案件类型" prop="eventType">
  10. <el-select v-model="queryParams.eventType" placeholder="请选择" clearable>
  11. <el-option v-for="item in eventTypes" :key="item.value" :label="item.label" :value="item.value" />
  12. </el-select>
  13. </el-form-item>
  14. <el-form-item label="状态" prop="eventStatus">
  15. <el-select v-model="queryParams.eventStatus" placeholder="请选择" clearable>
  16. <el-option v-for="item in statusType" :key="item.value" :label="item.label" :value="item.value" />
  17. </el-select>
  18. </el-form-item>
  19. <el-form-item label="紧急程度" prop="eventUrgency">
  20. <el-select v-model="queryParams.eventUrgency" placeholder="请选择" clearable>
  21. <el-option v-for="item in urgencyType" :key="item.value" :label="item.label" :value="item.value" />
  22. </el-select>
  23. </el-form-item>
  24. <el-form-item>
  25. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  26. <el-button type="success" icon="Refresh" @click="resetQuery">重置</el-button>
  27. </el-form-item>
  28. </el-form>
  29. <!-- 按钮区域 -->
  30. <el-row :gutter="10" class="mb8">
  31. <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
  32. </el-row>
  33. <!-- 表格 -->
  34. <el-table v-loading="tableLoading" :data="tableData" max-height="650">
  35. <el-table-column label="案件名称" prop="eventName" />
  36. <el-table-column label="案件类型" prop="eventType">
  37. <template #default="scope">
  38. <dict-tag :options="eventTypes" :value="scope.row.eventType" />
  39. </template>
  40. </el-table-column>
  41. <el-table-column label="事件状态" prop="eventStatus">
  42. <template #default="scope">
  43. <dict-tag :options="eventStatusType" :value="scope.row.eventStatus" />
  44. </template>
  45. </el-table-column>
  46. <el-table-column label="事件紧急程度" prop="eventUrgency">
  47. <template #default="scope">
  48. <dict-tag :options="urgencyType" :value="scope.row.eventUrgency" />
  49. </template>
  50. </el-table-column>
  51. <el-table-column label="事件要求" prop="eventRequirement" />
  52. <el-table-column label="创建时间" prop="createTime" />
  53. <el-table-column label="操作" width="200" class-name="small-padding fixed-width">
  54. <template #default="scope">
  55. <el-button
  56. link
  57. type="warning"
  58. icon="edit"
  59. @click="handleRepair(scope.row)"
  60. v-hasPermi="['floodSys:warn:order']"
  61. v-if="scope.row.eventStatus == 'case_handling'"
  62. >
  63. 转维修工单
  64. </el-button>
  65. <el-button link type="primary" icon="check" @click="handleDetail(scope.row)" v-hasPermi="['floodSys:warn:AI']">详情</el-button>
  66. </template>
  67. </el-table-column>
  68. </el-table>
  69. <!-- 分页 -->
  70. <pagination
  71. v-show="total > 0"
  72. :total="total"
  73. v-model:page="queryParams.pageNum"
  74. v-model:limit="queryParams.pageSize"
  75. @pagination="getDataList"
  76. />
  77.  
  78. <!-- 转维修工单弹窗 -->
  79. <el-dialog title="转维修工单" v-model="dialogShow" width="500px" append-to-body>
  80. <el-form ref="formRef" :model="formData" :rules="rulesForm" label-width="120px" class="publicForm">
  81. <el-form-item label="维修人员" prop="rpUserNo">
  82. <el-select v-model="formData.rpUserNo" placeholder="请选择" clearable>
  83. <el-option v-for="item in userList" :key="item.userName" :label="item.nickName" :value="item.userName" />
  84. </el-select>
  85. </el-form-item>
  86. <el-form-item label="期望完成时间" prop="rpExpectTime">
  87. <el-date-picker type="datetime" v-model="formData.rpExpectTime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择日期">
  88. </el-date-picker>
  89. </el-form-item>
  90. <el-form-item label="事件紧急程度" prop="rpUrgency">
  91. <el-select v-model="formData.rpUrgency" placeholder="请选择" clearable>
  92. <el-option v-for="item in urgencyType" :key="item.value" :label="item.label" :value="item.value" />
  93. </el-select>
  94. </el-form-item>
  95. <el-form-item label="维修要求" prop="rpRequire">
  96. <el-input type="textarea" v-model="formData.rpRequire" placeholder="请输入" />
  97. </el-form-item>
  98. <el-form-item label="维修类型" prop="rpType">
  99. <el-select v-model="formData.rpType" placeholder="请选择" clearable>
  100. <el-option v-for="item in repairType" :key="item.value" :label="item.label" :value="item.value" />
  101. </el-select>
  102. </el-form-item>
  103. </el-form>
  104. <template #footer>
  105. <div class="dialog-footer">
  106. <el-button type="info" @click="cancelForm">取 消</el-button>
  107. <el-button type="primary" @click="submitForm">确 定</el-button>
  108. </div>
  109. </template>
  110. </el-dialog>
  111.  
  112. <!-- 详情 -->
  113. <el-dialog title="事件详情" v-model="dialogDetail" width="800px" append-to-body>
  114. <EventDetail :eventId="eventId" v-if="dialogDetail" />
  115. </el-dialog>
  116. </div>
  117. </template>
  118.  
  119. <script setup name="案件管理">
  120. import { anjianPage, anjianOrder } from '@/api/floodSys/repair';
  121. import EventDetail from './eventYJDetail.vue';
  122. import { listUser } from '@/api/system/user';
  123.  
  124. const { proxy } = getCurrentInstance();
  125.  
  126. const tableData = ref([]);
  127. const tableLoading = ref(true);
  128. const total = ref(0);
  129. const dialogShow = ref(false);
  130. const showSearch = ref(true);
  131. const dialogDetail = ref(false);
  132. const eventId = ref('');
  133.  
  134. const urgencyType = proxy.fixDict['urgencyType']; //事件紧急程度
  135. const eventTypes = proxy.fixDict['eventTypes']; //事件类型
  136. const eventStatusType = proxy.fixDict['eventStatusType']; //事件处理状态
  137. const statusType = ref([
  138. { label: '转案件中心(待维修)', value: 'unrepair' },
  139. { label: '转案件中心(已维修完成)', value: 'repaired' },
  140. ]);
  141. const repairType = ref([
  142. { label: '小修', value: 'minor' },
  143. { label: '专项维修', value: 'special' },
  144. ]);
  145. const userList = ref([]);
  146.  
  147. const allData = reactive({
  148. queryParams: {
  149. pageNum: 1,
  150. pageSize: 10,
  151. eventName: undefined,
  152. eventType: undefined,
  153. eventStatus: undefined,
  154. eventUrgency: undefined,
  155. },
  156. formData: {
  157. eventRelationId: '',
  158. rpUserName: '',
  159. rpUserNo: '',
  160. rpUrgency: '',
  161. rpType: '',
  162. rpRequire: '',
  163. rpExpectTime: '',
  164. },
  165. rulesForm: {
  166. rpUserNo: [{ required: true, message: '请输入', trigger: 'blur' }],
  167. rpUrgency: [{ required: true, message: '请输入', trigger: 'blur' }],
  168. postSort: [{ required: true, message: '请输入', trigger: 'blur' }],
  169. },
  170. });
  171. const { queryParams, formData, rulesForm } = toRefs(allData);
  172.  
  173. /** 查询列表 */
  174. function getDataList() {
  175. tableLoading.value = true;
  176. anjianPage(queryParams.value).then(response => {
  177. tableData.value = response.data;
  178. total.value = response.total;
  179. tableLoading.value = false;
  180. });
  181. }
  182. /** 转维修工单 */
  183. function handleRepair(row) {
  184. proxy.resetForm('formRef'); //清空表单
  185. formData.value.eventRelationId = row.id;
  186. dialogShow.value = true;
  187. }
  188. /** 取消按钮 */
  189. function cancelForm() {
  190. dialogShow.value = false;
  191. }
  192. /** 搜索按钮操作 */
  193. function handleQuery() {
  194. queryParams.value.pageNum = 1;
  195. getDataList();
  196. }
  197. /** 重置按钮操作 */
  198. function resetQuery() {
  199. proxy.resetForm('queryRef');
  200. handleQuery();
  201. }
  202. /** 提交按钮 */
  203. function submitForm() {
  204. proxy.$refs['formRef'].validate(valid => {
  205. if (valid) {
  206. formData.value.rpUserName = userList.value.filter(item => item.userName == formData.value.rpUserNo)[0].nickName;
  207. anjianOrder(formData.value).then(response => {
  208. proxy.$modal.msgSuccess('转维修工单成功');
  209. dialogShow.value = false;
  210. getDataList();
  211. });
  212. }
  213. });
  214. }
  215. /** 详情 */
  216. function handleDetail(row) {
  217. eventId.value = String(row.id);
  218. dialogDetail.value = true;
  219. }
  220. //查询维修人员列表
  221. function getUserList() {
  222. listUser().then(res => {
  223. userList.value = res.data;
  224. });
  225. }
  226.  
  227. onMounted(() => {
  228. getDataList();
  229. getUserList();
  230. });
  231. </script>