工站页面样式和基础接口

src/api/station.js

+import request from '@/utils/request'
+import Qs from 'qs'
+
+// 查询工站列表
+export function listStation(query) {
+  return request({
+    url: '/nltstation/queryNltStationByPagination',
+    method: 'get',
+    params: query
+  })
+}
+
+// 新增工站
+export function addStation(data) {
+  data = Qs.stringify(data)
+  return request({
+    url: '/nltstation/add',
+    method: 'post',
+    data,
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    }
+  })
+}
+
+// 查询工站单表
+export function getStation(stationID) {
+  return request({
+    url: '/nltstation/detail/' + stationID,
+    method: 'get'
+  })
+}
+
+// 修改工站
+export function updateStation(data) {
+  const businessId = data.businessId
+  data = Qs.stringify(data)
+  return request({
+    url: '/nltstation/update/' + businessId,
+    method: 'put',
+    data,
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    }
+  })
+}
+
+// 删除工站（逻辑删除）
+export function delStation(stationID) {
+  return request({
+    url: '/nltstation/deleteLogical/' + stationID,
+    method: 'delete'
+  })
+}

src/api/system/device.js

@@ -45,18 +45,6 @@ export function updateDevice(data) {
   })
 }
 
-// 修改设备状态
-export function updateDeviceStatus(businessId, flag) {
-  return request({
-    url: '/nltdevice/update/' + businessId,
-    method: 'put',
-    data: Qs.stringify({ flag: flag }),
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded'
-    }
-  })
-}
-
 // 删除设备（逻辑删除）
 export function delDevice(deviceID) {
   return request({

src/views/productionInfo/Station.vue

 <template>
-  <div>工站定义</div>
+  <div class="app-container">
+    <div class="stationSearch" style="margin-left: 10px">
+      <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true">
+        <el-form-item label="工站编号" prop="staCode">
+          <div slot="label" class="labelClass">
+            <div>工站编号</div>
+            <div>Position No</div>
+          </div>
+          <el-input
+            v-model="queryParams.staCode"
+            :maxlength="30"
+            placeholder="请输入工站编号"
+            clearable
+            size="small"
+          />
+        </el-form-item>
+        <el-form-item label="工站名称" prop="staName">
+          <div slot="label" class="labelClass">
+            <div>工站名称</div>
+            <div>Position Name</div>
+          </div>
+          <el-input
+            v-model="queryParams.staName"
+            :maxlength="30"
+            placeholder="请输入工站名称"
+            clearable
+            size="small"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            class="redBtn"
+            type="danger"
+            size="small"
+            @click="handleQuery"
+          >查询 Query</el-button>
+          <el-button class="resetBtn" size="small" @click="resetQuery">重置 Reset</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="placeholder" />
+    <div style="padding:10px">
+      <div style="float: right;position: relative;bottom: 10px">
+        <el-button
+          class="redBtn"
+          type="danger"
+          size="small"
+          @click="handleAdd"
+        >新增 Add</el-button>
+      </div>
+      <div class="mb12 font-small-bold">工站列表</div>
+      <el-table
+        v-loading="Loading"
+        :data="stationList"
+        border
+      >
+        <el-table-column align="center" prop="staCode">
+          <template slot="header">
+            <div>工站编号</div>
+            <div>Position No</div>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="staName">
+          <template slot="header">
+            <div>工站名称</div>
+            <div>Position Name</div>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="staAbbreviation">
+          <template slot="header">
+            <div>工站简称</div>
+            <div>Position Abbreviation</div>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="staType">
+          <template slot="header">
+            <div>工站类型</div>
+            <div>Position Type</div>
+          </template>
+        </el-table-column>
+        <el-table-column :show-overflow-tooltip="true" align="center" prop="createDate" width="200">
+          <template slot="header">
+            <div>创建时间</div>
+            <div>Build Time</div>
+          </template>
+          <template slot-scope="scope">
+            <span>{{ scope.row.createDate | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="updateBy">
+          <template slot="header">
+            <div>操作人</div>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" width="100">
+          <template slot="header">
+            <div>状态</div>
+            <div>Status</div>
+          </template>
+          <template slot-scope="scope">
+            <el-switch
+              v-model="scope.row.flag"
+              active-value="1"
+              inactive-value="0"
+              @change="handleStatusChange(scope.row)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot="header">
+            <div>操作</div>
+            <div>Operation</div>
+          </template>
+          <template slot-scope="scope">
+            <el-link
+              size="mini"
+              type="primary"
+              style="margin-left: 10px"
+              @click="handleUpdate(scope.row)"
+            >修改</el-link>
+            <el-link
+              size="mini"
+              type="danger"
+              style="margin-left: 10px"
+              @click="handleDelete(scope.row)"
+            >删除</el-link>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.page"
+      :limit.sync="queryParams.rows"
+      @pagination="getStaTable"
+    />
+    <!--    添加或修改工站信息对话框-->
+    <el-dialog class="stationDialog" :title="title" :visible.sync="open" width="60%" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item class="labelHeight" label="工站编号" prop="staCode">
+              <div slot="label" class="labelClassRequired">
+                <div class="labelName">工站编号</div>
+                <div class="labelName">Position No</div>
+              </div>
+              <el-input :maxlength="30" v-model.trim="form.staCode" placeholder="请输入工站编号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item class="labelHeight" label="工站名称" prop="staName">
+              <div slot="label" class="labelClassRequired">
+                <div class="labelName">工站名称</div>
+                <div class="labelName">Position Name</div>
+              </div>
+              <el-input :maxlength="30" v-model.trim="form.staName" placeholder="请输入工站名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item class="labelHeight" label="工站类型" prop="staType">
+              <div slot="label" class="labelClassRequired">
+                <div class="labelName">工站类型</div>
+                <div class="labelName">Position Type</div>
+              </div>
+              <el-select v-model="form.staType" placeholder="请选择工站类型" clearable size="small">
+                <el-option
+                  v-for="dict in staTypeOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="dict.dictValue"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item class="labelHeight" label="工站状态">
+              <div slot="label" class="labelClass">
+                <div class="labelName">状态</div>
+                <div class="labelName">Status</div>
+              </div>
+              <el-radio-group v-model="form.flag">
+                <el-radio label="1">启用</el-radio>
+                <el-radio label="0">停用</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item class="labelHeight" label="工站简称" prop="staAbbreviation">
+              <div slot="label" class="labelClass">
+                <div class="labelName">工站简称</div>
+                <div class="labelName">Position</div>
+                <div class="labelName">Abbreviation</div>
+              </div>
+              <el-input :maxlength="30" v-model.trim="form.staAbbreviation" placeholder="请输入工站简称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item class="labelHeight" label="备注" prop="remarks">
+              <div slot="label" class="labelClass">
+                <div class="labelName">备注</div>
+                <div class="labelName">PS</div>
+              </div>
+              <el-input :maxlength="400" v-model.trim="form.remarks" type="textarea" :row="3" placeholder="请输入备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="danger" class="redBtn" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import { listData } from '@/api/system/dict/data'
+import { addStation, delStation, getStation, listStation, updateStation } from '@/api/station'
+
 export default {
-  name: 'Station'
+  name: 'Station',
+  data() {
+    return {
+      // 搜索栏隐藏判断，默认显示
+      showSearch: true,
+      // 查询参数
+      queryParams: {
+        page: 1,
+        rows: 10,
+        staCode: undefined,
+        staName: undefined
+      },
+      // 工站表格列表
+      stationList: [],
+      // 加载遮罩
+      Loading: true,
+      // 表格总条数
+      total: 0,
+      // 对话框标题
+      title: '',
+      // 对话框开启判断标志
+      open: false,
+      // 对话框表单数据
+      form: {},
+      // 对话框表单验证
+      rules: {
+        staCode: [
+          { required: true, message: '请输入工站编号', trigger: 'blur' }
+        ],
+        staName: [
+          { required: true, message: '请输入工站名称', trigger: 'blur' }
+        ],
+        staType: [
+          { required: true, message: '请选择工站类型', trigger: 'blur' }
+        ]
+      },
+      // 查询设备类型数据字典
+      staTypeOptions: []
+    }
+  },
+  /** 路由离开前存储筛选条件*/
+  beforeRouteLeave(to, from, next) {
+    this.$store.dispatch('searchSave/searchParamsSet', {
+      path: this.$route.path,
+      param: {
+        ...this.queryParams
+      }
+    })
+    next()
+  },
+  created() {
+    if (this.$store.getters.searchParams[this.$route.path]) {
+      const { searchParams } = this.$store.getters; const { path } = this.$route
+      const param = JSON.parse(searchParams[path]) // 保留着的查询条件
+      this.queryParams = { ...param }
+    }
+    this.getStaTable()
+  },
+  methods: {
+    /** 查询按钮方法 **/
+    handleQuery() {
+      this.queryParams.page = 1
+      this.getStaTable()
+    },
+    /** 重置按钮方法 **/
+    resetQuery() {
+      this.queryParams.staCode = undefined
+      this.queryParams.staName = undefined
+      this.getStaTable()
+    },
+    /** 新增按钮方法 **/
+    handleAdd() {
+      this.getDictFun()
+      this.reset()
+      this.title = '新增工站'
+      this.open = true
+    },
+    /** 状态修改方法 **/
+    handleStatusChange(row) {
+      console.log(row)
+      const text = row.flag === '0' ? '停用' : '启用'
+      this.$confirm(`“${row.staName}”工站即将被${text}，是否继续？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        customClass: 'confirmBtnSure',
+        type: 'warning'
+      }).then(function() {
+        const flag = row.flag
+        return getStation(row.businessId).then(response => {
+          row = response.data
+          row.flag = flag
+          return updateStation(row)
+        })
+      }).then(() => {
+        this.$message({
+          message: text + '成功',
+          type: 'success'
+        })
+      }).catch(function() {
+        row.flag = row.flag === '0' ? '1' : '0'
+      })
+    },
+    /** 修改按钮方法 **/
+    handleUpdate(row) {
+      console.log(row)
+      this.reset()
+      this.getDictFun()
+      getStation(row.businessId).then(response => {
+        this.form = response.data
+        this.title = '修改工站'
+        this.open = true
+      })
+    },
+    /** 删除按钮方法 **/
+    handleDelete(row) {
+      this.$confirm('所选择数据被删除后不可再恢复，是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function() {
+        return delStation(row.businessId)
+      }).then(() => {
+        this.getStaTable()
+        this.$message({
+          message: '删除成功',
+          type: 'success'
+        })
+      }).catch()
+    },
+    /** 查询工站表方法 **/
+    getStaTable() {
+      this.Loading = true
+      listStation(this.queryParams).then(response => {
+        this.stationList = response.rows
+        this.total = response.total
+        this.Loading = false
+      })
+    },
+    /** 对话框取消按钮 **/
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    /** 对话框保存按钮 **/
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.form.businessId !== undefined) {
+            updateStation(this.form).then(response => {
+              if (response.code === 200) {
+                this.$message({
+                  message: '修改成功',
+                  type: 'success'
+                })
+                this.open = false
+                this.getStaTable()
+              }
+            })
+          } else {
+            addStation(this.form).then(response => {
+              if (response.code === 200) {
+                this.$message({
+                  message: '新增成功',
+                  type: 'success'
+                })
+                this.open = false
+                this.getStaTable()
+              }
+            })
+          }
+        }
+      })
+    },
+    /** 获取数据字典方法 **/
+    getDictFun() {
+      listData({ dictType: 'stationType' }).then(response => {
+        this.staTypeOptions = response.rows
+      })
+    },
+    /** 重置对话框表单方法 **/
+    reset() {
+      this.form = {
+        staCode: undefined,
+        staName: undefined,
+        staType: undefined,
+        staAbbreviation: undefined,
+        remarks: undefined,
+        flag: '1'
+      }
+      this.resetForm('form')
+    }
+  }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss">
+.app-container{
+  font-size: 18px;
+  padding: 0;
+  .stationSearch {
+    .el-form-item--small .el-form-item__label{
+      line-height: 17px;
+    }
+    .labelClass{
+      text-align: center;
+    }
+  }
+  .placeholder{
+    height:1.3vh;
+    background-color: #F4F4F4;
+    margin-bottom:10px
+  }
+  .el-table th .cell{
+    display: inline-block!important;
+  }
+  .table-drop{
+    vertical-align: 2px;
+    line-height: 20px;
+    margin-left: 15px
+  }
+  .el-switch{
+    margin-left: 15px;
+  }
+}
+.stationDialog{
+  .labelHeight{
+    .el-form-item__label{
+      height: 60px;
+    }
+    .el-form-item__error{
+      top: 73%;
+      line-height: 0;
+    }
+  }
+  .el-form-item--small .el-form-item__label{
+    line-height: 17px;
+  }
+  .labelName{
+    display: flex;
+    justify-content: end;
+  }
+  .labelClass{
+    position: relative;
+    right: 13px;
+    text-align: center;
+  }
+  .labelClassRequired{
+    text-align: center;
+    position: relative;
+    bottom: 17px;
+    right: 13px;
+  }
+}
 </style>

src/views/system/device/index.vue

@@ -436,7 +436,6 @@ export default {
     },
     /** 删除按钮方法 **/
     handleDelete(row) {
-      console.log(row)
       this.$confirm('所选择数据被删除后不可再恢复，是否继续？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',