index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492
  1. <template>
  2. <div class="mainContentBox">
  3. <avue-crud
  4. ref="crudRef"
  5. v-model:search="search"
  6. v-model="form"
  7. :data="data"
  8. :option="option"
  9. v-model:page="page"
  10. @row-save="createRow"
  11. @row-update="updateRow"
  12. @row-del="deleteRow"
  13. @search-change="searchChange"
  14. @search-reset="resetChange"
  15. @size-change="dataList"
  16. @current-change="dataList"
  17. @selection-change="selectionChange"
  18. >
  19. <!-- <template #collect="scope">
  20. <el-switch
  21. active-value="1"
  22. inactive-value="0"
  23. inline-prompt
  24. active-text="是"
  25. inactive-text="否"
  26. v-model="scope.row.collect"
  27. @click="changeItem($event,scope.row)"
  28. class="ml-2"
  29. style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #ff4949"
  30. />
  31. </template>-->
  32. <template #menu="{size,row,index}">
  33. <el-button
  34. v-hasPerm="[buttonPermission.DEVICE.BTNS.maintenance_edit]"
  35. type="primary"
  36. link
  37. size="small"
  38. @click="showParamsPage(row)"
  39. ><i-ep-edit />模型
  40. </el-button>
  41. </template>
  42. <template #menu-left="{ size }">
  43. <el-button
  44. :disabled="toDeleteIds.length < 1"
  45. type="danger"
  46. icon="el-icon-delete"
  47. :size="size"
  48. @click="multipleDelete"
  49. >删除</el-button
  50. >
  51. </template>
  52. <template #menu-right="{}">
  53. <el-dropdown split-button
  54. >导入
  55. <template #dropdown>
  56. <el-dropdown-menu>
  57. <el-dropdown-item
  58. @click="downloadTemplate('/api/v1/device/template')"
  59. >
  60. <i-ep-download />下载模板
  61. </el-dropdown-item>
  62. <el-dropdown-item @click="importExcelData">
  63. <i-ep-top />导入数据
  64. </el-dropdown-item>
  65. </el-dropdown-menu>
  66. </template>
  67. </el-dropdown>
  68. <el-button
  69. class="ml-3"
  70. @click="exportData('/api/v1/device/export')"
  71. >
  72. <template #icon> <i-ep-download /> </template>导出
  73. </el-button>
  74. </template>
  75. </avue-crud>
  76. <el-dialog
  77. v-model="dialog.visible"
  78. :title="dialog.title"
  79. width="30%"
  80. @close="dialog.visible = false"
  81. >
  82. <el-button type="primary" @click="addItem" icon="el-icon-plus" style="margin-left:15px;width:25px;height:25px;" circle />
  83. <el-table
  84. v-loading="loading"
  85. ref="ruleListRef"
  86. :data="pageData"
  87. style="height: 280px"
  88. >
  89. <el-table-column
  90. label="参数"
  91. prop="fieldCode"
  92. >
  93. <template v-slot="{ row}">
  94. <el-input v-model="row.fieldCode"/>
  95. </template>
  96. </el-table-column>
  97. <el-table-column
  98. label="参数名称"
  99. prop="fieldLabel"
  100. >
  101. <template v-slot="{ row}">
  102. <el-input v-model="row.fieldLabel"/>
  103. </template>
  104. </el-table-column>
  105. <el-table-column
  106. label="参数值"
  107. prop="fieldValue"
  108. >
  109. <template v-slot="{ row}">
  110. <el-input v-model="row.fieldValue"/>
  111. </template>
  112. </el-table-column>
  113. <el-table-column
  114. label="操作"
  115. align="center"
  116. >
  117. <template v-slot="{ row}">
  118. <el-button type="danger" @click="minusItem(row)" icon="el-icon-minus" style="margin-left:15px;width:25px;height:25px;" circle />
  119. </template>
  120. </el-table-column>
  121. </el-table>
  122. <div class="dialog-footer" style="margin-top:20px" align="center">
  123. <el-button type="primary" v-if="pageData.length>0" @click="handleSubmit">保 存</el-button>
  124. <el-button @click="dialog.visible = false">取消</el-button>
  125. </div>
  126. </el-dialog>
  127. <ExcelUpload ref="uploadRef" @finished="uploadFinished" />
  128. </div>
  129. </template>
  130. <script setup>
  131. import { ref, getCurrentInstance } from "vue";
  132. import { useCrud } from "@/hooks/userCrud";
  133. import buttonPermission from "@/common/configs/buttonPermission";
  134. import {configSave,configList,deviceUpdateCollect} from "@/api/device";
  135. import { useCommonStoreHook } from "@/store";
  136. import dictDataUtil from "@/common/configs/dictDataUtil";
  137. const { isShowTable, tableType } = toRefs(useCommonStoreHook());
  138. const test = () => {
  139. isShowTable.value = true;
  140. tableType.value = tableType.value == 1 ? 2 : 1;
  141. };
  142. const pageData = ref([]);
  143. const loading = ref(false); // 加载状态
  144. const addItem = () =>{
  145. pageData.value.push({deviceType: clickRow.value.deviceType,deviceNo: clickRow.value.deviceNo,type: 1})
  146. }
  147. const minusItem = (row) =>{
  148. pageData.value = pageData.value.filter(item=>item.fieldCode !== row.fieldCode)
  149. }
  150. const changeItem =(obj,row) => {
  151. deviceUpdateCollect({id: row.id,collect: row.collect,deviceNo: row.deviceNo}).then((data)=>{
  152. if(data.code === '200'){
  153. ElMessage.success(data.msg);
  154. }else{
  155. ElMessage.error(data.msg);
  156. }
  157. })
  158. }
  159. const clickRow = ref(null)
  160. const showParamsPage = (row)=>{
  161. clickRow.value = row
  162. configList({deviceNo: row.deviceNo}).then((data)=>{
  163. pageData.value = data.data
  164. dialog.visible = true
  165. })
  166. }
  167. const dialog = reactive({
  168. title: "模型设置",
  169. visible: false,
  170. });
  171. const handleSubmit = () => {
  172. //判断参数
  173. let errorData = pageData.value.filter(item=>!item.fieldCode)
  174. if(errorData.length > 0){
  175. ElMessage.warning("请填写参数");
  176. return
  177. }
  178. errorData = pageData.value.filter(item=>!item.fieldLabel)
  179. if(errorData.length > 0){
  180. ElMessage.warning("请填写参数名");
  181. return
  182. }
  183. errorData = pageData.value.filter(item=>!item.fieldValue)
  184. if(errorData.length > 0){
  185. ElMessage.warning("请填写参数值");
  186. return
  187. }
  188. configSave(pageData.value).then((data)=>{
  189. if(data.code === '200'){
  190. ElMessage.success(data.msg);
  191. }else{
  192. ElMessage.error(data.msg);
  193. }
  194. })
  195. };
  196. // 传入一个url,后面不带/
  197. const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  198. useCrud({
  199. src: "/api/v1/device",
  200. });
  201. const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } = Methords; //增删改查
  202. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  203. const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  204. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  205. // 设置表格列或者其他自定义的option
  206. option.value = Object.assign(option.value, {
  207. delBtn: false,
  208. selection: true,
  209. labelWidth: 120,
  210. column: [
  211. {
  212. label: "资产编号",
  213. prop: "deviceNo",
  214. search: true,
  215. editDisabled: true,
  216. width: 160,
  217. overHidden: true,
  218. rules: [
  219. {
  220. required: true,
  221. message: "资产编号不能为空",
  222. trigger: "trigger",
  223. },
  224. ],
  225. },
  226. {
  227. label: "设备名称",
  228. prop: "deviceName",
  229. search: true,
  230. width: 160,
  231. overHidden: true,
  232. rules: [
  233. {
  234. required: true,
  235. message: "设备名称不能为空",
  236. trigger: "trigger",
  237. },
  238. ],
  239. },
  240. {
  241. label: "型号",
  242. prop: "specifications",
  243. width: 160,
  244. overHidden: true,
  245. rules: [
  246. {
  247. required: true,
  248. message: "型号不能为空",
  249. trigger: "trigger",
  250. },
  251. ],
  252. },
  253. {
  254. label: "制造厂",
  255. width: 100,
  256. overHidden: true,
  257. prop: "brand",
  258. },
  259. {
  260. label: "购买方",
  261. prop: "manufacturer",
  262. width: 100,
  263. overHidden: true,
  264. },
  265. {
  266. label: "出厂编号",
  267. prop: "serialNumber",
  268. width: 100,
  269. overHidden: true,
  270. },
  271. {
  272. label: "出厂日期",
  273. prop: "serialDate",
  274. type: "date",
  275. width: 100,
  276. format: 'YYYY-MM-DD',
  277. valueFormat: 'YYYY-MM-DD',
  278. overHidden: true,
  279. },
  280. {
  281. label: "启用日期",
  282. prop: "activationDate",
  283. type: "date",
  284. width: 100,
  285. format: 'YYYY-MM-DD',
  286. valueFormat: 'YYYY-MM-DD',
  287. overHidden: true,
  288. },
  289. {
  290. label: "原值",
  291. prop: "originalValue",
  292. width: 100,
  293. overHidden: true,
  294. },
  295. {
  296. label: "所属部门",
  297. prop: "deptId",
  298. width: 100,
  299. overHidden: true,
  300. type: "tree",
  301. dicUrl: dictDataUtil.dept_tree_url,
  302. props: {
  303. label: "deptName",
  304. value: "id",
  305. },
  306. rules: [
  307. {
  308. required: true,
  309. message: "所属部门不能为空",
  310. trigger: "trigger",
  311. },
  312. ],
  313. },
  314. {
  315. label: "存放位置",
  316. prop: "devicePosition",
  317. width: 100,
  318. overHidden: true,
  319. rules: [
  320. {
  321. required: true,
  322. message: "存放位置不能为空",
  323. trigger: "trigger",
  324. },
  325. ],
  326. },
  327. {
  328. label: "状态",
  329. prop: "state",
  330. type: "select",
  331. width: 120,
  332. overHidden: true,
  333. search: true,
  334. dicUrl:
  335. dictDataUtil.request_url +
  336. dictDataUtil.TYPE_CODE.device_status,
  337. props: {
  338. label: "dictLabel",
  339. value: "dictValue",
  340. },
  341. rules: [
  342. {
  343. required: true,
  344. message: "状态不能为空",
  345. trigger: "trigger",
  346. },
  347. ],
  348. },
  349. {
  350. label: "责任人",
  351. prop: "head",
  352. width: 120,
  353. overHidden: true,
  354. rules: [
  355. {
  356. required: true,
  357. message: "责任人不能为空",
  358. trigger: "trigger",
  359. },
  360. ],
  361. },
  362. {
  363. label: "备注",
  364. span: 24,
  365. overHidden: true,
  366. prop: "remark",
  367. width: 120,
  368. type: "textarea",
  369. },
  370. {
  371. label: "设备类型",
  372. prop: "deviceType",
  373. type: "select",
  374. width: 130,
  375. overHidden: true,
  376. search: true,
  377. dicUrl:
  378. dictDataUtil.request_url +
  379. dictDataUtil.TYPE_CODE.device_type,
  380. props: {
  381. label: "dictLabel",
  382. value: "dictValue",
  383. },
  384. rules: [
  385. {
  386. required: true,
  387. message: "设备类型不能为空",
  388. trigger: "trigger",
  389. },
  390. ],
  391. },
  392. {
  393. label: "在线状态",
  394. prop: "onlineState",
  395. width: 100,
  396. display: false,
  397. html: true,
  398. formatter: (val) => {
  399. if (val.onlineState === "1") {
  400. return '<b class="el-tag el-tag--success el-tag--light">在线</b>';
  401. } else {
  402. return '<b class="el-tag el-tag--warning el-tag--light">离线</b>';
  403. }
  404. },
  405. },
  406. {
  407. label: "连接状态",
  408. prop: "collectState",
  409. width: 100,
  410. display: false,
  411. html: true,
  412. formatter: (val) => {
  413. if (val.onlineState === "1") {
  414. return '<b class="el-tag el-tag--success el-tag--light">已连接</b>';
  415. } else {
  416. return '<b class="el-tag el-tag--warning el-tag--light">未连接</b>';
  417. }
  418. },
  419. },
  420. {
  421. label: "计量有效期",
  422. prop: "meteringDate",
  423. type: "date",
  424. width: 160,
  425. format: 'YYYY-MM-DD',
  426. valueFormat: 'YYYY-MM-DD',
  427. overHidden: true,
  428. rules: [
  429. {
  430. required: true,
  431. message: "计量有效期不能为空",
  432. trigger: "trigger",
  433. },
  434. ],
  435. },
  436. /* {
  437. label: "所属PAC",
  438. prop: "terminal",
  439. type: "select",
  440. width: 120,
  441. overHidden: true,
  442. search: true,
  443. dicUrl:import.meta.env.VITE_APP_BASE_API + "/api/v1/device/pacList",
  444. props: {
  445. label: "deviceName",
  446. value: "deviceNo",
  447. },
  448. },*/
  449. /*{
  450. label: "是否采集",
  451. prop: "collect",
  452. editDisplay: false,
  453. addDisplay: false,
  454. slot: true,
  455. width: 100,
  456. },*/
  457. /*{
  458. label: "所在车间",
  459. prop: "workshop",
  460. width: 160,
  461. overHidden: true,
  462. },
  463. {
  464. label: "所在工位",
  465. prop: "station",
  466. width: 160,
  467. overHidden: true,
  468. },*/
  469. ],
  470. });
  471. onMounted(() => {
  472. // console.log("crudRef", crudRef)
  473. dataList();
  474. });
  475. /**
  476. * 上传excel相关
  477. */
  478. const uploadRef = ref(null);
  479. const uploadFinished = () => {
  480. // 上传完成后的刷新操作
  481. page.currentPage = 1;
  482. dataList();
  483. };
  484. const importExcelData = () => {
  485. if (uploadRef.value) {
  486. uploadRef.value.show("/api/v1/device/import");
  487. }
  488. };
  489. </script>