2021-07-28

src/views/deviceAdmin/addOrUpdate.vue

@@ -0,0 +1,366 @@
+<template>
+  <!-- 新增设备或编辑设备弹出框 -->
+  <el-dialog
+    :visible.sync="visible"
+    class="form">
+    <div slot="title" class="dialog-title">
+      {{ form.id? '编辑设备': '新增设备' }}
+    </div>
+    <el-form 
+      :model="form" 
+      :rules="formRule"
+      size="mini" 
+      label-position="left" 
+      label-width="135px" 
+      ref="form" 
+      inline>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="注册时间：" prop="registerTime">
+            <el-input v-model="form.registerTime" disabled></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备编码：" prop="deviceCode">
+            <el-input v-model="form.deviceCode"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="省市县名：" prop="countyName">
+            <el-input v-model="form.countyName"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="省市县编码：" prop="countyCode">
+            <el-input v-model="form.countyCode"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="牧场名：" prop="farmName">
+            <!-- <el-input v-model="form.farmName"></el-input> -->
+            <el-select v-model="form.farmCode" style="width: 178px;">
+              <el-option
+                v-for="item in farmSelectedList"
+                :key="item.farmCode"
+                :label="item.farmName"
+                :value="item.farmCode">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="栋舍：" prop="pigpenId">
+            <!-- <el-input v-model="form.pigpenId"></el-input> -->
+            <el-select 
+              v-model="form.pigpenId" 
+              ref="pigpen" 
+              @focus="handleFocus('pigpen', 'farmCode')"
+              @blur="handleBlur"
+              style="width: 178px;">
+              <el-option
+                v-for="item in pigpenSelectedList"
+                :key="item.id"
+                :label="item.pigpenName"
+                :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="单元：" prop="unitId">
+            <!-- <el-input v-model="form.pigpenId"></el-input> -->
+            <el-select 
+              v-model="form.unitId" 
+              ref="unit" 
+              @focus="handleFocus('unit', 'pigpenId')"
+              @blur="handleBlur"
+              style="width: 178px;">
+              <el-option
+                v-for="item in unitSelectedList"
+                :key="item.id"
+                :label="item.pigpenName"
+                :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="阶段：" prop="stage">
+            <el-select v-model="form.stage" style="width: 178px;">
+              <el-option
+                v-for="item in stageList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="上传服务器地址：" prop="serverIp">
+            <el-input v-model="form.serverIp"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="端口：" prop="port">
+            <el-input v-model="form.port"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button size="mini" plain @click="visible = false">取 消</el-button>
+      <el-button size="mini" type="success" @click="onSubmit">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import {mapState} from 'vuex'
+export default {
+  data() {
+    return {
+      visible: false,
+      form: {
+        id: 0,
+        registerTime: '',
+        deviceCode: '',
+        countyName: '',
+        countyCode: '',
+        farmCode: '',
+        stage: '',
+        pigpenId: '',
+        unitId: '',
+        serverIp: '',
+        port: ''
+      },
+      stageList: [ // 状态
+        {
+          value: 1,
+          label: '配怀'
+        },
+        {
+          value: 2,
+          label: '分娩'
+        },
+        {
+          value: 3,
+          label: '后备'
+        },
+        {
+          value: 4,
+          label: '空怀'
+        },
+        {
+          value: 5,
+          label: '公猪'
+        }
+      ],
+      farmList: [ // 牧场List
+      ],
+      farmSelectedList: [ // 根据省市县确定的牧场List
+
+      ],
+      pigpenList: [ // 猪舍List
+
+      ],
+      pigpenSelectedList: [ // 根据牧场确定的猪舍List
+      ],
+      unitList: [ // 单元List
+      ],
+      unitSelectedList: [ // 根据猪舍确定的单元List
+      ],
+      formRule: {
+        deviceCode: [
+          { required: true, message: '设备编码不能为空', trigger: 'blur' }
+        ],
+        countyName: [],
+        countyCode: [],
+        farmName: [],
+        farmCode: [],
+        stage: [],
+        pigpenId: [],
+        serverIp: [
+          { required: true, message: '上传服务器地址不能为空', trigger: 'blur' }
+        ],
+        port: [
+          { required: true, message: '端口不能为空', trigger: 'blur' }
+        ]
+      },
+      msgFlag: false
+    }
+  },
+  computed: {
+    ...mapState(['baseUrl'])
+  },
+  methods: {
+    init (row) {
+      this.visible = true
+      this.form.registerTime = this.getDate(new Date())
+      if (row.id) { // 如果没有参数传入，默认传入鼠标点击事件
+        console.log(row);
+        for (const key in this.form) {
+          if (Object.hasOwnProperty.call(this.form, key)) {
+            this.form[key] = row[key]
+          }
+        }
+      }
+      this.$http({
+        url: this.$http.adornUrl(`${this.baseUrl}/manager/basepigpen/listAll`),
+        method: 'get'
+      }).then(async({data}) => {
+        let farmResult = await this.$http({
+          url: this.$http.adornUrl(`${this.baseUrl}/management/basefarminfo/findAll`),
+          method: 'get'
+        })
+        this.farmList = farmResult.data.data
+        this.farmSelectedList = this.farmList
+        this.pigpenList = data.page
+      }).catch(() => {})
+    },
+    // 获取时间格式：2021-07-28
+    getDate (time) {
+      let fmt = 'yyyy-MM-dd'
+      var o = { 
+        "M+" : time.getMonth()+1,                 //月份 
+        "d+" : time.getDate(),                    //日 
+        "h+" : time.getHours(),                   //小时 
+        "m+" : time.getMinutes(),                 //分 
+        "s+" : time.getSeconds(),                 //秒 
+        "q+" : Math.floor((time.getMonth()+3)/3), //季度 
+        "S" : time.getMilliseconds()             //毫秒 
+      };
+      if(/(y+)/.test(fmt)) {
+        fmt=fmt.replace(RegExp.$1, (time.getFullYear()+"").substr(4 - RegExp.$1.length))
+      }
+      for(var k in o) {
+        if(new RegExp("("+ k +")").test(fmt)){
+          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)))
+        }
+      }
+      return fmt; 
+    },
+    // 选择框的选择顺序
+    handleFocus (ref, formItem) {
+      const msg = {
+        pigpen: '请先选择牧场',
+        unit: '请先选择栋舍'
+      }
+      if (!this.form[formItem]) {
+        this.$refs[ref].blur()
+      }
+      if (!this.form[formItem] && !this.msgFlag) {
+        this.$message.error(msg[ref])
+        this.msgFlag = true
+      }
+    },
+    // FIXME: 我要吐了，为什么点击el-select会触发两次focus事件，没懂，反正就是行了
+    handleBlur () {
+      setTimeout(() => {
+        this.msgFlag = false
+      }, 50)
+    },
+    // 确定按钮
+    onSubmit () {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl(`${this.baseUrl}/manager/collectorregister/${this.form.id? 'update': 'save'}`),
+            method: 'post',
+            data: this.$http.adornData({
+              'id': this.form.id || undefined,
+              'registerTime': this.form.registerTime + ' 00:00:00',
+              'deviceCode': this.form.deviceCode,
+              'countyName': this.form.countyName,
+              'countyCode': this.form.countyCode,
+              'unitId': this.form.unitId || undefined,
+              'farmCode': this.form.farmCode || undefined,
+              'stage': this.form.stage || undefined,
+              'pigpenId': parseInt(this.form.pigpenId) || undefined,
+              'serverIp': this.form.serverIp,
+              'port': this.form.port
+            })
+          }).then(({data}) => {
+            if (data && data.code === 0) {
+              this.$refs['form'].resetFields()
+              this.visible = false
+              this.$emit('refreshData')
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                // onClose: () => {
+                //   this.visible = false
+                //   this.$emit('refreshDataList')
+                // }
+              })
+              // this.resetForm()
+              this.visible = false
+            } else {
+              this.$message.error(data.msg)
+            }
+          })
+        }
+      })
+      // this.visible = false
+    }
+  },
+  watch: {
+    /** 根据 farmCode 确定猪舍 */
+    'form.farmCode': {
+      handler (newValue) {
+        this.form.pigpenId = ''
+        if (newValue) {
+          this.pigpenSelectedList = this.pigpenList.filter(item => item.farmCode === newValue)
+        }
+      }
+    },
+    /** 根据 pigpenId 确定单元 */
+    'form.pigpenId': {
+      handler (newValue) {
+        this.form.unitId = ''
+        if (newValue) {
+          let pigpen = this.pigpenSelectedList.find(item => item.id === newValue)
+          this.unitSelectedList = pigpen.children
+        }
+      }
+    }
+  }
+}
+</script>
+<style>
+  .form {
+    margin-top: 50px;
+  }
+  .form .el-dialog {
+    border-radius: 5px;
+    width: 45%;
+  }
+  .form .el-dialog__header {
+    padding: 0;
+    border-radius: 5px;
+  }
+  .dialog-title {
+    background-color: #f3f3f3;
+    padding: 15px;
+    font-weight: 700;
+    border-bottom: 1px solid #ddd;
+  }
+  .form .el-dialog__body {
+    padding: 20px 60px;
+  }
+  .form .el-dialog__footer {
+    border-top: 1px solid #ddd;
+  }
+  .form .dialog-footer {
+    padding-right: 50px;
+    padding-top: 10px;
+  }
+</style>

