123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434 |
- <template>
- <div class="app-container">
- <el-form
- :model="queryForm"
- ref="queryForm"
- :inline="true"
- label-width="88px"
- >
- <el-form-item label="设备类型" prop="deviceType">
- <el-select
- v-model="queryForm.deviceType"
- clearable
- placeholder="请选择"
- >
- <el-option
- v-for="dict in deviceTypeOptions"
- :key="dict.dictValue"
- :label="dict.dictLabel"
- :value="dict.dictValue"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="设备序列号" prop="deviceSerialNum">
- <el-input
- v-model="queryForm.deviceSerialNum"
- placeholder="请输入设备序列号"
- clearable
- size="small"
- @keyup.enter.native="handleQuery"
- />
- </el-form-item>
- <el-form-item>
- <el-button
- type="cyan"
- icon="el-icon-search"
- size="mini"
- @click="handleQuery"
- >搜索</el-button
- >
- <el-button
- type="info"
- icon="el-icon-refresh"
- size="mini"
- @click="resetQuery"
- >重置</el-button
- >
- <el-button
- type="primary"
- icon="el-icon-plus"
- size="mini"
- @click="handleAdd"
- >新增</el-button
- >
- </el-form-item>
- </el-form>
- <el-table :data="equipmentList">
- <el-table-column
- label="主键自增id"
- v-if="false"
- align="center"
- prop="deviceId"
- />
- <el-table-column
- label="油站名称"
- align="center"
- prop="stationName"
- v-if="jiBie === 3"
- />
- <el-table-column
- label="设备编号"
- align="center"
- prop="deviceNo"
- />
- <el-table-column
- label="设备序列号"
- align="center"
- prop="deviceSerialNum"
- />
- <el-table-column label="设备厂家" align="center" prop="deviceFactory" />
- <el-table-column label="绑定油枪号" align="center" prop="gunNo" />
- <el-table-column
- label="启动状态"
- align="center"
- prop="deviceStatus"
- >
- <template slot-scope="scope">
- {{scope.row.deviceStatus == "1" ? "开启":"关闭"}}
- </template>
- </el-table-column>
- <el-table-column
- label="操作"
- align="center"
- class-name="small-padding fixed-width"
- >
- <template slot-scope="scope">
- <el-button
- size="mini"
- type="text"
- icon="el-icon-edit"
- @click="handleUpdate(scope.row)"
- >修改</el-button
- >
- <el-button
- size="mini"
- type="text"
- icon="el-icon-delete"
- @click="handleDelete(scope.row)"
- >删除</el-button
- >
- </template>
- </el-table-column>
- </el-table>
- <pagination
- :hidden="total > 0 ? false : true"
- :total="total"
- :page.sync="queryForm.pageNum"
- :limit.sync="queryForm.pageSize"
- @pagination="getList"
- :autoScroll="true"
- />
- <!-- 添加或修改油站设备管理对话框 -->
- <el-dialog
- :title="title"
- :visible.sync="open"
- width="500px"
- append-to-body
- status-icon
- >
- <el-form
- ref="dialogForm"
- :model="dialogForm"
- :rules="rules"
- label-width="100px"
- >
- <el-form-item label="设备编号" prop="deviceNo">
- <el-input
- v-model="dialogForm.deviceNo"
- placeholder="请输入设备编号"
- />
- </el-form-item>
- <el-form-item label="设备名称" prop="deviceName">
- <el-input
- v-model="dialogForm.deviceName"
- placeholder="请输入设备名称"
- />
- </el-form-item>
- <el-form-item label="设备序列号" prop="deviceSerialNum">
- <el-input
- v-model="dialogForm.deviceSerialNum"
- placeholder="请输入设备序列号"
- />
- </el-form-item>
- <el-form-item label="设备类型" prop="deviceType">
- <el-select
- v-model="dialogForm.deviceType"
- placeholder="请选择设备类型"
- clearable
- size="small"
- >
- <el-option
- v-for="dict in deviceTypeOptions"
- :key="dict.dictValue"
- :label="dict.dictLabel"
- :value="dict.dictValue"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="绑定油枪号" prop="checkedGunList" required>
- <template v-if="allGunList.length === 0">
- 请先在油枪管理里配置油枪
- </template>
- <template v-else>
- <el-checkbox-group v-model="dialogForm.checkedGunList">
- <el-checkbox
- v-for="item in allGunList"
- :key="item.oilGunId"
- :label="item.oilGunNo"
- :value="item.oilGunNo"
- >
- {{ item.oilGunNo + "号枪/" + item.oilName }}
- </el-checkbox>
- </el-checkbox-group>
- </template>
- </el-form-item>
- <el-form-item label="设备状态" prop="deviceStatus">
- <el-select
- v-model="dialogForm.deviceStatus"
- clearable
- size="small"
- placeholder="请选择"
- >
- <el-option
- v-for="dict in deviceStatusOptions"
- :key="dict.dictValue"
- :label="dict.dictLabel"
- :value="dict.dictValue"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="设备厂家" prop="deviceFactory">
- <el-input
- v-model="dialogForm.deviceFactory"
- placeholder="请输入设备厂家"
- />
- </el-form-item>
- </el-form>
- <div slot="footer" class="dialog-footer">
- <el-button type="primary" @click="submitForm">确 定</el-button>
- <el-button @click="cancel">取 消</el-button>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- import {
- listManage,
- getManage,
- delManage,
- addManage,
- updateManage,
- exportManage,
- changeManageStatus,
- } from "@/api/station/manage";
- import { listGun } from "@/api/station/gun";
- export default {
- name: "equipment",
- data() {
- let validateGunNo = (rule, value, callback) => {
- if (this.allGunList.length === 0) {
- callback(new Error("请先配置油枪后再来配置设备"));
- }
- if (this.dialogForm.checkedGunList.length === 0) {
- callback(new Error("请勾选要绑定的油枪"));
- }
- callback();
- };
- return {
- // 油站设备管理表格数据
- equipmentList: [],
- // 油枪复选
- allGunList: [],
- // 已选的油枪
- checkedGunList: [],
- //设备状态
- deviceStatusOptions: [],
- //设备类型
- deviceTypeOptions: [],
- stationOptions: [],
- // 弹出层标题
- title: "",
- // 是否显示弹出层
- open: false,
- // 总条数
- total: 100,
- // 查询参数
- queryForm: {
- pageNum: 1,
- pageSize: 10, // 初始值只能比10大
- deviceNo: null,
- stationId: this.deptId,
- deviceType: null, // 设备类型 数据字典里取
- deviceSerialNum: null, // 设备序列号
- },
- // 弹窗表单参数
- dialogForm: {
- checkedGunList:[2]
- },
- // 表单校验
- rules: {
- deviceNo: [
- { required: true, message: "请输入设备编号", trigger: "blur" },
- ],
- deviceName: [
- { required: true, message: "请输入设备名", trigger: "blur" },
- ],
- deviceSerialNum: [
- { required: true, message: "请输入设备序列号", trigger: "blur" },
- ],
- deviceType: [
- { required: true, message: "请选择设备类型", trigger: "blur" },
- ],
- checkedGunList: [
- { validator: validateGunNo, trigger: 'change' }
- ],
- deviceStatus: [
- { required: true, message: "请选择设备状态", trigger: "blur" },
- ],
- deviceFactory: [
- // { required: true, message: '请输入设备厂家', trigger: 'blur' }
- ],
- },
- };
- },
- created() {
- this.getList();
- this.init();
- },
- methods: {
- init() {
- //字典设备状态
- this.getDicts("device_status").then((response) => {
- this.deviceStatusOptions = response.data;
- });
- //字典设备类型
- this.getDicts("device_type").then((response) => {
- this.deviceTypeOptions = response.data;
- });
- },
- /** 查询油站设备管理列表 首页表单 */
- getList() {
- listManage(this.queryForm).then((response) => {
- this.equipmentList = response.rows;
- this.total = response.total;
- });
- },
- // 取消按钮
- cancel() {
- this.open = false;
- this.reset();
- },
- // 表单重置
- reset() {
- this.dialogForm = {};
- },
- /** 搜索按钮操作 */
- handleQuery() {
- this.queryForm.pageNum = 1;
- this.getList();
- },
- /** 重置按钮操作 */
- resetQuery() {
- this.resetForm("queryForm");
- this.handleQuery();
- },
- /** 新增按钮操作 */
- handleAdd() {
- if (this.jiBie === 2) {
- this.title = "添加油站设备管理";
- this.open = true;
- listGun({
- stationId: this.deptId,
- }).then((response) => {
- this.allGunList = response.rows;
- });
- } else {
- this.msgSuccess("请登录对应的账号");
- }
- },
- /** 修改按钮操作 */
- handleUpdate(row) {
- let checkedGunList
- if (
- Object.prototype.toString.call(row.gunNo) ===
- "[object String]"
- ) {
- checkedGunList = [...new Set(row.gunNo.split(","))].filter((ele) => {
- return ele.toString().trim() !== "";
- });
- }else{
- checkedGunList = []
- }
- this.dialogForm={...row, checkedGunList}
- listGun({
- stationId: this.deptId,
- }).then((response) => {
- this.allGunList = response.rows;
- });
- this.title = "修改油站设备管理";
- this.open = true;
- },
- /** 提交按钮 */
- submitForm() {
- this.$refs["dialogForm"].validate((valid) => {
- if (valid) {
- this.dialogForm.gunNo = this.dialogForm.checkedGunList.toString()
- if (this.dialogForm.deviceId != null) {
- updateManage(this.dialogForm).then((response) => {
- this.msgSuccess("修改成功");
- this.open = false;
- this.getList();
- });
- } else {
- addManage(this.dialogForm).then((response) => {
- this.msgSuccess("新增成功");
- this.open = false;
- this.getList();
- });
- }
- }
- });
- },
- /** 删除按钮操作 */
- handleDelete(row) {
- const deviceIds = row.deviceId;
- this.$confirm("是否确认删除油站设备管理", "警告", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning",
- })
- .then(function () {
- return delManage(deviceIds);
- })
- .then(() => {
- this.getList();
- this.msgSuccess("删除成功");
- });
- },
- /** 导出按钮操作 */
- // handleExport() {
- // const queryForm = this.queryForm;
- // this.$confirm("是否确认导出所有油站设备管理数据项?", "警告", {
- // confirmButtonText: "确定",
- // cancelButtonText: "取消",
- // type: "warning",
- // })
- // .then(function () {
- // return exportManage(queryForm);
- // })
- // .then((response) => {
- // this.download(response.msg);
- // });
- // },
- },
- };
- </script>
|