equipment.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434
  1. <template>
  2. <div class="app-container">
  3. <el-form
  4. :model="queryForm"
  5. ref="queryForm"
  6. :inline="true"
  7. label-width="88px"
  8. >
  9. <el-form-item label="设备类型" prop="deviceType">
  10. <el-select
  11. v-model="queryForm.deviceType"
  12. clearable
  13. placeholder="请选择"
  14. >
  15. <el-option
  16. v-for="dict in deviceTypeOptions"
  17. :key="dict.dictValue"
  18. :label="dict.dictLabel"
  19. :value="dict.dictValue"
  20. ></el-option>
  21. </el-select>
  22. </el-form-item>
  23. <el-form-item label="设备序列号" prop="deviceSerialNum">
  24. <el-input
  25. v-model="queryForm.deviceSerialNum"
  26. placeholder="请输入设备序列号"
  27. clearable
  28. size="small"
  29. @keyup.enter.native="handleQuery"
  30. />
  31. </el-form-item>
  32. <el-form-item>
  33. <el-button
  34. type="cyan"
  35. icon="el-icon-search"
  36. size="mini"
  37. @click="handleQuery"
  38. >搜索</el-button
  39. >
  40. <el-button
  41. type="info"
  42. icon="el-icon-refresh"
  43. size="mini"
  44. @click="resetQuery"
  45. >重置</el-button
  46. >
  47. <el-button
  48. type="primary"
  49. icon="el-icon-plus"
  50. size="mini"
  51. @click="handleAdd"
  52. >新增</el-button
  53. >
  54. </el-form-item>
  55. </el-form>
  56. <el-table :data="equipmentList">
  57. <el-table-column
  58. label="主键自增id"
  59. v-if="false"
  60. align="center"
  61. prop="deviceId"
  62. />
  63. <el-table-column
  64. label="油站名称"
  65. align="center"
  66. prop="stationName"
  67. v-if="jiBie === 3"
  68. />
  69. <el-table-column
  70. label="设备编号"
  71. align="center"
  72. prop="deviceNo"
  73. />
  74. <el-table-column
  75. label="设备序列号"
  76. align="center"
  77. prop="deviceSerialNum"
  78. />
  79. <el-table-column label="设备厂家" align="center" prop="deviceFactory" />
  80. <el-table-column label="绑定油枪号" align="center" prop="gunNo" />
  81. <el-table-column
  82. label="启动状态"
  83. align="center"
  84. prop="deviceStatus"
  85. >
  86. <template slot-scope="scope">
  87. {{scope.row.deviceStatus == "1" ? "开启":"关闭"}}
  88. </template>
  89. </el-table-column>
  90. <el-table-column
  91. label="操作"
  92. align="center"
  93. class-name="small-padding fixed-width"
  94. >
  95. <template slot-scope="scope">
  96. <el-button
  97. size="mini"
  98. type="text"
  99. icon="el-icon-edit"
  100. @click="handleUpdate(scope.row)"
  101. >修改</el-button
  102. >
  103. <el-button
  104. size="mini"
  105. type="text"
  106. icon="el-icon-delete"
  107. @click="handleDelete(scope.row)"
  108. >删除</el-button
  109. >
  110. </template>
  111. </el-table-column>
  112. </el-table>
  113. <pagination
  114. :hidden="total > 0 ? false : true"
  115. :total="total"
  116. :page.sync="queryForm.pageNum"
  117. :limit.sync="queryForm.pageSize"
  118. @pagination="getList"
  119. :autoScroll="true"
  120. />
  121. <!-- 添加或修改油站设备管理对话框 -->
  122. <el-dialog
  123. :title="title"
  124. :visible.sync="open"
  125. width="500px"
  126. append-to-body
  127. status-icon
  128. >
  129. <el-form
  130. ref="dialogForm"
  131. :model="dialogForm"
  132. :rules="rules"
  133. label-width="100px"
  134. >
  135. <el-form-item label="设备编号" prop="deviceNo">
  136. <el-input
  137. v-model="dialogForm.deviceNo"
  138. placeholder="请输入设备编号"
  139. />
  140. </el-form-item>
  141. <el-form-item label="设备名称" prop="deviceName">
  142. <el-input
  143. v-model="dialogForm.deviceName"
  144. placeholder="请输入设备名称"
  145. />
  146. </el-form-item>
  147. <el-form-item label="设备序列号" prop="deviceSerialNum">
  148. <el-input
  149. v-model="dialogForm.deviceSerialNum"
  150. placeholder="请输入设备序列号"
  151. />
  152. </el-form-item>
  153. <el-form-item label="设备类型" prop="deviceType">
  154. <el-select
  155. v-model="dialogForm.deviceType"
  156. placeholder="请选择设备类型"
  157. clearable
  158. size="small"
  159. >
  160. <el-option
  161. v-for="dict in deviceTypeOptions"
  162. :key="dict.dictValue"
  163. :label="dict.dictLabel"
  164. :value="dict.dictValue"
  165. ></el-option>
  166. </el-select>
  167. </el-form-item>
  168. <el-form-item label="绑定油枪号" prop="checkedGunList" required>
  169. <template v-if="allGunList.length === 0">
  170. 请先在油枪管理里配置油枪
  171. </template>
  172. <template v-else>
  173. <el-checkbox-group v-model="dialogForm.checkedGunList">
  174. <el-checkbox
  175. v-for="item in allGunList"
  176. :key="item.oilGunId"
  177. :label="item.oilGunNo"
  178. :value="item.oilGunNo"
  179. >
  180. {{ item.oilGunNo + "号枪/" + item.oilName }}
  181. </el-checkbox>
  182. </el-checkbox-group>
  183. </template>
  184. </el-form-item>
  185. <el-form-item label="设备状态" prop="deviceStatus">
  186. <el-select
  187. v-model="dialogForm.deviceStatus"
  188. clearable
  189. size="small"
  190. placeholder="请选择"
  191. >
  192. <el-option
  193. v-for="dict in deviceStatusOptions"
  194. :key="dict.dictValue"
  195. :label="dict.dictLabel"
  196. :value="dict.dictValue"
  197. ></el-option>
  198. </el-select>
  199. </el-form-item>
  200. <el-form-item label="设备厂家" prop="deviceFactory">
  201. <el-input
  202. v-model="dialogForm.deviceFactory"
  203. placeholder="请输入设备厂家"
  204. />
  205. </el-form-item>
  206. </el-form>
  207. <div slot="footer" class="dialog-footer">
  208. <el-button type="primary" @click="submitForm">确 定</el-button>
  209. <el-button @click="cancel">取 消</el-button>
  210. </div>
  211. </el-dialog>
  212. </div>
  213. </template>
  214. <script>
  215. import {
  216. listManage,
  217. getManage,
  218. delManage,
  219. addManage,
  220. updateManage,
  221. exportManage,
  222. changeManageStatus,
  223. } from "@/api/station/manage";
  224. import { listGun } from "@/api/station/gun";
  225. export default {
  226. name: "equipment",
  227. data() {
  228. let validateGunNo = (rule, value, callback) => {
  229. if (this.allGunList.length === 0) {
  230. callback(new Error("请先配置油枪后再来配置设备"));
  231. }
  232. if (this.dialogForm.checkedGunList.length === 0) {
  233. callback(new Error("请勾选要绑定的油枪"));
  234. }
  235. callback();
  236. };
  237. return {
  238. // 油站设备管理表格数据
  239. equipmentList: [],
  240. // 油枪复选
  241. allGunList: [],
  242. // 已选的油枪
  243. checkedGunList: [],
  244. //设备状态
  245. deviceStatusOptions: [],
  246. //设备类型
  247. deviceTypeOptions: [],
  248. stationOptions: [],
  249. // 弹出层标题
  250. title: "",
  251. // 是否显示弹出层
  252. open: false,
  253. // 总条数
  254. total: 100,
  255. // 查询参数
  256. queryForm: {
  257. pageNum: 1,
  258. pageSize: 10, // 初始值只能比10大
  259. deviceNo: null,
  260. stationId: this.deptId,
  261. deviceType: null, // 设备类型 数据字典里取
  262. deviceSerialNum: null, // 设备序列号
  263. },
  264. // 弹窗表单参数
  265. dialogForm: {
  266. checkedGunList:[2]
  267. },
  268. // 表单校验
  269. rules: {
  270. deviceNo: [
  271. { required: true, message: "请输入设备编号", trigger: "blur" },
  272. ],
  273. deviceName: [
  274. { required: true, message: "请输入设备名", trigger: "blur" },
  275. ],
  276. deviceSerialNum: [
  277. { required: true, message: "请输入设备序列号", trigger: "blur" },
  278. ],
  279. deviceType: [
  280. { required: true, message: "请选择设备类型", trigger: "blur" },
  281. ],
  282. checkedGunList: [
  283. { validator: validateGunNo, trigger: 'change' }
  284. ],
  285. deviceStatus: [
  286. { required: true, message: "请选择设备状态", trigger: "blur" },
  287. ],
  288. deviceFactory: [
  289. // { required: true, message: '请输入设备厂家', trigger: 'blur' }
  290. ],
  291. },
  292. };
  293. },
  294. created() {
  295. this.getList();
  296. this.init();
  297. },
  298. methods: {
  299. init() {
  300. //字典设备状态
  301. this.getDicts("device_status").then((response) => {
  302. this.deviceStatusOptions = response.data;
  303. });
  304. //字典设备类型
  305. this.getDicts("device_type").then((response) => {
  306. this.deviceTypeOptions = response.data;
  307. });
  308. },
  309. /** 查询油站设备管理列表 首页表单 */
  310. getList() {
  311. listManage(this.queryForm).then((response) => {
  312. this.equipmentList = response.rows;
  313. this.total = response.total;
  314. });
  315. },
  316. // 取消按钮
  317. cancel() {
  318. this.open = false;
  319. this.reset();
  320. },
  321. // 表单重置
  322. reset() {
  323. this.dialogForm = {};
  324. },
  325. /** 搜索按钮操作 */
  326. handleQuery() {
  327. this.queryForm.pageNum = 1;
  328. this.getList();
  329. },
  330. /** 重置按钮操作 */
  331. resetQuery() {
  332. this.resetForm("queryForm");
  333. this.handleQuery();
  334. },
  335. /** 新增按钮操作 */
  336. handleAdd() {
  337. if (this.jiBie === 2) {
  338. this.title = "添加油站设备管理";
  339. this.open = true;
  340. listGun({
  341. stationId: this.deptId,
  342. }).then((response) => {
  343. this.allGunList = response.rows;
  344. });
  345. } else {
  346. this.msgSuccess("请登录对应的账号");
  347. }
  348. },
  349. /** 修改按钮操作 */
  350. handleUpdate(row) {
  351. let checkedGunList
  352. if (
  353. Object.prototype.toString.call(row.gunNo) ===
  354. "[object String]"
  355. ) {
  356. checkedGunList = [...new Set(row.gunNo.split(","))].filter((ele) => {
  357. return ele.toString().trim() !== "";
  358. });
  359. }else{
  360. checkedGunList = []
  361. }
  362. this.dialogForm={...row, checkedGunList}
  363. listGun({
  364. stationId: this.deptId,
  365. }).then((response) => {
  366. this.allGunList = response.rows;
  367. });
  368. this.title = "修改油站设备管理";
  369. this.open = true;
  370. },
  371. /** 提交按钮 */
  372. submitForm() {
  373. this.$refs["dialogForm"].validate((valid) => {
  374. if (valid) {
  375. this.dialogForm.gunNo = this.dialogForm.checkedGunList.toString()
  376. if (this.dialogForm.deviceId != null) {
  377. updateManage(this.dialogForm).then((response) => {
  378. this.msgSuccess("修改成功");
  379. this.open = false;
  380. this.getList();
  381. });
  382. } else {
  383. addManage(this.dialogForm).then((response) => {
  384. this.msgSuccess("新增成功");
  385. this.open = false;
  386. this.getList();
  387. });
  388. }
  389. }
  390. });
  391. },
  392. /** 删除按钮操作 */
  393. handleDelete(row) {
  394. const deviceIds = row.deviceId;
  395. this.$confirm("是否确认删除油站设备管理", "警告", {
  396. confirmButtonText: "确定",
  397. cancelButtonText: "取消",
  398. type: "warning",
  399. })
  400. .then(function () {
  401. return delManage(deviceIds);
  402. })
  403. .then(() => {
  404. this.getList();
  405. this.msgSuccess("删除成功");
  406. });
  407. },
  408. /** 导出按钮操作 */
  409. // handleExport() {
  410. // const queryForm = this.queryForm;
  411. // this.$confirm("是否确认导出所有油站设备管理数据项?", "警告", {
  412. // confirmButtonText: "确定",
  413. // cancelButtonText: "取消",
  414. // type: "warning",
  415. // })
  416. // .then(function () {
  417. // return exportManage(queryForm);
  418. // })
  419. // .then((response) => {
  420. // this.download(response.msg);
  421. // });
  422. // },
  423. },
  424. };
  425. </script>