repairDetail.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  1. <template>
  2. <van-nav-bar :title="title" safe-area-inset-top>
  3. <template #left>
  4. <van-icon
  5. :name="require('@/assets/arrow-left.svg')"
  6. size="24"
  7. @click="backPath"
  8. />
  9. </template>
  10. </van-nav-bar>
  11. <div class="page_info">
  12. <div class="info_list">
  13. <van-cell-group class="cell_title_icon">
  14. <van-cell
  15. title="报修信息"
  16. :icon="require('@/assets/line.svg')"
  17. v-if="
  18. role == 'admin' && (dataForm.status == 2 || dataForm.status == 3)
  19. "
  20. />
  21. <van-cell title="报修时间" :value="dataForm.createDate" />
  22. <van-cell title="报修位置" :value="dataForm.repairPosition" />
  23. <van-cell
  24. title="报修区域"
  25. :value="`${repairRegion_filter(dataForm.repairRegion)}`"
  26. />
  27. <van-cell
  28. title="报修类型"
  29. :value="`${repairType_filter(dataForm.repairType)}`"
  30. />
  31. <van-cell title="联系人" :value="dataForm.contactPerson" />
  32. <van-cell title="联系电话" :value="dataForm.contactPhone" />
  33. <van-cell title="故障描述" :value="dataForm.faultDes" />
  34. <van-cell title="故障照片" :border="false" class="upload_cell">
  35. <template #value>
  36. <van-image
  37. width="80"
  38. height="80"
  39. :src="item"
  40. v-for="(item, index) in imagesList"
  41. :key="item + '_' + index"
  42. />
  43. </template>
  44. </van-cell>
  45. </van-cell-group>
  46. <van-cell-group
  47. class="cell_title_icon"
  48. v-if="role == 'admin' && (dataForm.status == 2 || dataForm.status == 3)"
  49. >
  50. <van-cell title="维修信息" :icon="require('@/assets/line.svg')" />
  51. <van-cell
  52. title="紧急程度"
  53. :value="`${urgency_filter(dataForm.urgency)}`"
  54. />
  55. <van-cell title="维修人员" :value="dataForm.repairPersonName" />
  56. <van-cell title="联系电话" :value="dataForm.repairPersonId" />
  57. <van-cell
  58. title="维修完成时间"
  59. :value="dataForm.repairFinishTime"
  60. v-if="dataForm.status == 3"
  61. />
  62. </van-cell-group>
  63. </div>
  64. </div>
  65. <div class="save_btn">
  66. <template v-if="role == 3">
  67. <van-button
  68. block
  69. type="primary"
  70. loading-type="spinner"
  71. :loading="loading"
  72. loading-text="维修完成"
  73. @click="handleClick('finish')"
  74. >
  75. 维修完成
  76. </van-button>
  77. </template>
  78. <template v-if="role == 'admin' && dataForm.status == 1">
  79. <van-button
  80. block
  81. type="primary"
  82. loading-type="spinner"
  83. @click="handleClick('dispatch')"
  84. >
  85. 指派维修人员
  86. </van-button>
  87. </template>
  88. </div>
  89. <van-popup
  90. v-model:show="showPopup"
  91. position="bottom"
  92. :style="{ height: '30%' }"
  93. class="popup_info"
  94. >
  95. <van-row class="popup_title">
  96. <van-col :span="24">{{ popupTitle }}</van-col>
  97. </van-row>
  98. <van-divider style="margin: 0" />
  99. <van-form
  100. ref="dataForm"
  101. input-align="right"
  102. error-message-align="right"
  103. @submit="onSubmit"
  104. >
  105. <van-cell-group :border="false">
  106. <van-field
  107. v-model="dataForm.repairPersonName"
  108. label="维修人员"
  109. required
  110. is-link
  111. placeholder="请选择维修人员"
  112. clearable
  113. :rules="[{ required: true, message: '请选择维修人员' }]"
  114. @click="showRepairPersonPicker = true"
  115. />
  116. <van-popup
  117. v-model:show="showRepairPersonPicker"
  118. round
  119. position="bottom"
  120. >
  121. <van-picker
  122. :columns="repairPersonList"
  123. @cancel="showRepairPersonPicker = false"
  124. @confirm="
  125. (value) => {
  126. dataForm.repairPersonId = value.value;
  127. dataForm.repairPersonName = value.text;
  128. showRepairPersonPicker = false;
  129. }
  130. "
  131. />
  132. </van-popup>
  133. <van-field
  134. v-model="dataForm.urgencyName"
  135. label="紧急程度"
  136. required
  137. is-link
  138. placeholder="请选择紧急程度"
  139. clearable
  140. :rules="[{ required: true, message: '请选择紧急程度' }]"
  141. @click="showUrgencyPicker = true"
  142. />
  143. <van-popup v-model:show="showUrgencyPicker" round position="bottom">
  144. <van-picker
  145. :columns="repairUrgencyList"
  146. @cancel="showUrgencyPicker = false"
  147. @confirm="
  148. (value) => {
  149. dataForm.urgency = value.value;
  150. dataForm.urgencyName = value.text;
  151. showUrgencyPicker = false;
  152. }
  153. "
  154. />
  155. </van-popup>
  156. </van-cell-group>
  157. <div class="save_btn">
  158. <van-button
  159. block
  160. type="primary"
  161. :loading="loading"
  162. loading-type="spinner"
  163. loading-text="提交"
  164. native-type="submit"
  165. >
  166. 提交
  167. </van-button>
  168. </div>
  169. </van-form>
  170. </van-popup>
  171. </template>
  172. <script>
  173. import Api from "../utils/api";
  174. import { isEmpty } from "@/utils/index.js";
  175. import VCountUp from "./CountUp";
  176. export default {
  177. components: {
  178. "v-count-up": VCountUp,
  179. },
  180. data() {
  181. return {
  182. role: "",
  183. loading: false,
  184. title: "",
  185. showImgPreview: false,
  186. imagesList: [],
  187. showPopup: false,
  188. popupTitle: "工单指派",
  189. showRepairPersonPicker: false,
  190. showUrgencyPicker: false,
  191. repairPersonList: [],
  192. repairUrgencyList: [
  193. { text: "非常紧急", value: 1 },
  194. { text: "紧急", value: 2 },
  195. { text: "普通", value: 3 },
  196. ],
  197. dataForm: {
  198. id: "",
  199. repairPersonId: "",
  200. repairPersonName: "",
  201. urgency: "",
  202. urgencyName: "",
  203. repairTime: "",
  204. repairFinishTime: "",
  205. repairPositionName: "",
  206. repairRegion: "",
  207. status: "",
  208. repairType: "",
  209. contactPerson: "",
  210. contactPhone: "",
  211. faultDes: "",
  212. faultPics: "",
  213. },
  214. };
  215. },
  216. created() {
  217. this.role = localStorage.getItem("role");
  218. this.getDataDetail();
  219. this.getUserList();
  220. },
  221. methods: {
  222. repairType_filter(val) {
  223. if (isEmpty(val)) {
  224. return "";
  225. }
  226. if (val == 1) {
  227. return "水";
  228. }
  229. if (val == 2) {
  230. return "电";
  231. }
  232. if (val == 3) {
  233. return "其他";
  234. }
  235. },
  236. repairRegion_filter(val) {
  237. if (isEmpty(val)) {
  238. return "";
  239. }
  240. if (val == 1) {
  241. return "公共区域";
  242. }
  243. if (val == 2) {
  244. return "室内";
  245. }
  246. },
  247. urgency_filter(val) {
  248. if (isEmpty(val)) {
  249. return "";
  250. }
  251. if (val == 1) {
  252. return "非常紧急";
  253. }
  254. if (val == 2) {
  255. return "紧急";
  256. }
  257. if (val == 3) {
  258. return "普通";
  259. }
  260. },
  261. //获取维修人员
  262. getUserList() {
  263. Api.repairInfoUser({
  264. page: 1,
  265. limit: 100,
  266. }).then((res) => {
  267. if (res.code == 0) {
  268. this.repairPersonList = res.data.list;
  269. }
  270. });
  271. },
  272. getDataDetail() {
  273. Api.repairInfoDetail(this.$route.query.id).then((res) => {
  274. if (res.code == 0) {
  275. this.dataForm = res.data;
  276. this.imagesList = this.dataForm.faultPics.split(",");
  277. if (this.dataForm.status == 2 || this.dataForm.status == 3) {
  278. this.title = "报修详情";
  279. } else {
  280. this.title = "工单详情";
  281. }
  282. } else {
  283. }
  284. });
  285. },
  286. handleClick(type) {
  287. if (type == "finish") {
  288. this.$dialog
  289. .confirm({
  290. message: "请确认是否维修完成",
  291. })
  292. .then(() => {
  293. this.loading = true;
  294. setTimeout(() => {
  295. this.loading = false;
  296. }, 2000);
  297. // on confirm
  298. })
  299. .catch(() => {
  300. // on cancel
  301. });
  302. }
  303. if (type == "dispatch") {
  304. this.showPopup = !this.showPopup;
  305. this.$nextTick(() => {
  306. this.$refs.dataForm.resetValidation();
  307. });
  308. }
  309. },
  310. onSubmit() {
  311. this.$toast.loading({
  312. message: "保存中...",
  313. forbidClick: true,
  314. });
  315. Api.repairInfoDispatch({
  316. id: this.dataForm.id,
  317. repairPersonId: this.dataForm.repairPersonId,
  318. urgency: this.dataForm.urgency,
  319. }).then((res) => {
  320. if (res.code == 0) {
  321. this.$toast.success("保存成功");
  322. this.showPopup = false;
  323. this.getDataDetail();
  324. } else {
  325. this.$toast.fail("保存失败");
  326. }
  327. });
  328. },
  329. backPath() {
  330. this.$router.back();
  331. },
  332. },
  333. };
  334. </script>
  335. <style lang="scss" scoped>
  336. .page_info {
  337. .info_list {
  338. /deep/ {
  339. .upload_cell {
  340. .van-cell__title {
  341. flex: unset;
  342. }
  343. .van-image {
  344. margin-left: 8px;
  345. margin-bottom: 8px;
  346. }
  347. }
  348. .cell_title_icon {
  349. .van-icon {
  350. display: flex;
  351. align-items: center;
  352. }
  353. }
  354. }
  355. }
  356. }
  357. </style>
  358. <style lang="scss">
  359. .popup_info {
  360. box-shadow: 0px -10px 20px 0px rgba(27, 32, 38, 0.1);
  361. border-radius: 20px 20px 0px 0px;
  362. /deep/ {
  363. .popup_title {
  364. padding: 14px 0;
  365. font-weight: 600;
  366. font-size: 16px;
  367. color: #333333;
  368. text-shadow: 0px -10px 20px rgba(27, 32, 38, 0.1);
  369. }
  370. }
  371. .van-field__label {
  372. color: #666666;
  373. }
  374. }
  375. </style>