src/views/deviceAdmin/deviceAdmin.vue

@@ -85,7 +85,7 @@
         <i class="el-icon-s-unfold"></i>
         <span>设备列表</span>
         <el-button plain size="mini" class="button-margin">批量上传</el-button>
-        <el-button type="primary" plain size="mini">新增设备</el-button>
+        <el-button type="primary" plain size="mini" @click="handleAddOrEdit">新增设备</el-button>
       </div>
     </div>
     <!-- 表格 -->
@@ -144,11 +144,13 @@
         align="center">
       </el-table-column>
       <el-table-column
-        prop="stage"
         label="阶段"
         sortable
         width="70"
         align="center">
+        <template slot-scope="scope">
+          <span>{{ stageList[scope.row.stage - 1].label }}</span>
+        </template>
       </el-table-column>
       <el-table-column
         prop="pigpenName"
@@ -203,8 +205,8 @@
         align="center">
         <template slot-scope="scope">
           <el-button type="text" size="small" @click="handleCheck(scope.row)">查看</el-button>
-          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
-          <el-button type="text" size="small">注销</el-button>
+          <el-button type="text" size="small" @click="handleAddOrEdit(scope.row)">编辑</el-button>
+          <el-button type="text" size="small" @click="handleLogout(scope.row.id)">注销</el-button>
           <el-button type="text" size="small">删除</el-button>
         </template>
         <!-- TODO: 按钮 -->
