index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="88px">
  4. <el-form-item label="设备类型" prop="deviceType">
  5. <el-select v-model="queryParams.deviceType" multiple placeholder="请选择">
  6. <el-option
  7. v-for="dict in deviceTypeOptions"
  8. :key="dict.dictValue"
  9. :label="dict.dictLabel"
  10. :value="dict.dictValue"
  11. ></el-option>
  12. </el-select>
  13. </el-form-item>
  14. <el-form-item label="设备序列号" prop="deviceSerialNum">
  15. <el-input
  16. v-model="queryParams.deviceSerialNum"
  17. placeholder="请输入设备序列号"
  18. clearable
  19. size="small"
  20. @keyup.enter.native="handleQuery"
  21. />
  22. </el-form-item>
  23. <el-form-item>
  24. <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  25. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  26. <el-button icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
  27. </el-form-item>
  28. </el-form>
  29. <el-table v-loading="loading" :data="manageList" @selection-change="handleSelectionChange">
  30. <el-table-column label="主键自增id" v-if="false" align="center" prop="deviceId" />
  31. <el-table-column label="油站名称" align="center" prop="stationName" />
  32. <el-table-column label="设备序列号" align="center" prop="deviceSerialNum" />
  33. <el-table-column label="设备厂家" align="center" prop="deviceFactory" />
  34. <el-table-column label="油站名称id" v-if="false" align="center" prop="stationId" />
  35. <el-table-column label="绑定油枪号" align="center" prop="gunNo" />
  36. <el-table-column label="设备状态" align="center">
  37. <template slot-scope="scope">
  38. <el-switch
  39. v-model="scope.row.deviceStatus"
  40. active-value="1"
  41. inactive-value="2"
  42. @change="handleStatusUpdate(scope.row)"
  43. ></el-switch>
  44. </template>
  45. </el-table-column>
  46. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  47. <template slot-scope="scope">
  48. <el-button
  49. size="mini"
  50. type="text"
  51. icon="el-icon-edit"
  52. @click="handleUpdate(scope.row)"
  53. v-hasPermi="['station:manage:edit']"
  54. >修改</el-button>
  55. <el-button
  56. size="mini"
  57. type="text"
  58. icon="el-icon-delete"
  59. @click="handleDelete(scope.row)"
  60. v-hasPermi="['station:manage:remove']"
  61. >删除</el-button>
  62. </template>
  63. </el-table-column>
  64. </el-table>
  65. <pagination
  66. v-show="total>0"
  67. :total="total"
  68. :page.sync="queryParams.pageNum"
  69. :limit.sync="queryParams.pageSize"
  70. @pagination="getList"
  71. />
  72. <!-- 添加或修改油站设备管理对话框 -->
  73. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  74. <el-form ref="form" :model="form" :rules="rules" label-width="100px">
  75. <el-form-item label="设备编号" prop="deviceNo">
  76. <el-input v-model="form.deviceNo" placeholder="请输入设备编号" />
  77. </el-form-item>
  78. <el-form-item label="设备名称" prop="deviceName">
  79. <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
  80. </el-form-item>
  81. <el-form-item label="油站名称" prop="stationId" >
  82. <el-select
  83. v-model="form.stationId"
  84. placeholder="请选择油站"
  85. clearable
  86. size="small"
  87. @change="onInstitutionChang"
  88. >
  89. <el-option
  90. v-for="item in stationOptions"
  91. :key="item.stationId"
  92. :label="item.stationName"
  93. :value="item.stationId"
  94. ></el-option>
  95. </el-select>
  96. </el-form-item>
  97. <el-form-item label="油站名称" v-show="false" prop="stationName">
  98. <el-input v-model="form.stationName" placeholder="请输入油站名称" />
  99. </el-form-item>
  100. <el-form-item label="设备类型" >
  101. <el-select v-model="form.deviceType" placeholder="请选择" clearable size="small">
  102. <el-option
  103. v-for="dict in deviceTypeOptions"
  104. :key="dict.dictValue"
  105. :label="dict.dictLabel"
  106. :value="dict.dictValue"
  107. ></el-option>
  108. </el-select>
  109. </el-form-item>
  110. <el-form-item label="设备序列号" prop="deviceSerialNum">
  111. <el-input v-model="form.deviceSerialNum" placeholder="请输入设备序列号" />
  112. </el-form-item>
  113. <el-form-item label="绑定油枪号" prop="gunNo">
  114. <el-checkbox-group v-model="gunNoList">
  115. <el-checkbox
  116. v-for = "item in checkList"
  117. :key="item.oilGunId"
  118. :label="item.oilGunNo"
  119. :value="item.oilGunNo"
  120. >
  121. {{item.oilGunNo+"号枪/"+item.oilName}}
  122. </el-checkbox>
  123. </el-checkbox-group>
  124. </el-form-item>
  125. <el-form-item label="设备状态" >
  126. <el-select v-model="form.deviceStatus" clearable size="small" placeholder="请选择">
  127. <el-option
  128. v-for="dict in deviceStatusOptions"
  129. :key="dict.dictValue"
  130. :label="dict.dictLabel"
  131. :value="dict.dictValue"
  132. ></el-option>
  133. </el-select>
  134. </el-form-item>
  135. <el-form-item label="设备厂家" prop="deviceFactory">
  136. <el-input v-model="form.deviceFactory" placeholder="请输入设备厂家" />
  137. </el-form-item>
  138. </el-form>
  139. <div slot="footer" class="dialog-footer">
  140. <el-button type="primary" @click="submitForm">确 定</el-button>
  141. <el-button @click="cancel">取 消</el-button>
  142. </div>
  143. </el-dialog>
  144. </div>
  145. </template>
  146. <script>
  147. import { listManage, getManage, delManage, addManage, updateManage, exportManage,changeManageStatus } from "@/api/station/manage";
  148. import{stationinfo,selectGun} from "@/api/station/gun";
  149. export default {
  150. name: "Manage",
  151. data() {
  152. return {
  153. // 遮罩层
  154. loading: true,
  155. // 选中数组
  156. ids: [],
  157. // 非单个禁用
  158. single: true,
  159. // 非多个禁用
  160. multiple: true,
  161. // 显示搜索条件
  162. showSearch: true,
  163. // 总条数
  164. total: 0,
  165. // 油站设备管理表格数据
  166. manageList: [],
  167. //油枪复选
  168. checkList: [],
  169. gunNoList:[],
  170. //设备状态
  171. deviceStatusOptions:[],
  172. //设备类型
  173. deviceTypeOptions:[],
  174. stationOptions:[],
  175. // 弹出层标题
  176. title: "",
  177. // 是否显示弹出层
  178. open: false,
  179. // 查询参数
  180. queryParams: {
  181. pageNum: 1,
  182. pageSize: 10,
  183. deviceNo: null,
  184. deviceName: null,
  185. stationId: null,
  186. stationName: null,
  187. deviceType: null,
  188. deviceSerialNum: null,
  189. gunNo: null,
  190. deviceStatus: null,
  191. deviceFactory: null
  192. },
  193. // 表单参数
  194. form: {},
  195. // 表单校验
  196. rules: {
  197. }
  198. };
  199. },
  200. created() {
  201. this.getList();
  202. //字典设备状态
  203. this.getDicts("device_status").then(response => {
  204. this.deviceStatusOptions = response.data;
  205. });
  206. //字典设备类型
  207. this.getDicts("device_type").then(response => {
  208. this.deviceTypeOptions = response.data;
  209. });
  210. //获取油枪
  211. selectGun().then(response => {
  212. this.checkList = response.rows;
  213. });
  214. stationinfo().then(response => {
  215. this.stationOptions = response.rows;
  216. });
  217. },
  218. methods: {
  219. /** 查询油站设备管理列表 */
  220. getList() {
  221. this.loading = true;
  222. listManage(this.queryParams).then(response => {
  223. this.manageList = response.rows;
  224. this.total = response.total;
  225. this.loading = false;
  226. });
  227. },
  228. // 取消按钮
  229. cancel() {
  230. this.open = false;
  231. this.reset();
  232. },
  233. // 表单重置
  234. reset() {
  235. this.form = {
  236. deviceId: null,
  237. deviceNo: null,
  238. deviceName: null,
  239. stationId: null,
  240. stationName: null,
  241. deviceType: null,
  242. deviceSerialNum: null,
  243. gunNo: null,
  244. deviceStatus: "0",
  245. deviceFactory: null
  246. };
  247. this.resetForm("form");
  248. this.gunNoList.length=0;
  249. },
  250. deviceStatusFotmat(row, column){
  251. if(row.deviceStatus === '1'){
  252. return '在用'
  253. }else if(row.deviceStatus === '2'){
  254. return '停用'
  255. }
  256. },
  257. /** 搜索按钮操作 */
  258. handleQuery() {
  259. this.queryParams.pageNum = 1;
  260. this.getList();
  261. },
  262. /** 重置按钮操作 */
  263. resetQuery() {
  264. this.resetForm("queryForm");
  265. this.handleQuery();
  266. },
  267. // 多选框选中数据
  268. handleSelectionChange(selection) {
  269. this.ids = selection.map(item => item.deviceId)
  270. this.single = selection.length!==1
  271. this.multiple = !selection.length
  272. },
  273. /** 新增按钮操作 */
  274. handleAdd() {
  275. this.reset();
  276. this.open = true;
  277. this.title = "添加油站设备管理";
  278. },
  279. /** 修改按钮操作 */
  280. handleUpdate(row) {
  281. this.reset();
  282. const deviceId = row.deviceId || this.ids
  283. getManage(deviceId).then(response => {
  284. this.form = response.data;
  285. if(this.form.gunNo!=null &&this.form.gunNo!="" ){
  286. this.gunNoList=this.form.gunNo.split(",");
  287. }
  288. this.open = true;
  289. this.title = "修改油站设备管理";
  290. });
  291. },
  292. handleStatusUpdate(row){
  293. let text = row.deviceStatus === "1" ? "启用" : "停用";
  294. this.$confirm('确认要"' + text + '""' + row.deviceSerialNum + '"设备吗?', "警告", {
  295. confirmButtonText: "确定",
  296. cancelButtonText: "取消",
  297. type: "warning"
  298. }).then(function() {
  299. return changeManageStatus(row.deviceId, row.deviceStatus);
  300. }).then(() => {
  301. this.msgSuccess(text + "成功");
  302. this.handleQuery();
  303. });
  304. },
  305. /** 提交按钮 */
  306. submitForm() {
  307. this.$refs["form"].validate(valid => {
  308. if (valid) {
  309. if(this.gunNoList !=null && this.gunNoList.length>0){
  310. this.form.gunNo=this.gunNoList.toString();
  311. }
  312. if (this.form.deviceId != null) {
  313. updateManage(this.form).then(response => {
  314. this.msgSuccess("修改成功");
  315. this.open = false;
  316. this.getList();
  317. });
  318. } else {
  319. addManage(this.form).then(response => {
  320. this.msgSuccess("新增成功");
  321. this.open = false;
  322. this.getList();
  323. });
  324. }
  325. }
  326. });
  327. },
  328. /** 删除按钮操作 */
  329. handleDelete(row) {
  330. const deviceIds = row.deviceId || this.ids;
  331. this.$confirm('是否确认删除油站设备管理编号为"' + deviceIds + '"的数据项?', "警告", {
  332. confirmButtonText: "确定",
  333. cancelButtonText: "取消",
  334. type: "warning"
  335. }).then(function() {
  336. return delManage(deviceIds);
  337. }).then(() => {
  338. this.getList();
  339. this.msgSuccess("删除成功");
  340. })
  341. },
  342. onInstitutionChang(e){
  343. let obj = {};
  344. obj = this.stationOptions.find((item)=>{//这里的userList就是上面遍历的数据源
  345. return item.stationId === e;//筛选出匹配数据
  346. })
  347. this.form.stationName=obj.stationName;
  348. },
  349. /** 导出按钮操作 */
  350. handleExport() {
  351. const queryParams = this.queryParams;
  352. this.$confirm('是否确认导出所有油站设备管理数据项?', "警告", {
  353. confirmButtonText: "确定",
  354. cancelButtonText: "取消",
  355. type: "warning"
  356. }).then(function() {
  357. return exportManage(queryParams);
  358. }).then(response => {
  359. this.download(response.msg);
  360. })
  361. }
  362. }
  363. };
  364. </script>