Index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
  1. <template>
  2. <div class="app-container">
  3. <!-- 搜索模块 -->
  4. <div class="filter-container">
  5. <!-- <span>
  6. <span>订单名称:</span>
  7. <el-input v-model="queryParams.model.orderName" :placeholder='$t("common.pleaseEnter")' style="width: 150px;" size="medium"/>
  8. </span>-->
  9. <span style="margin-left: 15px;">
  10. <span>{{$t("lineSide.searchForm.status")}}:</span>
  11. <el-select v-model="queryParams.model.scanResult" :placeholder='$t("common.pleaseSelect")' size="medium" style="width: 150px;">
  12. <el-option
  13. v-for="item in audioStatus"
  14. :key="item.value"
  15. :label="item.label"
  16. :value="item.value">
  17. </el-option>
  18. </el-select>
  19. </span>
  20. <span style="margin-left: 15px;">
  21. <el-button plain type="primary" icon="el-icon-search" size="medium" @click="search">
  22. {{ $t("table.search") }}
  23. </el-button>
  24. <el-button plain type="warning" icon="el-icon-refresh" size="medium" @click="reset">
  25. {{ $t("table.reset") }}
  26. </el-button>
  27. </span>
  28. </div>
  29. <!-- 列表数据 -->
  30. <el-table
  31. :key="tableKey"
  32. ref="table"
  33. v-loading="loading"
  34. :data="tableData.records"
  35. border
  36. fit
  37. row-key="id"
  38. style="width: 100%;"
  39. @selection-change="onSelectChange"
  40. @cell-click="cellClick"
  41. >
  42. <el-table-column label='' width="50" align="center"></el-table-column>
  43. <el-table-column align="center" type="selection" width="50" :reserve-selection="true" />
  44. <!-- <el-table-column prop="orderName" :label='"订单名称"' :show-overflow-tooltip="true"></el-table-column>-->
  45. <el-table-column prop="deviceName" :label='"设备名称"' :show-overflow-tooltip="true" ></el-table-column>
  46. <el-table-column prop="needToolCategory" :label='"缺少刀具类别"' :show-overflow-tooltip="true" ></el-table-column>
  47. <el-table-column prop="scanResult" :label='"任务状态"' :show-overflow-tooltip="true" >
  48. <template slot-scope="{ row }">
  49. <el-tag :type="getTagType(row.scanResult)">
  50. {{ getToolTypeText(row.scanResult) }}
  51. </el-tag>
  52. </template>
  53. </el-table-column>
  54. <el-table-column prop="createTime" :label='$t("lineSide.table.toolManagement.createTime")' width="180px"></el-table-column>
  55. <el-table-column
  56. :label="$t('table.operation')"
  57. fixed="right"
  58. align="center"
  59. column-key="operation"
  60. width="140px"
  61. >
  62. <template slot-scope="{ row }">
  63. <el-tooltip class="item" :content='"换刀"' effect="dark" placement="top-start">
  64. <i
  65. class="el-icon-view table-operation"
  66. style="color: #2db7f5;"
  67. @click="edit(row)"
  68. />
  69. </el-tooltip>
  70. </template>
  71. </el-table-column>
  72. </el-table>
  73. <pagination
  74. v-show="tableData.total > 0"
  75. :limit.sync="queryParams.size"
  76. :page.sync="queryParams.current"
  77. :total="Number(tableData.total)"
  78. @pagination="fetch"
  79. />
  80. <tenant-edit
  81. ref="edit"
  82. :dialog-visible="dialog.isVisible"
  83. :title="dialog.title"
  84. :tool-category="toolCategory"
  85. :device-name="deviceName"
  86. :plan-id="planId"
  87. :device-id="deviceId"
  88. :task-id="id"
  89. :scan-result="scanResult"
  90. @close="editClose"
  91. @success="editSuccess"
  92. />
  93. <tenant-view
  94. ref="view"
  95. :dialog-visible="tenantViewVisible"
  96. @close="viewClose"
  97. />
  98. <el-dialog
  99. v-el-drag-dialog
  100. :close-on-click-modal="false"
  101. :close-on-press-escape="true"
  102. :title='$t("common.preview")'
  103. width="80%"
  104. top="50px"
  105. :visible.sync="preview.isVisible"
  106. >
  107. <el-scrollbar>
  108. <div v-html="preview.context" />
  109. </el-scrollbar>
  110. </el-dialog>
  111. </div>
  112. </template>
  113. <script>
  114. import Pagination from "@/components/Pagination"
  115. import TenantEdit from "./components/Edit"
  116. import TenantView from "./components/View"
  117. // 【货架管理】-API
  118. import toolManagementApi from "@/api/modelingCenter/toolManagement"
  119. import elDragDialog from '@/directive/el-drag-dialog'
  120. import {downloadFile, initEnums, initDicts, initQueryParams, initQueryParams0} from '@/utils/commons'
  121. // 加载工具类
  122. import { convertEnum, createTreeData } from '@/utils/utils'
  123. import axios from 'axios'
  124. export default {
  125. name: "GoodsShelvesMgr",
  126. directives: { elDragDialog },
  127. components: { Pagination, TenantEdit, TenantView },
  128. props: {
  129. },
  130. data () {
  131. return {
  132. audioStatus: [],
  133. dialog: {
  134. isVisible: false,
  135. title: ""
  136. },
  137. preview: {
  138. isVisible: false,
  139. context: ''
  140. },
  141. tenantViewVisible: false,
  142. tableKey: 0,
  143. queryParams: initQueryParams0({}),
  144. selection: [],
  145. loading: false,
  146. tableData: {
  147. total: 0
  148. },
  149. dicts: {
  150. NATION: {}
  151. },
  152. enums: {
  153. TenantTypeEnum: {},
  154. TenantStatusEnum: {}
  155. },
  156. toolCategory:[],
  157. deviceName:'',
  158. planId:'',
  159. deviceId:'',
  160. id:'',
  161. scanResult:'',
  162. }
  163. },
  164. // 实例已经在内存中创建好,此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法,最早只能在created中操作
  165. created() {
  166. // 调用常量-审核状态
  167. this.audioStatus = this.$constWKS.TOOLTASKLSIT
  168. // 加载【字典】
  169. initDicts(['NATION'], this.dicts);
  170. // 加载列表数据
  171. this.fetch()
  172. },
  173. computed: {
  174. /* 转树形数据 */
  175. optionData() {
  176. if(this.tableData.records){
  177. let cloneData = JSON.parse(JSON.stringify(this.tableData.records)) // 对源数据深度克隆
  178. if(cloneData){
  179. return createTreeData(cloneData)
  180. }
  181. }
  182. },
  183. currentUser () {
  184. return this.$store.state.account.user
  185. },
  186. nationList() {
  187. return convertEnum(this.dicts.NATION)
  188. }
  189. },
  190. mounted () {
  191. },
  192. methods: {
  193. // 【启用/冻结】按钮-事件
  194. updateActiveStatus(status){
  195. if (!this.selection.length) {
  196. this.$message({
  197. message: this.$t("tips.noDataSelected"),
  198. type: "warning"
  199. })
  200. return
  201. }
  202. if (this.selection.length > 1) {
  203. this.$message({
  204. message: this.$t("tips.mustOne"),
  205. type: "warning"
  206. })
  207. return
  208. }
  209. // 传值
  210. let obj = {};
  211. obj = this.selection[0];
  212. obj.status = status;
  213. // 调用接口后的提示信息
  214. let msg = this.$t("tips.frozen")
  215. if(status == "1"){
  216. msg = this.$t("tips.enable")
  217. }
  218. toolManagementApi.update(obj).then(response => {
  219. if (response.status == 200) {
  220. this.$message({
  221. message: msg,
  222. type: "success"
  223. })
  224. // 重新查询列表数据
  225. this.search()
  226. }
  227. })
  228. },
  229. // 【冻结】-Table的Row操作事件
  230. dongJieRow(row) {
  231. // 传值
  232. let obj = {};
  233. obj = row;
  234. obj.status = "0";
  235. toolManagementApi.update(obj).then(response => {
  236. if (response.status == 200) {
  237. this.$message({
  238. message: this.$t("tips.frozen"),
  239. type: "success"
  240. })
  241. // 重新查询列表数据
  242. this.search()
  243. }
  244. })
  245. },
  246. viewClose () {
  247. this.tenantViewVisible = false
  248. },
  249. editClose () {
  250. this.dialog.isVisible = false
  251. },
  252. editSuccess () {
  253. this.search()
  254. },
  255. onSelectChange (selection) {
  256. this.selection = selection
  257. },
  258. search () {
  259. this.fetch({
  260. ...this.queryParams
  261. })
  262. },
  263. reset () {
  264. this.queryParams = initQueryParams({})
  265. this.$refs.table.clearSort()
  266. this.$refs.table.clearFilter()
  267. this.search()
  268. },
  269. add () {
  270. this.$refs.edit.type = "add"
  271. this.$refs.edit.setTenant(false, this.dicts)
  272. // 【上级货架】数据设置
  273. this.$refs.edit.list = this.tableData.records
  274. this.dialog.title = this.$t("common.add")
  275. this.dialog.isVisible = false
  276. },
  277. singleDelete (row) {
  278. this.$refs.table.clearSelection()
  279. this.$refs.table.toggleRowSelection(row, true)
  280. this.batchDelete()
  281. },
  282. batchDelete () {
  283. if (!this.selection.length) {
  284. this.$message({
  285. message: this.$t("tips.noDataSelected"),
  286. type: "warning"
  287. })
  288. return
  289. }
  290. const readonlyIndex = this.selection.findIndex(item => item.readonly)
  291. if (readonlyIndex > -1) {
  292. this.$message({
  293. message: this.$t("tips.systemData"),
  294. type: "warning"
  295. })
  296. return
  297. }
  298. this.$confirm(this.$t("lineSide.tips.shelvsTips"), this.$t("common.tips"), {
  299. distinguishCancelAndClose: true,
  300. confirmButtonText: this.$t("common.confirm"),
  301. cancelButtonText: this.$t("common.cancel"),
  302. type: "warning"
  303. }).then(() => {
  304. const ids = []
  305. let contain = false
  306. this.selection.forEach(item => {
  307. if (item.readonly) {
  308. contain = true
  309. return
  310. }
  311. ids.push(item.id)
  312. })
  313. if (contain) {
  314. this.$message({
  315. message: this.$t("tips.systemData"),
  316. type: "warning"
  317. })
  318. } else {
  319. this.delete(ids)
  320. }
  321. }).catch(() => {})
  322. },
  323. clearSelections () {
  324. this.$refs.table.clearSelection()
  325. },
  326. delete (ids) {
  327. toolManagementApi.remove({ ids: ids }).then(response => {
  328. const res = response.data
  329. if (res.isSuccess) {
  330. this.$message({
  331. message: this.$t("tips.deleteSuccess"),
  332. type: "success"
  333. })
  334. this.search()
  335. // 清理已经删除的数据
  336. this.$refs.table.clearSelection()
  337. }
  338. })
  339. },
  340. view (row) {
  341. this.$refs.view.setTenant(row)
  342. this.tenantViewVisible = true
  343. },
  344. // 【修改】表头上Btn-事件
  345. editOne() {
  346. if (!this.selection.length) {
  347. this.$message({
  348. message: this.$t("tips.unSelected"),
  349. type: "warning"
  350. })
  351. return
  352. }
  353. if (this.selection.length > 1) {
  354. this.$message({
  355. message: this.$t("tips.mustOne"),
  356. type: "warning"
  357. })
  358. return
  359. }
  360. this.edit(this.selection[0]);
  361. },
  362. edit (row) {
  363. if (row.status === '1' || row.status === '0'){
  364. this.toolCategory = row.taskNodeToolList
  365. this.deviceName = row.deviceName
  366. this.planId = row.planId
  367. this.deviceId = row.deviceId
  368. this.id = row.id
  369. this.scanResult = row.scanResult
  370. console.log("this.id:"+this.id)
  371. this.dialog.isVisible = true
  372. this.$refs.edit.fetch()
  373. }
  374. },
  375. fetch (params = {}) {
  376. this.loading = true
  377. if (this.queryParams.timeRange) {
  378. this.queryParams.map.createTime_st = this.queryParams.timeRange[0]
  379. this.queryParams.map.createTime_ed = this.queryParams.timeRange[1]
  380. }
  381. this.queryParams.current = params.current ? params.current : this.queryParams.current
  382. this.queryParams.size = params.size ? params.size : this.queryParams.size
  383. toolManagementApi.toolTaskPage(this.queryParams).then(response => {
  384. const res = response.data
  385. console.log(res)
  386. if (res.isSuccess) {
  387. this.tableData = res.data
  388. }
  389. // eslint-disable-next-line no-return-assign
  390. }).finally(() => this.loading = false)
  391. },
  392. cellClick (row, column) {
  393. if (column['columnKey'] === "operation") {
  394. return
  395. }
  396. let flag = false
  397. this.selection.forEach((item) => {
  398. if (item.id === row.id) {
  399. flag = true
  400. this.$refs.table.toggleRowSelection(row)
  401. }
  402. })
  403. if (!flag) {
  404. this.$refs.table.toggleRowSelection(row, true)
  405. }
  406. },
  407. getTagType(toolType) {
  408. switch (toolType) {
  409. case '0':
  410. return 'info'; // 第一种类型的标签颜色
  411. case '1':
  412. return 'warning'; // 第二种类型的标签颜色
  413. case '2':
  414. return 'success'; // 第三种类型的标签颜色
  415. }
  416. },
  417. getToolTypeText(toolType) {
  418. switch (toolType) {
  419. case '0':
  420. return "未扫描"; // 第二种类型的文本
  421. case '1':
  422. return '部分扫描'; // 第三种类型的文本
  423. case '2':
  424. return '全部扫描'; // 第四种类型的文本
  425. default:
  426. return "未扫描"
  427. }
  428. }
  429. }
  430. }
  431. </script>
  432. <style lang="scss" scoped></style>