@@ -216,12 +218,15 @@
       @sizeChange="sizeChange"
       @pageChange="pageChange">
     </table-footer>
+    <!-- 新增或者编辑设备弹出框 -->
+    <add-or-update ref="addOrUpdate" @refreshData="init"></add-or-update>
   </div>
 </template>
 
 <script>
 import TableFooter from "../../components/TableFooter";
-import {mapState} from 'vuex';
+import addOrUpdate from './addOrUpdate.vue'
+import {mapState} from 'vuex'
 export default {
   name: "deviceAdmin",
   data() {
@@ -287,6 +292,28 @@ export default {
       totalPages: 0, // 共 n 条数据
       pageIndex: 1, // 表格当前页数
       dataListLoading: true,
+      stageList: [ // 状态
+        {
+          value: 1,
+          label: '配怀'
+        },
+        {
+          value: 2,
+          label: '分娩'
+        },
+        {
+          value: 3,
+          label: '后备'
+        },
+        {
+          value: 4,
+          label: '空怀'
+        },
+        {
+          value: 5,
+          label: '公猪'
+        }
+      ],
       networkList: [ // 网络通信状态 —— 查询条件 + 表格通用
         {
           value: 1,
@@ -320,7 +347,8 @@ export default {
     }
   },
   components: {
-    TableFooter
+    TableFooter,
+    addOrUpdate
   },
   computed: {
     ...mapState(['baseUrl'])
@@ -364,10 +392,11 @@ export default {
     resetForm(form) {
       this.$refs[form].resetFields()
     },
-    // 编辑按钮
-    handleEdit (row) {
-      console.log(row);
-      // 编辑
+    // 点击新增设备 or 编辑按钮
+    handleAddOrEdit (row) {
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(row)
+      })
     },
     // 查看按钮
     handleCheck (row) {
@@ -380,6 +409,11 @@ export default {
           deviceCode: row.deviceCode
         }
       })
+    },
+    // 注销按钮
+    handleLogout (id) {
+      console.log(id);
+      // TODO: 明天再做.
     }
   },
   mounted() {
@@ -422,7 +456,7 @@ export default {
 
 /** 设备列表 */
 .title {
-  background-color: rgba(243, 243, 243, 1);
+  background-color: #f3f3f3;
   height: 50px;
   line-height: 50px;
   border: 1px solid #ddd;