index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
  1. <template>
  2. <el-row :gutter="20">
  3. <el-col :span="4" :xs="24">
  4. <ContentWrap class="h-1/1">
  5. <DeptTree @node-click="handleDeptNodeClick" />
  6. </ContentWrap>
  7. </el-col>
  8. <el-col :span="20" :xs="24">
  9. <ContentWrap>
  10. <!-- 搜索工作栏 -->
  11. <el-form
  12. class="-mb-15px"
  13. :model="queryParams"
  14. ref="queryFormRef"
  15. :inline="true"
  16. label-width="68px"
  17. >
  18. <el-form-item label="故障编码" prop="failureCode">
  19. <el-input
  20. v-model="queryParams.failureCode"
  21. placeholder="请输入故障编码"
  22. clearable
  23. @keyup.enter="handleQuery"
  24. class="!w-200px"
  25. />
  26. </el-form-item>
  27. <el-form-item label="故障名称" label-width="70px" prop="failureName">
  28. <el-input
  29. v-model="queryParams.failureName"
  30. placeholder="请输入故障名称"
  31. clearable
  32. @keyup.enter="handleQuery"
  33. class="!w-200px"
  34. />
  35. </el-form-item>
  36. <el-form-item label="状态" label-width="40px" prop="status">
  37. <el-select
  38. v-model="queryParams.status"
  39. placeholder="状态"
  40. clearable
  41. class="!w-200px"
  42. >
  43. <el-option
  44. v-for="dict in getStrDictOptions(DICT_TYPE.PMS_FAILURE_STATUS)"
  45. :key="dict.value"
  46. :label="dict.label"
  47. :value="dict.value"
  48. />
  49. </el-select>
  50. </el-form-item>
  51. <el-form-item label="是否停机" v-show="ifShow" prop="ifStop">
  52. <el-select
  53. v-model="queryParams.ifStop"
  54. placeholder="是否停机"
  55. clearable
  56. class="!w-200px"
  57. >
  58. <el-option
  59. v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
  60. :key="dict.value"
  61. :label="dict.label"
  62. :value="dict.value"
  63. />
  64. </el-select>
  65. </el-form-item>
  66. <el-form-item label="故障时间" v-show="ifShow" prop="failureTime">
  67. <el-date-picker
  68. v-model="queryParams.failureTime"
  69. value-format="YYYY-MM-DD HH:mm:ss"
  70. type="daterange"
  71. start-placeholder="开始日期"
  72. end-placeholder="结束日期"
  73. :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
  74. class="!w-220px"
  75. />
  76. </el-form-item>
  77. <el-form-item label="是否解决" v-show="ifShow" prop="ifDeal">
  78. <el-select
  79. v-model="queryParams.ifDeal"
  80. placeholder="是否解决"
  81. clearable
  82. class="!w-200px"
  83. >
  84. <el-option
  85. v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
  86. :key="dict.value"
  87. :label="dict.label"
  88. :value="dict.value"
  89. />
  90. </el-select>
  91. </el-form-item>
  92. <el-form-item label="是否协助" v-show="ifShow" prop="needHelp">
  93. <el-select
  94. v-model="queryParams.needHelp"
  95. placeholder="是否协助"
  96. clearable
  97. class="!w-200px"
  98. >
  99. <el-option
  100. v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
  101. :key="dict.value"
  102. :label="dict.label"
  103. :value="dict.value"
  104. />
  105. </el-select>
  106. </el-form-item>
  107. <el-form-item label="创建时间" v-show="ifShow" prop="createTime">
  108. <el-date-picker
  109. v-model="queryParams.createTime"
  110. value-format="YYYY-MM-DD HH:mm:ss"
  111. type="daterange"
  112. start-placeholder="开始日期"
  113. end-placeholder="结束日期"
  114. :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
  115. class="!w-220px"
  116. />
  117. </el-form-item>
  118. <el-form-item>
  119. <el-button v-if="!ifShow" @click="moreQuery(true)" type="warning"><Icon icon="ep:search" class="mr-5px"/> 更多查询</el-button>
  120. <el-button v-if="ifShow" @click="moreQuery(false)" type="danger"><Icon icon="ep:search" class="mr-5px"/> 收起查询</el-button>
  121. <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
  122. <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
  123. <el-button
  124. type="primary"
  125. plain
  126. @click="openForm('create')"
  127. >
  128. <Icon icon="ep:plus" class="mr-5px" /> 新增
  129. </el-button>
  130. <el-button
  131. type="success"
  132. plain
  133. @click="handleExport"
  134. :loading="exportLoading"
  135. v-hasPermi="['rq:iot-failure-report:export']"
  136. >
  137. <Icon icon="ep:download" class="mr-5px" /> 导出
  138. </el-button>
  139. </el-form-item>
  140. </el-form>
  141. </ContentWrap>
  142. <!-- 列表 -->
  143. <ContentWrap>
  144. <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
  145. <el-table-column label="故障编码" align="center" prop="failureCode" />
  146. <el-table-column label="故障名称" align="center" prop="failureName" />
  147. <el-table-column label="设备" align="center" prop="deviceName" />
  148. <el-table-column label="状态" align="center" prop="status" >
  149. <template #default="scope">
  150. <dict-tag :type="DICT_TYPE.PMS_FAILURE_STATUS" :value="scope.row.status" />
  151. </template>
  152. </el-table-column>
  153. <el-table-column label="审批状态" align="center" prop="auditStatus" >
  154. <template #default="scope">
  155. <dict-tag :type="DICT_TYPE.CRM_AUDIT_STATUS" :value="scope.row.auditStatus" />
  156. </template>
  157. </el-table-column>
  158. <el-table-column label="是否解决" align="center" prop="ifDeal" >
  159. <template #default="scope">
  160. <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.ifDeal" />
  161. </template>
  162. </el-table-column>
  163. <el-table-column label="需要协助" align="center" prop="needHelp" >
  164. <template #default="scope">
  165. <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.needHelp" />
  166. </template>
  167. </el-table-column>
  168. <el-table-column label="是否停机" align="center" prop="ifStop" >
  169. <template #default="scope">
  170. <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.ifStop" />
  171. </template>
  172. </el-table-column>
  173. <el-table-column
  174. label="故障时间"
  175. align="center"
  176. prop="failureTime"
  177. :formatter="dateFormatter"
  178. width="180px"
  179. />
  180. <!-- <el-table-column label="故障影响" align="center" prop="failureInfluence" />-->
  181. <el-table-column label="故障系统" align="center" prop="failureSystem" />
  182. <!-- <el-table-column label="故障描述" align="center" prop="description" />-->
  183. <el-table-column label="图片" align="center" prop="pic" />
  184. <!-- <el-table-column label="解决办法" align="center" prop="solution" />-->
  185. <!-- <el-table-column label="备注" align="center" prop="remark" />-->
  186. <el-table-column
  187. label="创建时间"
  188. align="center"
  189. prop="createTime"
  190. :formatter="dateFormatter"
  191. width="180px"
  192. />
  193. <el-table-column label="操作" align="center" min-width="120px">
  194. <template #default="scope">
  195. <el-button
  196. link
  197. v-if="scope.row.auditStatus==='30'"
  198. type="primary"
  199. @click="openForm('update', scope.row.id)"
  200. v-hasPermi="['rq:iot-device:update']"
  201. >
  202. 编辑
  203. </el-button>
  204. <el-button
  205. link
  206. v-if="scope.row.auditStatus==='30'"
  207. type="danger"
  208. @click="handleDelete(scope.row.id)"
  209. v-hasPermi="['rq:iot-device:delete']"
  210. >
  211. 删除
  212. </el-button>
  213. </template>
  214. </el-table-column>
  215. </el-table>
  216. <!-- 分页 -->
  217. <Pagination
  218. :total="total"
  219. v-model:page="queryParams.pageNo"
  220. v-model:limit="queryParams.pageSize"
  221. @pagination="getList"
  222. />
  223. </ContentWrap>
  224. </el-col>
  225. </el-row>
  226. <!-- 表单弹窗:添加/修改 -->
  227. <IotFailureReportForm ref="formRef" @success="getList" />
  228. </template>
  229. <script setup lang="ts">
  230. import { dateFormatter } from '@/utils/formatTime'
  231. import download from '@/utils/download'
  232. import { IotFailureReportApi, IotFailureReportVO } from '@/api/pms/failure'
  233. import IotFailureReportForm from './IotFailureReportForm.vue'
  234. import {DICT_TYPE, getBoolDictOptions, getIntDictOptions, getStrDictOptions} from "@/utils/dict";
  235. import DeptTree from "@/views/system/user/DeptTree.vue";
  236. /** 故障上报 列表 */
  237. defineOptions({ name: 'IotFailureReport' })
  238. const message = useMessage() // 消息弹窗
  239. const { t } = useI18n() // 国际化
  240. const ifShow = ref(false)
  241. const loading = ref(true) // 列表的加载中
  242. const list = ref<IotFailureReportVO[]>([]) // 列表的数据
  243. const total = ref(0) // 列表的总页数
  244. const queryParams = reactive({
  245. pageNo: 1,
  246. pageSize: 10,
  247. failureCode: undefined,
  248. failureName: undefined,
  249. deviceId: undefined,
  250. status: undefined,
  251. ifStop: undefined,
  252. failureTime: [],
  253. failureInfluence: undefined,
  254. failureSystem: undefined,
  255. description: undefined,
  256. pic: undefined,
  257. ifDeal: undefined,
  258. needHelp: undefined,
  259. solution: undefined,
  260. remark: undefined,
  261. createTime: [],
  262. deptId: undefined
  263. })
  264. const queryFormRef = ref() // 搜索的表单
  265. const exportLoading = ref(false) // 导出的加载中
  266. const moreQuery = (show) => {
  267. ifShow.value = show
  268. }
  269. const handleCommand = (command: string, row: IotFailureReportVO) => {
  270. switch (command) {
  271. case 'handleDelete':
  272. handleDelete(row.id)
  273. break
  274. case 'handleUpdate':
  275. openForm('update', row.id)
  276. break
  277. case 'handleSubmit':
  278. submitProcess(row.id)
  279. break
  280. default:
  281. break
  282. }
  283. }
  284. /** 查询列表 */
  285. const getList = async () => {
  286. loading.value = true
  287. try {
  288. const data = await IotFailureReportApi.getIotFailureReportPage(queryParams)
  289. list.value = data.list
  290. total.value = data.total
  291. } finally {
  292. loading.value = false
  293. }
  294. }
  295. /** 处理部门被点击 */
  296. const handleDeptNodeClick = async (row) => {
  297. queryParams.deptId = row.id
  298. await getList()
  299. }
  300. /** 搜索按钮操作 */
  301. const handleQuery = () => {
  302. queryParams.pageNo = 1
  303. getList()
  304. }
  305. /** 重置按钮操作 */
  306. const resetQuery = () => {
  307. queryFormRef.value.resetFields()
  308. handleQuery()
  309. }
  310. /** 添加/修改操作 */
  311. const formRef = ref()
  312. const openForm = (type: string, id?: number) => {
  313. formRef.value.open(type, id)
  314. }
  315. /** 删除按钮操作 */
  316. const handleDelete = async (id: number) => {
  317. try {
  318. // 删除的二次确认
  319. await message.delConfirm()
  320. // 发起删除
  321. await IotFailureReportApi.deleteIotFailureReport(id)
  322. message.success(t('common.delSuccess'))
  323. // 刷新列表
  324. await getList()
  325. } catch {}
  326. }
  327. /** 导出按钮操作 */
  328. const handleExport = async () => {
  329. try {
  330. // 导出的二次确认
  331. await message.exportConfirm()
  332. // 发起导出
  333. exportLoading.value = true
  334. const data = await IotFailureReportApi.exportIotFailureReport(queryParams)
  335. download.excel(data, '故障上报.xls')
  336. } catch {
  337. } finally {
  338. exportLoading.value = false
  339. }
  340. }
  341. /** 初始化 **/
  342. onMounted(() => {
  343. getList()
  344. })
  345. const submitProcess = async (row: IotFailureReportVO) => {
  346. try {
  347. // 提交审核的二次确认
  348. await message.confirm(`您确定提交审核吗?`)
  349. // 提交审核
  350. debugger
  351. loading.value = true
  352. await IotFailureReportApi.submitForApproval(row).then(res=>{
  353. loading.value = false
  354. })
  355. message.success('提交审核成功!')
  356. // 刷新列表
  357. await getList()
  358. } catch {}
  359. }
  360. </script>