解决牧场选择问题，后续UI未改

src/utils/httpRequest.js

@@ -8,7 +8,7 @@ import { clearLoginInfo } from '@/utils'
 // var cookies = document.cookie.split(' ')
 // var cookie = cookies[1].split('=')
 // var farmId = cookie[1]
-let farmId = localStorage.getItem('farmId');
+let farmId = localStorage.getItem('farmId') === 'null'? undefined: parseInt(localStorage.getItem('farmId'));
 
 const http = axios.create({
   timeout: 1000 * 30,

src/utils/index.js

@@ -54,7 +54,8 @@ export function treeDataTranslate (data, id = 'id', pid = 'parentId') {
 export function clearLoginInfo () {
   localStorage.removeItem('farmId')
   Vue.cookie.delete('token')
+  Vue.cookie.delete('farmId')
+  Vue.cookie.delete('formFarmId')
   store.commit('resetStore')
-  localStorage.removeItem('farmId')
   router.options.isAddDynamicMenuRoutes = false
 }

src/views/common/home.vue

@@ -28,6 +28,7 @@
 
 <script>
   export default {
+
   }
 </script>
 

src/views/main-navbar.vue

@@ -17,6 +17,27 @@
       <el-menu
         class="site-navbar__menu site-navbar__menu--right"
         mode="horizontal">
+        <el-menu-item>
+          <template slot="title" v-if="farmId > 0">
+            <span>{{farmName}}</span>
+          </template>
+          <template slot="title" v-else>
+            <el-select 
+              placeholder="牧场" 
+              v-model="formFarmId" 
+              :disabled="farmId > 0" 
+              @change="farmChange"
+              size="mini"
+              style="width: 120px">
+              <el-option
+                v-for="item in farmList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </template>
+        </el-menu-item>
         <el-menu-item index="1" @click="$router.push({ name: 'theme' })">
           <template slot="title">
             <!-- <el-badge value="new"> -->
@@ -48,8 +69,39 @@
         </el-menu-item>
       </el-menu>
     </div>
+    <el-dialog
+      title="请选择牧场"
+      :visible="dialogVisible"
+      width="30%">
+      <el-form 
+        :model="dataForm" 
+        :rules="dataRule" 
+        ref="dataForm" 
+        @keyup.enter.native="dataFormSubmit()" 
+        label-width="80px" 
+        size="mini"
+        style="margin-left: 20px;width: 500px">
+        <el-form-item label="牧场名称" prop="farmId">
+          <el-select 
+            placeholder="牧场" 
+            v-model="dataForm.farmId" 
+            :disabled="farmId > 0">
+            <el-option
+              v-for="item in farmList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" type="primary" @click="submit">确 定</el-button>
+      </span>
+    </el-dialog>
     <!-- 弹窗, 修改密码 -->
     <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
+    
   </nav>
 </template>
 
@@ -59,9 +111,25 @@
   export default {
     data () {
       return {
-        updatePassowrdVisible: false
+        updatePassowrdVisible: false,
+        farmId: '',
+        farmName: '',
+        farmList: [], // 牧场List
+        formFarmId: '',
+        dialogVisible: false,
+        dataForm: {
+          farmId: ''
+        },
+        dataRule: {
+          farmId: [
+            { required: true, message: '牧场名称不能为空', trigger: 'blur' }
+          ]
+        }
       }
     },
+    mounted () {
+      this.getDataList()
+    },
     components: {
       UpdatePassword
     },
@@ -82,6 +150,58 @@
       }
     },
     methods: {
+      // 获取牧场List
+      getDataList() {
+        this.$http({
+          url: this.$http.adornUrl("/management/farm/findAll"),
+          method: "post",
+        }).then(({data}) => {
+          if (data && data.code === 0) {
+            this.farmList = []
+            let farmList = data.all
+            farmList.forEach(farm => {
+              if (farm.id === this.farmId) {
+                this.farmName = farm.name
+              }
+              let item = {
+                label: farm.name,
+                value: farm.id
+              }
+              this.farmList.push(item)
+            })
+          } else {
+            this.farmList = []
+            this.$message.error(data.msg)
+          }
+        })
+        this.dialogVisible = true
+        this.farmId = this.$cookie.get('farmId') === 'null'? undefined: parseInt(this.$cookie.get('farmId'))
+        if (this.farmId) {
+          this.dialogVisible = false
+          this.formFarmId = this.farmId
+          return
+        }
+        console.log(this.$cookie.get('formFarmId'));
+        this.formFarmId = this.$cookie.get('formFarmId') === null? undefined: parseInt(this.$cookie.get('formFarmId'))
+        if (this.formFarmId) {
+          this.dialogVisible = false
+          return
+        }
+      },
+      submit () {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            this.formFarmId = this.dataForm.farmId
+            this.$cookie.set('formFarmId', this.formFarmId)
+            this.dialogVisible = false
+          }
+        })
+      },
+      // 选择牧场
+      farmChange (val) {
+        // 管理员选择牧场
+        this.$cookie.set('formFarmId', val)
+      },
       // 修改密码
       updatePasswordHandle () {
         this.updatePassowrdVisible = true

src/views/main-sidebar-sub-menu.vue

@@ -16,7 +16,7 @@
   </el-submenu>
   <el-menu-item v-else :index="menu.menuId + ''" @click="gotoRouteHandle(menu)">
     <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
-    <span>{{ menu.name }}</span>
+    <span style="margin-left: -20px">{{ menu.name }}</span>
   </el-menu-item>
 </template>
 

src/views/modules/basic/breed.vue

@@ -0,0 +1,480 @@
+<template>
+  <div class="bpighouse">
+    <div class="rect rect-table">
+      <!-- 新增 删除按钮 -->
+      <el-form inline size="mini">
+        <el-form-item>
+          <el-button 
+            icon="el-icon-plus" 
+            @click="addOrUpdateHandle()">
+            新 增
+          </el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button 
+            icon="el-icon-delete" 
+            type="danger" 
+            @click="deleteHandle()" 
+            :disabled="selectionDataList.length <= 0">
+            删 除
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        height="620"
+        :data="dataList"
+        @selection-change="selectionChangeHandle"
+        v-loading="dataListLoading"
+        style="width: 100%"
+        size="mini"
+        border
+        stripe
+        :header-cell-style="{background:'rgb(245,245,245)',color:'#000',height: '45px',fontSize: '13px',fontWeight: 'normal',borderBottom: '1px solid #ccc'}" 
+        :cell-style="{color: '#888',fontSize: '13px'}">
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          header-align="center"
+          align="center"
+          label="品种">
+        </el-table-column>
+        <el-table-column
+          prop="origin"
+          header-align="center"
+          align="center"
+          label="产地">
+        </el-table-column>
+        <el-table-column
+          prop="remark"
+          header-align="center"
+          align="center"
+          label="备注">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="small"
+              @click="addOrUpdateHandle(scope.row)">
+              修改
+            </el-button>
+            <el-button
+              type="text"
+              size="small"
+              @click="deleteHandle(scope.row.id)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="block">
+        <el-pagination
+          @size-change="sizeChangeHandle"
+          @current-change="currentChangeHandle"
+          :current-page="pageIndex"
+          :page-sizes="[10, 20, 30, 50, 100]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="totalPage">
+        </el-pagination>
+      </div>
+      <el-dialog
+        :title="!form.id ? '新增' : '修改'"
+        :close-on-click-modal="false"
+        :visible.sync="visible"
+        @close="cancel"
+        width="600px">
+        <el-form
+          :rules="dataRule"
+          :model="form"
+          size="mini"
+          ref="form"
+          @keyup.enter.native="formSubmit()"
+          label-width="80px"
+          style="margin-left: 20px;width: 500px">
+          <el-form-item label="品种" prop="name">
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+          <el-form-item label="产地" prop="origin">
+            <el-input v-model="form.origin"></el-input>
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark"></el-input>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button size="mini" @click="cancel">关闭</el-button>
+          <el-button size="mini" type="primary" @click="formSubmit()">确定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dataForm: {
+        key: "",
+      },
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      selectionDataList: [],
+      visible: false,
+      form: {
+        id: "",
+        name: "",
+        origin: "",
+        remark: ''
+      },
+      // TODO: 猪舍编号长度
+      dataRule: {
+        name: [
+          { required: true, message: '品种不能为空', trigger: 'blur' }
+        ],
+        origin: [
+          { required: true, message: '产地不能为空', trigger: ['blur'] }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.getDataList();
+  },
+  methods: {
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      this.$http({
+        url: this.$http.adornUrl("/management/basebloodline/list"),
+        method: "post",
+        params: this.$http.adornParams({
+          page: this.pageIndex,
+          limit: this.pageSize
+        })
+      }).then( ({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.page.list;
+          this.totalPage = data.page.totalCount;
+        } else {
+          this.dataList = []
+          this.totalPage = 0
+        }
+        this.dataListLoading = false
+      })
+    },
+    // 清空查询内容
+    clearAll () {
+      this.dataForm.key = ''
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 新增 or 修改牧场
+    addOrUpdateHandle(row) {
+      // 显示猪舍新增 or 修改面板
+      this.visible = true;
+      if (row) {
+        this.form.id = row.id
+        for (let key of Object.keys(this.form)) {
+          this.form[key] = row[key]
+        }
+      }
+      console.log(row);
+      console.log(this.form);
+    },
+    // 选择n个牧场
+    selectionChangeHandle(val) {
+      this.selectionDataList = [];
+      val.forEach((item) => {
+        this.selectionDataList.push(item.id);
+      });
+    },
+    // 删除n个牧场
+    deleteHandle(id) {
+      this.$confirm(`确定删除品种？`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+      .then(() => {
+        // 删除操作
+        if (id) {
+          this.selectionDataList.push(id);
+        }
+        if (this.selectionDataList.length <= 0) {
+          return;
+        }
+        this.$http({
+          url: this.$http.adornUrl("/management/basebloodline/delete"),
+          method: "post",
+          data: this.$http.adornData(this.selectionDataList, false),
+        }).then((result) => {
+          console.log(result);
+          if (result.data.code === 0) {
+            this.$message({
+              message: "成功删除品种",
+              type: "success",
+              duration: 1000,
+            })
+            // pageIndex修正
+            this.totalPage -= this.selectionDataList.length
+            let pages = Math.ceil(this.totalPage / this.pageSize)
+            this.pageIndex = this.pageIndex > pages? pages: this.pageIndex
+            this.pageIndex = this.pageIndex < 1? pages: this.pageIndex
+          } else {
+            // this.$message.error('删除失败：' + result.data.msg)
+            this.$confirm(result.data.msg, '删除失败', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              console.log('猪舍编号输入不合法')
+            }).catch(() => {})
+          }
+          this.resetForm();
+          this.selectionDataList = [];
+        });
+      })
+      .catch(() => {});
+    },
+    formSubmit() {
+      if (this.form.id) {
+        /** 修改 */
+        // 输入是否完整
+        // if (!this.confirmComplete()) {
+        //   return
+        // }
+        // 输入是否合法
+        // if (!this.confirmInput()) {
+        //   return
+        // }
+          // 进行修改操作
+        this.$http({
+          url: this.$http.adornUrl("/management/basebloodline/update"),
+          method: "post",
+          data: this.$http.adornData({
+            id: this.form.id,
+            name: this.form.name,
+            origin: this.form.origin,
+            remark: this.form.remark,
+          }),
+        }).then((result) => {
+          if (result.data.code === 0) {
+            this.resetForm();
+            this.visible = false;
+            this.$message({
+              message: "成功修改猪舍信息",
+              type: "success",
+              duration: 1000,
+            })
+          } else {
+            this.$message.error("修改猪舍信息失败");
+          }
+        })
+      } else {
+        /** 新增 */
+        // 输入是否完整
+        // if (!this.confirmComplete(1)) {
+        //   return
+        // }
+        // 输入是否合法
+        // if (!this.confirmInput()) {
+        //   return
+        // }
+        // 进行新增操作
+        this.$http({
+          url: this.$http.adornUrl("/management/basebloodline/save"),
+          method: "post",
+          data: this.$http.adornData({
+            name: this.form.name,
+            origin: this.form.origin,
+            remark: this.form.remark,
+          }),
+        }).then((result) => {
+          if (result.data.code === 0) {
+            // 新增pageIndex的修正
+            this.totalPage++
+            let pages = Math.ceil(this.totalPage / this.pageSize)
+            this.pageIndex = this.pageIndex < pages? pages: this.pageIndex
+            this.resetForm();
+            this.visible = false;
+            this.$message({
+              message: "成功添加猪舍",
+              type: "success",
+              duration: 1000,
+            });
+          } else {
+            if (result.data.code === 600) {
+              let msg = result.data.msg.split('-')
+              let farm = ''
+              for (let item of this.farmList) {
+                if (this.form.farmId === item.id) {
+                  farm = item.name
+                  break
+                }
+              }
+              this.$message({
+                message: `${farm}中猪舍编号 <p style="color:#333; display:inline">${msg[0]}</p> 已经存在！`,
+                type: "error",
+                duration: 1000,
+                dangerouslyUseHTMLString: true
+              })
+              return
+            }
+            this.$message.error("添加猪舍失败");
+          }
+        })
+      }
+    },
+    // 清空form
+    resetForm() {
+      for (let i in this.form) {
+        this.form[i] = "";
+      }
+      this.getDataList();
+    },
+    // 取消
+    cancel() {
+      this.visible = false
+      // 如果新增，则不保留form
+      if (this.form.id) {
+        this.resetForm()
+      }
+    },
+    // 校验输入是否完整
+    validComplete (val) {
+      val && (delete this.form.id)
+      for (let i in this.form) {
+        if (!this.form[i].toString()) {
+          return false
+        }
+      }
+      return true
+    },
+    // 如不完整，则提示
+    confirmComplete (val) {
+      if (this.validComplete(val)) {
+        return true
+      }
+      this.$confirm(`请输入完整`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log('牧场输入不完整')
+      }).catch(() => {})
+      return false
+    },
+    // 校验输入是否合法，此处只校验猪舍编号
+    validInput () {
+      // 只允许中文、英文、数字、-、_的输入，取反
+      const reg = /[^\a-\z\A-\Z0-9\u4E00-\u9FA5\_\-]/g
+      if (reg.test(this.form.number)) {
+        return false
+      }
+      return true
+    },
+    // 如不合法，则提示
+    confirmInput () {
+      if (this.validInput()) {
+        return true
+      }
+      this.$confirm(`只允许输入中英文、数字、-与_`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log('猪舍编号输入不合法')
+      }).catch(() => {})
+      return false
+    },
+    getchange (val) {
+      console.log(val);
+    },
+    // 变色
+    tableRowClassName({row, rowIndex}) {
+      console.log(row);
+      if (rowIndex%2 === 0) {
+        return 'warning-row';
+      }
+      return '';
+    }
+    // TODO: 猪舍编号的长度校验
+  }
+}
+</script>
+<style scoped>
+.rect {
+  background-color: #fff;
+  padding: 30px 15px;
+  border-radius: 5px;
+  border: 1px solid #e8e8e8;
+  margin-left: 20px;
+}
+.rect-form {
+  padding-bottom: 10px;
+}
+/* .rect-table {
+  margin-top: 20px;
+} */
+.demo-table-expand {
+  font-size: 0;
+  margin-left: 40px;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 80%;
+}
+.el-table .height {
+  background: rgba(254, 254, 254, 0.5);
+}
+/deep/ .el-table--mini td, .el-table--mini th {
+  padding: 3px 0 !important;
+  height: 20px !important;
+}
+/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
+  color: rgb(24,144,255);
+  background-color: rgb(24,144,255);
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: rgb(24,144,255);
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table .el-checkbox__inner:hover {
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table #select .cell .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: rgb(24,144,255);
+  border-color: rgb(24,144,255);
+}
+</style>

src/views/modules/basic/feeder.vue

@@ -0,0 +1,521 @@
+<template>
+  <div class="branch">
+    <el-container>
+      <el-header>
+        <div class="rect rect-form">
+          <el-form
+            :inline="true"
+            :model="dataForm"
+            @keyup.enter.native="getDataList()"
+            size="mini">
+            <el-form-item style="width: 500px">
+              <el-input
+                v-model="dataForm.key"
+                placeholder="请输入姓名"
+                clearable style="width: 500px"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button icon="el-icon-search" @click="getDataList()">查 询</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button icon="el-icon-circle-close" @click="clearAll()">清 空</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-header>
+      <el-main>
+        <div class="rect rect-table">
+          <el-form inline size="mini">
+            <el-form-item>
+              <el-button 
+                icon="el-icon-plus" 
+                @click="addOrUpdateHandle()">
+                新 增
+              </el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button 
+                icon="el-icon-delete" 
+                type="danger" 
+                @click="deleteHandle()" 
+                :disabled="selectionDataList.length <= 0">
+                删 除
+              </el-button>
+            </el-form-item>
+          </el-form>
+          <el-table
+            height="540"
+            :data="dataList"
+            @selection-change="selectionChangeHandle"
+            v-loading="dataListLoading"
+            style="width: 100%"
+            size="mini"
+            border
+            stripe
+            :header-cell-style="{background:'rgb(245,245,245)',color:'#000',height: '45px',fontSize: '13px',fontWeight: 'normal',borderBottom: '1px solid #ccc'}" 
+            :cell-style="{color: '#888',fontSize: '13px'}">
+            <el-table-column
+              type="selection"
+              header-align="center"
+              align="center"
+              width="50">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              header-align="center"
+              align="center"
+              label="养殖员姓名">
+            </el-table-column>
+            <el-table-column
+              prop="position"
+              header-align="center"
+              align="center"
+              label="职位">
+            </el-table-column>
+            <el-table-column
+              prop="approachTime"
+              header-align="center"
+              align="center"
+              label="入场时间">
+            </el-table-column>
+            <el-table-column
+              prop="departureTime"
+              header-align="center"
+              align="center"
+              label="离场时间">
+            </el-table-column>
+            <el-table-column
+              header-align="center"
+              align="center"
+              label="当前在职">
+              <template slot-scope="scope">
+                {{scope.row.jobStatus? '是': '否'}}
+              </template>
+            </el-table-column>
+            <el-table-column
+              fixed="right"
+              header-align="center"
+              align="center"
+              label="操作">
+              <template slot-scope="scope">
+                <el-button
+                  type="text"
+                  size="small"
+                  @click="addOrUpdateHandle(scope.row)">
+                  修改
+                </el-button>
+                <el-button
+                  type="text"
+                  size="small"
+                  @click="deleteHandle(scope.row.id)">
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="block">
+            <el-pagination
+              @size-change="sizeChangeHandle"
+              @current-change="currentChangeHandle"
+              :current-page="pageIndex"
+              :page-sizes="[10, 20, 30, 50, 100]"
+              :page-size="pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="totalPage">
+            </el-pagination>
+          </div>
+          <el-dialog
+            :title="!form.id ? '新增' : '修改'"
+            :close-on-click-modal="false"
+            :visible.sync="visible"
+            @close="cancel">
+            <el-form :model="form" ref="form" @keyup.enter.native="formSubmit()" label-width="80px" size="mini">
+              <el-form-item label="姓名">
+              <el-input v-model="form.name" placeholder="养殖员姓名"></el-input>
+              </el-form-item>
+              <el-form-item label="职位">
+                <el-input v-model="form.position" placeholder="职位"></el-input>
+              </el-form-item>
+              <el-form-item label="当前在职">
+                <el-select v-model="form.jobStatus" placeholder="请选择当前是否在岗">
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="入场时间">
+                <el-date-picker
+                  v-model="form.approachTime"
+                  type="datetime"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  placeholder="选择日期时间">
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item label="离场时间">
+                <el-date-picker
+                  v-model="form.departureTime"
+                  type="datetime"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  placeholder="选择日期时间">
+                </el-date-picker>
+              </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+              <el-button @click="cancel">关闭</el-button>
+              <el-button type="primary" @click="formSubmit()">确定</el-button>
+            </span>
+          </el-dialog>
+        </div>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      dataForm: {
+        key: ''
+      },
+      dataList: [
+        {
+          buildTime: '',
+          id: '',
+          location: '',
+          manager: '',
+          name: '',
+        }
+      ],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      selectionDataList: [],
+      visible: false,
+      form: {
+        id: '',
+        name: '',
+        position: '',
+        approachTime: '',
+        departureTime: '',
+        jobStatus: ''
+      },
+      options: [
+        {
+          value: true,
+          label: '是'
+        },
+        {
+          value: false,
+          label: '否'
+        }
+      ],
+      pigs: []
+    }
+  },
+  created () {
+    this.getDataList()
+  },
+  mounted () {
+    // this.getCascader()
+  },
+  methods: {
+    // 获取数据列表
+    getDataList () {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/management/employee/list'),
+        method: 'post',
+        params: this.$http.adornParams({
+          page: this.pageIndex,
+          limit: this.pageSize,
+          keywords: this.dataForm.key
+        })
+      }).then(({ data }) => {
+        console.log(data);
+        if (data && data.code === 0) {
+          this.dataList = data.page.list
+          this.totalPage = data.page.totalCount
+        } else {
+          this.dataList = []
+          this.totalPage = 0
+          this.$confirm(`查询养殖员信息失败`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            return
+          }).catch(() => {})
+        }
+        this.dataListLoading = false
+      })
+    },
+    // 每页数
+    sizeChangeHandle (val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+    // 当前页
+    currentChangeHandle (val) {
+      this.pageIndex = val
+      this.getDataList()
+    },
+    // 新增 or 修改谱系信息
+    addOrUpdateHandle (row) {
+      // 显示谱系新增 or 修改面板
+      this.visible = true
+      if (row) {
+        for (let key of Object.keys(this.form)) {
+          this.form[key] = row[key]
+        }
+        this.form.id = row.id
+      }
+    },
+    // 选择n个养殖员
+    selectionChangeHandle (val) {
+      this.selectionDataList = []
+      val.forEach(item => {
+        this.selectionDataList.push(item.id)
+      });
+    },
+    // 删除n个养殖员
+    deleteHandle (id) {
+      this.$confirm(`确定删除养殖员信息？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 删除操作
+        if (id) {
+          this.selectionDataList.push(id)
+        }
+        if (this.selectionDataList.length <= 0) {
+          return
+        }
+        this.$http({
+          url: this.$http.adornUrl('/management/employee/delete'),
+          method: 'post',
+          data: this.$http.adornData(this.selectionDataList, false)
+        }).then(result => {
+          if (result.data.code === 0) {
+            this.$message({
+              message: '成功删除养殖员信息',
+              type: 'success',
+              duration: 1000
+            })
+            // pageIndex修正
+            this.totalPage -= this.selectionDataList.length
+            let pages = Math.ceil(this.totalPage / this.pageSize)
+            this.pageIndex = this.pageIndex > pages? pages: this.pageIndex
+            this.pageIndex = this.pageIndex < 1? pages: this.pageIndex
+          } else {
+            this.$message.error('删除养殖员信息失败');
+          }
+          this.resetForm()
+          this.selectionDataList = []
+        })
+      }).catch(() => {})
+    },
+    formSubmit () {
+      if (this.form.id) {
+        // 修改
+        if (!this.confirmComplete()) {
+          return
+        }
+        // 检查入场时间、离开场时间
+        if (!this.confirmJobStatus()) {
+          return
+        }
+        // 进行修改操作
+        this.$http({
+          url: this.$http.adornUrl('/management/employee/update'),
+          method: 'post',
+          data: this.$http.adornData({
+            id: this.form.id,
+            name: this.form.name,
+            position: this.form.position,
+            approachTime: this.form.approachTime,
+            departureTime: this.form.departureTime,
+            jobStatus: this.form.jobStatus
+          })
+        }).then(result => {
+          if (result.data.code === 0) {
+            this.resetForm();
+            this.visible = false;
+            this.$message({
+              message: '成功修改养殖员信息',
+              type: 'success',
+              duration: 1000
+            })
+          } else {
+            this.$message.error('修改养殖员信息失败');
+          }
+        })
+      } else {
+        /** 新增 */
+        // 输入是否完整
+        if (!this.confirmComplete(1)) {
+          return
+        }
+        // 检查入场时间、立场时间、当前在岗
+        if (!this.confirmJobStatus()) {
+          return
+        }
+        // 进行新增操作
+        this.$http({
+          url: this.$http.adornUrl('/management/employee/save'),
+          method: 'post',
+          data: this.$http.adornData({
+            name: this.form.name,
+            position: this.form.position,
+            approachTime: this.form.approachTime,
+            departureTime: this.form.departureTime,
+            jobStatus: this.form.jobStatus
+          })
+        }).then(result => {
+          if (result.data.code === 0) {
+            // 新增pageIndex的修正
+            this.totalPage++
+            let pages = Math.ceil(this.totalPage / this.pageSize)
+            this.pageIndex = this.pageIndex < pages? pages: this.pageIndex
+            this.resetForm();
+            this.visible = false;
+            this.$message({
+              message: '成功添加养殖员信息',
+              type: 'success',
+              duration: 1000
+            })
+          } else {
+            this.$message.error('添加养殖员信息失败');
+          }
+        })
+      }
+    },
+    // 判断新增/修改时是否输入完整
+    validComplete (val) {
+      val && (delete this.form.id)
+      for (let i in this.form) {
+        if (!this.form[i].toString()) {
+          return false
+        }
+      }
+      return true
+    },
+    // 如不完整，则提示
+    confirmComplete (val) {
+      if (this.validComplete(val)) {
+        return true
+      }
+      this.$confirm(`请输入完整`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log('输入不完整');
+      }).catch(() => {})
+      return false
+    },
+    // 清空form
+    resetForm () {
+      for (let i in this.form) {
+        this.form[i] = ''
+      }
+      this.getDataList()
+    },
+    // 取消
+    cancel () {
+      this.visible = false
+      this.resetForm()
+    },
+    // 判断当前在岗是否正确
+    getJobStatus () {
+      let start = new Date(this.form.approachTime)
+      let end = new Date(this.form.departureTime)
+      if (start <= end) {
+        return true
+      }
+      return false
+    },
+    // 判断当前在岗与入场时间、离场时间是否有冲突
+    confirmJobStatus () {
+      if (this.getJobStatus()) {
+        return true
+      }
+      this.$confirm(`请检查入场时间与离场时间`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // return false
+        console.log('新增养殖员有误');
+      }).catch(() => {})
+      return false
+    },
+    // 变色
+    tableRowClassName({row, rowIndex}) {
+      console.log(row);
+      if (rowIndex%2 === 0) {
+        return 'warning-row';
+      }
+      return '';
+    }
+  }
+}
+</script>
+<style scoped>
+.rect {
+  background-color: #fff;
+  padding: 30px 15px;
+  border-radius: 5px;
+  border: 1px solid #e8e8e8;
+}
+.rect-form {
+  padding-bottom: 10px;
+}
+.rect-table {
+  margin-top: 20px;
+}
+.demo-table-expand {
+  font-size: 0;
+  margin-left: 40px;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 80%;
+}
+.el-table .height {
+  background: rgba(254, 254, 254, 0.5);
+}
+/deep/ .el-table--mini td, .el-table--mini th {
+  padding: 3px 0 !important;
+  height: 20px !important;
+}
+/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
+  color: rgb(24,144,255);
+  background-color: rgb(24,144,255);
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: rgb(24,144,255);
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table .el-checkbox__inner:hover {
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table #select .cell .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: rgb(24,144,255);
+  border-color: rgb(24,144,255);
+}
+</style>

src/views/modules/basic/period.vue

@@ -0,0 +1,598 @@
+<template>
+  <div class="bunit">
+    <el-container>
+      <el-header>
+        <div class="rect rect-form">
+          <el-form
+            :inline="true"
+            :model="dataForm"
+            @keyup.enter.native="getDataList()"
+            size="mini">
+            <el-form-item style="width: 500px">
+              <el-input
+                v-model="dataForm.key"
+                placeholder="请输入栏期编号/猪舍/牧场"
+                clearable style="width: 500px">
+              </el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button icon="el-icon-search" @click="getDataList()">查 询</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button icon="el-icon-circle-close" @click="clearAll()">清 空</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-header>
+      <el-main>
+        <div class="rect rect-table">
+          <!-- 新增 删除按钮 -->
+          <el-form inline size="mini">
+            <el-form-item>
+              <el-button 
+                icon="el-icon-plus" 
+                @click="addOrUpdateHandle()">
+                新 增
+              </el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button 
+                icon="el-icon-delete" 
+                type="danger" 
+                @click="deleteHandle()" 
+                :disabled="selectionDataList.length <= 0">
+                删 除
+              </el-button>
+            </el-form-item>
+          </el-form>
+          <el-table
+            height="540"
+            :data="dataList"
+            @selection-change="selectionChangeHandle"
+            v-loading="dataListLoading"
+            style="width: 100%"
+            size="mini"
+            border
+            stripe
+            :header-cell-style="{background:'rgb(245,245,245)',color:'#000',height: '45px',fontSize: '13px',fontWeight: 'normal',borderBottom: '1px solid #ccc'}" 
+            :cell-style="{color: '#888',fontSize: '13px'}">
+            <el-table-column
+              type="selection"
+              header-align="center"
+              align="center"
+              width="50">
+            </el-table-column>
+            <el-table-column
+              prop="number"
+              header-align="center"
+              align="center"
+              label="栏期编号">
+            </el-table-column>
+            <el-table-column
+              prop="phNumber"
+              header-align="center"
+              align="center"
+              label="所属猪舍">
+            </el-table-column>
+            <el-table-column
+              fixed="right"
+              header-align="center"
+              align="center"
+              label="操作">
+              <template slot-scope="scope">
+                <el-button
+                  type="text"
+                  size="small"
+                  @click="addOrUpdateHandle(scope.row)">
+                  修改
+                </el-button>
+                <el-button
+                  type="text"
+                  size="small"
+                  @click="deleteHandle(scope.row.id)">
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="block">
+            <el-pagination
+              @size-change="sizeChangeHandle"
+              @current-change="currentChangeHandle"
+              :current-page="pageIndex"
+              :page-sizes="[10, 20, 30, 50, 100]"
+              :page-size="pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="totalPage">
+            </el-pagination>
+          </div>
+          <el-dialog
+            :title="!form.id ? '新增' : '修改'"
+            :close-on-click-modal="false"
+            :visible.sync="visible"
+            @close="cancel">
+            <el-form :model="form" ref="form" @keyup.enter.native="formSubmit()" label-width="80px" :rules="dataRule">
+              <el-form-item label="所属牧场" prop="farmId">
+                <el-select v-model="form.farmId" placeholder="请选择所属牧场" @change="getPasture" style="width: 100%">
+                  <el-option
+                    v-for="item in farmList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="所属猪舍" prop="pigstyId">
+                <el-select v-model="form.pigstyId" placeholder="请选择所属猪舍" @change="getPigsty" style="width: 100%">
+                  <el-option
+                    v-for="item in phSelectedList"
+                    :key="item.id"
+                    :label="item.number"
+                    :value="item.id">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="栏期编号" prop="number">
+                <el-input v-model="form.number" placeholder="请输入栏期编号"></el-input>
+              </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+              <el-button @click="cancel">关闭</el-button>
+              <el-button type="primary" @click="formSubmit()">确定</el-button>
+            </span>
+          </el-dialog>
+        </div>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      dataForm: {
+        key: ''
+      },
+      dataList: [
+        {
+          id: '',
+          number: '',
+          phNumber: '',
+          name: '',
+        }
+      ],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      selectionDataList: [],
+      visible: false,
+      form: {
+        id: '',
+        number: '',
+        farmId: '',
+        pigstyId: ''
+      },
+      farmList: [], // 牧场list
+      pighouseList: [], // 猪舍list
+      phSelectedList: [], // 选择过牧场后的猪舍list
+      dataRule: {
+        farmId: [
+          { required: true, message: '所属牧场不能为空', trigger: 'blur' }
+        ],
+        pigstyId: [
+          { required: true, message: '所属猪舍不能为空', trigger: 'blur' }
+        ],
+        number: [
+          { required: true, message: '单元编号不能为空', trigger: ['blur', 'change'] }
+          // TODO: 栏期编号长度校验
+          // TODO: 栏期编号正则校验
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.getDataList()
+  },
+  methods: {
+    // 获取数据列表
+    getDataList () {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/management/period/list'),
+        method: 'post',
+        params: this.$http.adornParams({
+          page: 1,
+          limit: 10,
+          keywords: this.dataForm.key
+        })
+      }).then(async ({ data }) => {
+        // 获取所有牧场
+        let farmResult = await this.$http({
+          url: this.$http.adornUrl('/management/farm/findAll'),
+          method: 'post'
+        })
+        farmResult.data.all && (this.farmList = farmResult.data.all)
+        // 获取所有猪舍
+        let pighouseResult = await this.$http({
+          url: this.$http.adornUrl('/management/pigsty/findAll'),
+          method: 'post'
+        })
+        pighouseResult.data.all && (this.pighouseList = pighouseResult.data.all)
+        if (data && data.code === 0) {
+          this.dataList = data.page.list
+          this.totalPage = data.page.totalCount
+          // 牧场对应
+          this.dataList.forEach(item => {
+            for (let farm of this.farmList) {
+              if (item.farmId === farm.id) {
+                item.name = farm.name
+                break
+              }
+            }
+          });
+          // 猪舍对应
+          this.dataList.forEach(item => {
+            for (let pighouse of this.pighouseList) {
+              if (item.pigstyId === pighouse.id) {
+                item.phNumber = pighouse.number
+                break
+              }
+            }
+          });
+          this.phSelectedList = this.pighouseList
+        } else {
+          this.dataList = []
+          this.totalPage = 0
+        }
+        this.dataListLoading = false
+      })
+    },
+    // 清空查询内容
+    clearAll () {
+      this.dataForm.key = ''
+    },
+    // 每页数
+    sizeChangeHandle (val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+    // 当前页
+    currentChangeHandle (val) {
+      this.pageIndex = val
+      this.getDataList()
+    },
+    // 获取到了牧场 → 限制猪舍
+    getPasture (val) {
+      this.phSelectedList = []
+      this.pighouseList.forEach(item => {
+        if (item.farmId === val) {
+          this.phSelectedList.push(item)
+        }
+      });
+      // 如果已有选中的猪舍，且该猪舍不属于该牧场，则清空猪舍选择
+      let i;
+      for (i = 0; i < this.phSelectedList.length; i++) {
+        let item = this.phSelectedList[i];
+        if (item.id === this.form.pigstyId) {
+          break
+        }
+      }
+      if (i === this.phSelectedList.length) {
+        this.form.pigstyId = ''
+      }
+    },
+    // 获取到猪舍
+    getPigsty (val) {
+      //  → 反向确定牧场
+      for (let item of this.pighouseList) {
+        if (item.id === val) {
+          this.form.farmId = item.farmId
+          break
+        }
+      }
+      // → 先获取猪舍，没有确定牧场的情况下，限制猪舍
+      this.phSelectedList = []
+      this.pighouseList.forEach(item => {
+        if (item.farmId === this.form.farmId) {
+          this.phSelectedList.push(item)
+        }
+      });
+    },
+    // 新增 or 修改单元
+    addOrUpdateHandle (row) {
+      // 显示牧场新增 or 修改面板
+      this.visible = true
+      if (row) {
+        this.form.id = row.id
+        for (let key of Object.keys(this.form)) {
+          this.form[key] = row[key]
+        }
+      }
+      // 解决猪舍、牧场已删除，但该页面仍不变问题
+      this.$http({
+        url: this.$http.adornUrl("/management/farm/findAll"),
+        method: "post"
+      }).then(async ({ data }) => {
+        if (data && data.code === 0) {
+          this.farmList = data.all
+          // 获取猪舍
+          let pighouseResult = await this.$http({
+            url: this.$http.adornUrl('/management/pigsty/findAll'),
+            method: 'post'
+          })
+          pighouseResult.data.all && (this.pighouseList = pighouseResult.data.all)
+          this.phSelectedList = this.pighouseList
+          console.log(this.pighouseList);
+        }
+      })
+    },
+    // 选择n个牧场
+    selectionChangeHandle (val) {
+      this.selectionDataList = []
+      val.forEach(item => {
+        this.selectionDataList.push(item.id)
+      });
+    },
+    // 删除n个牧场
+    deleteHandle (id) {
+      this.$confirm(`确定删除栏期？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 删除操作
+        if (id) {
+          this.selectionDataList.push(id)
+        }
+        if (this.selectionDataList.length <= 0) {
+          return
+        }
+        this.$http({
+          url: this.$http.adornUrl('/management/period/delete'),
+          method: 'post',
+          data: this.$http.adornData(this.selectionDataList, false)
+        }).then(result => {
+          console.log(result);
+          if (result.data.code === 0) {
+            this.resetForm()
+            this.$message({
+              message: '成功删除栏期',
+              type: 'success',
+              duration: 1000
+            })
+            // pageIndex修正
+            this.totalPage -= this.selectionDataList.length
+            let pages = Math.ceil(this.totalPage / this.pageSize)
+            this.pageIndex = this.pageIndex > pages? pages: this.pageIndex
+            this.pageIndex = this.pageIndex < 1? pages: this.pageIndex
+          } else {
+            this.$message.error('删除栏期失败');
+          }
+          this.selectionDataList = []
+        })
+      }).catch(() => {})
+    },
+    formSubmit () {
+      if (this.form.id) {
+        /** 修改 */
+        // 输入是否完整
+        if (!this.confirmComplete()) {
+          return
+        }
+        // 输入是否合法
+        if (!this.confirmInput()) {
+          return
+        }
+        // 进行修改操作
+        this.$http({
+          url: this.$http.adornUrl('/management/period/update'),
+          method: 'post',
+          data: this.$http.adornData({
+            id: this.form.id,
+            number: this.form.number,
+            farmId: this.form.farmId,
+            pigstyId: this.form.pigstyId
+          })
+        }).then(result => {
+          if (result.data.code === 0) {
+            this.resetForm();
+            this.visible = false;
+            this.$message({
+              message: '成功修改栏期信息',
+              type: 'success',
+              duration: 1000
+            })
+          } else {
+            if (result.data.code === 600) {
+              let msg = result.data.msg.split('-')
+              this.$message({
+                message: `栏期编号 <p style="color:#333; display:inline">${msg[0]}</p> 已经存在！`,
+                type: "error",
+                duration: 1000,
+                dangerouslyUseHTMLString: true
+              })
+              return
+            }
+            this.$message.error('修改栏期信息失败');
+          }
+        })
+      } else {
+        /** 新增 */
+        // 输入是否完整
+        if (!this.confirmComplete(1)) {
+          return
+        }
+        // 输入是否合法
+        if (!this.confirmInput()) {
+          return
+        }
+        // 进行新增操作
+        this.$http({
+          url: this.$http.adornUrl('/management/period/save'),
+          method: 'post',
+          data: this.$http.adornData({
+            number: this.form.number,
+            farmId: this.form.farmId,
+            pigstyId: this.form.pigstyId
+          })
+        }).then(result => {
+          if (result.data.code === 0) {
+            // 新增pageIndex的修正
+            this.totalPage++
+            let pages = Math.ceil(this.totalPage / this.pageSize)
+            this.pageIndex = this.pageIndex < pages? pages: this.pageIndex
+            this.resetForm();
+            this.visible = false;
+            this.$message({
+              message: '成功添加栏期',
+              type: 'success',
+              duration: 1000
+            })
+          } else {
+            if (result.data.code === 600) {
+              let msg = result.data.msg.split('-')
+              this.$message({
+                message: `栏期编号 <p style="color:#333; display:inline">${msg[0]}</p> 已经存在！`,
+                type: "error",
+                duration: 1000,
+                dangerouslyUseHTMLString: true
+              })
+              return
+            }
+            this.$message.error('添加失败');
+          }
+        })
+      }
+    },
+    // 清空form
+    resetForm () {
+      for (let i in this.form) {
+        this.form[i] = ''
+      }
+      this.getDataList()
+    },
+    // 取消
+    cancel () {
+      this.visible = false
+      // 如果新增，则不保留form
+      if (this.form.id) {
+        this.resetForm()
+      }
+    },
+    // 校验输入是否完整
+    validComplete (val) {
+      val && (delete this.form.id)
+      console.log(this.form);
+      for (let i in this.form) {
+        if (!this.form[i].toString()) {
+          return false
+        }
+      }
+      return true
+    },
+    // 如不完整，则提示
+    confirmComplete (val) {
+      if (this.validComplete(val)) {
+        return true
+      }
+      this.$confirm(`请输入完整`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log('牧场输入不完整')
+      }).catch(() => {})
+      return false
+    },
+    // 校验输入是否合法，此处只校验单元序号
+    validInput () {
+      // 只允许中文、英文、数字、-、_的输入，取反
+      const reg = /[^\a-\z\A-\Z0-9\u4E00-\u9FA5\_\-]/g
+      if (reg.test(this.form.number)) {
+        return false
+      }
+      return true
+    },
+    // 如不合法，则提示
+    confirmInput () {
+      if (this.validInput()) {
+        return true
+      }
+      this.$confirm(`只允许输入中英文、数字、-与_`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log('单元序号输入不合法')
+      }).catch(() => {})
+      return false
+    },
+    getchange (val) {
+      console.log(val);
+    },
+    // 变色
+    tableRowClassName({row, rowIndex}) {
+      console.log(row);
+      if (rowIndex%2 === 0) {
+        return 'warning-row';
+      }
+      return '';
+    }
+  }
+}
+</script>
+<style scoped>
+.rect {
+  background-color: #fff;
+  padding: 30px 15px;
+  border-radius: 5px;
+  border: 1px solid #e8e8e8;
+}
+.rect-form {
+  padding-bottom: 10px;
+}
+.rect-table {
+  margin-top: 20px;
+}
+.demo-table-expand {
+  font-size: 0;
+  margin-left: 40px;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 80%;
+}
+.el-table .height {
+  background: rgba(254, 254, 254, 0.5);
+}
+/deep/ .el-table--mini td, .el-table--mini th {
+  padding: 3px 0 !important;
+  height: 20px !important;
+}
+/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
+  color: rgb(24,144,255);
+  background-color: rgb(24,144,255);
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: rgb(24,144,255);
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table .el-checkbox__inner:hover {
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table #select .cell .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: rgb(24,144,255);
+  border-color: rgb(24,144,255);
+}
+</style>

src/views/modules/basic/pigsty.vue

@@ -16,32 +16,37 @@
               </el-input>
             </el-form-item>
             <el-form-item>
-              <el-button @click="getDataList()">查询</el-button>
+              <el-button icon="el-icon-search" @click="getDataList()">查 询</el-button>
             </el-form-item>
             <el-form-item>
-              <el-button
-                v-if="isAuth('sys:role:save')"
-                type="primary"
+              <el-button icon="el-icon-circle-close" @click="clearAll()">清 空</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-header>
+      <el-main>
+        <div class="rect rect-table">
+          <!-- 新增 删除按钮 -->
+          <el-form inline size="mini">
+            <el-form-item>
+              <el-button 
+                icon="el-icon-plus" 
                 @click="addOrUpdateHandle()">
-                新增
+                新 增
               </el-button>
             </el-form-item>
             <el-form-item>
-              <el-button
-                v-if="isAuth('sys:role:delete')"
-                type="danger"
-                @click="deleteHandle()"
+              <el-button 
+                icon="el-icon-delete" 
+                type="danger" 
+                @click="deleteHandle()" 
                 :disabled="selectionDataList.length <= 0">
-                批量删除
+                删 除
               </el-button>
             </el-form-item>
           </el-form>
-        </div>
-      </el-header>
-      <el-main>
-        <div class="rect rect-table">
           <el-table
-            height="670"
+            height="540"
             :data="dataList"
             @selection-change="selectionChangeHandle"
             v-loading="dataListLoading"
@@ -82,16 +87,14 @@
               label="操作">
               <template slot-scope="scope">
                 <el-button
-                  v-if="isAuth('sys:user:update')"
                   type="text"
-                  size="mini"
+                  size="small"
                   @click="addOrUpdateHandle(scope.row)">
                   修改
                 </el-button>
                 <el-button
-                  v-if="isAuth('sys:user:delete')"
                   type="text"
-                  size="mini"
+                  size="small"
                   @click="deleteHandle(scope.row.id)">
                   删除
                 </el-button>
@@ -113,17 +116,19 @@
             :title="!form.id ? '新增' : '修改'"
             :close-on-click-modal="false"
             :visible.sync="visible"
-            @close="cancel">
+            @close="cancel"
+            width="600px">
             <el-form
               :rules="dataRule"
               :model="form"
               ref="form"
               @keyup.enter.native="formSubmit()"
-              label-width="80px">
-              <el-form-item label="所属牧场" prop="pastureId">
-                <el-select v-model="form.pastureId" placeholder="请选择所属牧场" style="width: 100%">
+              label-width="80px"
+              style="margin-left: 20px;width: 500px">
+              <el-form-item label="所属牧场" prop="farmId">
+                <el-select v-model="form.farmId" placeholder="请选择所属牧场" style="width: 100%">
                   <el-option
-                    v-for="item in pastureList"
+                    v-for="item in farmList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
@@ -145,8 +150,8 @@
               </el-form-item>
             </el-form>
             <span slot="footer" class="dialog-footer">
-              <el-button @click="cancel">关闭</el-button>
-              <el-button type="primary" @click="formSubmit()">确定</el-button>
+              <el-button size="mini" @click="cancel">关闭</el-button>
+              <el-button size="mini" type="primary" @click="formSubmit()">确定</el-button>
             </span>
           </el-dialog>
         </div>
@@ -181,14 +186,14 @@ export default {
       form: {
         id: "",
         number: "",
-        pastureId: "",
+        farmId: "",
         feederId: "",
       },
-      pastureList: [], // 牧场list
+      farmList: [], // 牧场list
       employeeList: [], // 养殖员list
       // TODO: 猪舍编号长度
       dataRule: {
-        pastureId: [
+        farmId: [
           { required: true, message: '所属牧场不能为空', trigger: 'blur' }
         ],
         number: [
@@ -216,11 +221,11 @@ export default {
           keywords: this.dataForm.key
         })
       }).then(async ({ data }) => {
-        let pastureResult = await this.$http({
+        let farmResult = await this.$http({
           url: this.$http.adornUrl("/management/farm/findAll"),
           method: "post"
         });
-        pastureResult.data.all && (this.pastureList = pastureResult.data.all)
+        farmResult.data.all && (this.farmList = farmResult.data.all)
         let employeeResult = await this.$http({
           url: this.$http.adornUrl("/management/employee/findAll"),
           method: "post"
@@ -231,9 +236,9 @@ export default {
           this.dataList = data.page.list;
           this.totalPage = data.page.totalCount;
           this.dataList.forEach((item) => {
-            for (let pasture of this.pastureList) {
-              if (item.pastureId === pasture.id) {
-                item["name"] = pasture.name;
+            for (let farm of this.farmList) {
+              if (item.farmId === farm.id) {
+                item["name"] = farm.name;
                 break;
               }
             }
@@ -252,6 +257,10 @@ export default {
         this.dataListLoading = false
       })
     },
+    // 清空查询内容
+    clearAll () {
+      this.dataForm.key = ''
+    },
     // 每页数
     sizeChangeHandle(val) {
       this.pageSize = val;
@@ -275,11 +284,11 @@ export default {
       }
       // 获取牧场
       this.$http({
-        url: this.$http.adornUrl("/management/pasture/findAll"),
+        url: this.$http.adornUrl("/management/farm/findAll"),
         method: "post"
       }).then(async ({ data }) => {
         if (data && data.code === 0) {
-          this.pastureList = data.all
+          this.farmList = data.all
           // 获取养殖员
           let employeeResult = await this.$http({
             url: this.$http.adornUrl("/management/employee/findAll"),
@@ -362,7 +371,7 @@ export default {
           data: this.$http.adornData({
             id: this.form.id,
             number: this.form.number,
-            pastureId: this.form.pastureId,
+            farmId: this.form.farmId,
             feederId: this.form.feederId,
           }),
         }).then((result) => {
@@ -377,15 +386,15 @@ export default {
           } else {
             if (result.data.code === 600) {
               let msg = result.data.msg.split('-')
-              let pasture = ''
-              for (let item of this.pastureList) {
-                if (this.form.pastureId === item.id) {
-                  pasture = item.name
+              let farm = ''
+              for (let item of this.farmList) {
+                if (this.form.farmId === item.id) {
+                  farm = item.name
                   break
                 }
               }
               this.$message({
-                message: `${pasture}中猪舍编号 <p style="color:#333; display:inline">${msg[0]}</p> 已经存在！`,
+                message: `${farm}中猪舍编号 <p style="color:#333; display:inline">${msg[0]}</p> 已经存在！`,
                 type: "error",
                 duration: 1000,
                 dangerouslyUseHTMLString: true
@@ -411,7 +420,7 @@ export default {
           method: "post",
           data: this.$http.adornData({
             number: this.form.number,
-            farmId: this.form.pastureId,
+            farmId: this.form.farmId,
             feederId: this.form.feederId,
           }),
         }).then((result) => {
@@ -430,15 +439,15 @@ export default {
           } else {
             if (result.data.code === 600) {
               let msg = result.data.msg.split('-')
-              let pasture = ''
-              for (let item of this.pastureList) {
-                if (this.form.pastureId === item.id) {
-                  pasture = item.name
+              let farm = ''
+              for (let item of this.farmList) {
+                if (this.form.farmId === item.id) {
+                  farm = item.name
                   break
                 }
               }
               this.$message({
-                message: `${pasture}中猪舍编号 <p style="color:#333; display:inline">${msg[0]}</p> 已经存在！`,
+                message: `${farm}中猪舍编号 <p style="color:#333; display:inline">${msg[0]}</p> 已经存在！`,
                 type: "error",
                 duration: 1000,
                 dangerouslyUseHTMLString: true

src/views/modules/basic/treat.vue

@@ -0,0 +1,482 @@
+<template>
+  <div class="bpighouse">
+    <div class="rect rect-table">
+      <!-- 新增 删除按钮 -->
+      <el-form inline size="mini">
+        <el-form-item>
+          <el-button 
+            icon="el-icon-plus" 
+            @click="addOrUpdateHandle()">
+            新 增
+          </el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button 
+            icon="el-icon-delete" 
+            type="danger" 
+            @click="deleteHandle()" 
+            :disabled="selectionDataList.length <= 0">
+            删 除
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        height="620"
+        :data="dataList"
+        @selection-change="selectionChangeHandle"
+        v-loading="dataListLoading"
+        style="width: 100%"
+        size="mini"
+        border
+        stripe
+        :header-cell-style="{background:'rgb(245,245,245)',color:'#000',height: '45px',fontSize: '13px',fontWeight: 'normal',borderBottom: '1px solid #ccc'}" 
+        :cell-style="{color: '#888',fontSize: '13px'}">
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50">
+        </el-table-column>
+        <el-table-column
+          prop="diseaseCode"
+          header-align="center"
+          align="center"
+          label="疾病名称">
+        </el-table-column>
+        <el-table-column
+          prop="medicantName"
+          header-align="center"
+          align="center"
+          label="药物名称">
+        </el-table-column>
+        <el-table-column
+          prop="medicantUsage"
+          header-align="center"
+          align="center"
+          label="药物用法">
+        </el-table-column>
+        <el-table-column
+          prop="description"
+          header-align="center"
+          align="center"
+          label="描述">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="small"
+              @click="addOrUpdateHandle(scope.row)">
+              修改
+            </el-button>
+            <el-button
+              type="text"
+              size="small"
+              @click="deleteHandle(scope.row.id)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="block">
+        <el-pagination
+          @size-change="sizeChangeHandle"
+          @current-change="currentChangeHandle"
+          :current-page="pageIndex"
+          :page-sizes="[10, 20, 30, 50, 100]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="totalPage">
+        </el-pagination>
+      </div>
+      <el-dialog
+        :title="!form.id ? '新增' : '修改'"
+        :close-on-click-modal="false"
+        :visible.sync="visible"
+        @close="cancel"
+        width="600px">
+        <el-form
+          :rules="dataRule"
+          :model="form"
+          ref="form"
+          @keyup.enter.native="formSubmit()"
+          label-width="80px"
+          size="mini"
+          style="margin-left: 20px;width: 500px">
+          <el-form-item label="疾病名称" prop="diseaseCode">
+            <el-input v-model="form.diseaseCode"></el-input>
+          </el-form-item>
+          <el-form-item label="药物名称" prop="medicantName">
+            <el-input v-model="form.medicantName"></el-input>
+          </el-form-item>
+          <el-form-item label="药物用法" prop="medicantUsage">
+            <el-input v-model="form.medicantUsage"></el-input>
+          </el-form-item>
+          <el-form-item label="描述" prop="description">
+            <el-input v-model="form.description"></el-input>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button size="mini" @click="cancel">关闭</el-button>
+          <el-button size="mini" type="primary" @click="formSubmit()">确定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dataForm: {
+        key: "",
+      },
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      selectionDataList: [],
+      visible: false,
+      form: {
+        id: "",
+        diseaseCode: "",
+        medicantName: "",
+        medicantUsage: '',
+        description: ''
+      },
+      // TODO: 猪舍编号长度
+      dataRule: {
+        diseaseCode: [
+          { required: true, message: '疾病名称不能为空', trigger: 'blur' }
+        ],
+        medicantName: [
+          { required: true, message: '药物名称不能为空', trigger: ['blur'] }
+        ],
+        medicantUsage: [
+          { required: true, message: '药物用法不能为空', trigger: ['blur'] }
+        ],
+        // description: [
+        //   { required: true, message: '产地不能为空', trigger: ['blur'] }
+        // ]
+      }
+    }
+  },
+  mounted() {
+    this.getDataList();
+  },
+  methods: {
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      this.$http({
+        url: this.$http.adornUrl("/management/healthtreatmentplan/list"),
+        method: "post",
+        params: this.$http.adornParams({
+          page: this.pageIndex,
+          limit: this.pageSize
+        })
+      }).then( ({ data }) => {
+        if (data && data.code === 0) {
+          console.log(data.page.list);
+          this.dataList = data.page.list;
+          this.totalPage = data.page.totalCount;
+        } else {
+          this.dataList = []
+          this.totalPage = 0
+        }
+        this.dataListLoading = false
+      })
+    },
+    // 清空查询内容
+    clearAll () {
+      this.dataForm.key = ''
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 新增 or 修改牧场
+    addOrUpdateHandle(row) {
+      // 显示猪舍新增 or 修改面板
+      this.visible = true;
+      if (row) {
+        this.form.id = row.id
+        for (let key of Object.keys(this.form)) {
+          this.form[key] = row[key]
+        }
+      }
+      console.log(row);
+      console.log(this.form);
+    },
+    // 选择n个牧场
+    selectionChangeHandle(val) {
+      this.selectionDataList = [];
+      val.forEach((item) => {
+        this.selectionDataList.push(item.id);
+      });
+    },
+    // 删除n个牧场
+    deleteHandle(id) {
+      this.$confirm(`确定删除治疗方案？`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+      .then(() => {
+        // 删除操作
+        if (id) {
+          this.selectionDataList.push(id);
+        }
+        if (this.selectionDataList.length <= 0) {
+          return;
+        }
+        this.$http({
+          url: this.$http.adornUrl("/management/healthtreatmentplan/delete"),
+          method: "post",
+          data: this.$http.adornData(this.selectionDataList, false),
+        }).then((result) => {
+          console.log(result);
+          if (result.data.code === 0) {
+            this.$message({
+              message: "成功删除品种",
+              type: "success",
+              duration: 1000,
+            })
+            // pageIndex修正
+            this.totalPage -= this.selectionDataList.length
+            let pages = Math.ceil(this.totalPage / this.pageSize)
+            this.pageIndex = this.pageIndex > pages? pages: this.pageIndex
+            this.pageIndex = this.pageIndex < 1? pages: this.pageIndex
+          } else {
+            // this.$message.error('删除失败：' + result.data.msg)
+            this.$confirm(result.data.msg, '删除失败', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              console.log('猪舍编号输入不合法')
+            }).catch(() => {})
+          }
+          this.resetForm();
+          this.selectionDataList = [];
+        });
+      })
+      .catch(() => {});
+    },
+    formSubmit() {
+      if (this.form.id) {
+        /** 修改 */
+        // 输入是否完整
+        // if (!this.confirmComplete()) {
+        //   return
+        // }
+        // 输入是否合法
+        // if (!this.confirmInput()) {
+        //   return
+        // }
+          // 进行修改操作
+        this.$http({
+          url: this.$http.adornUrl("/management/healthtreatmentplan/update"),
+          method: "post",
+          data: this.$http.adornData({
+            id: this.form.id,
+            diseaseCode: this.form.diseaseCode,
+            medicantName: this.form.medicantName,
+            medicantUsage: this.form.medicantUsage,
+            description: this.form.description
+          }),
+        }).then((result) => {
+          if (result.data.code === 0) {
+            this.resetForm();
+            this.visible = false;
+            this.$message({
+              message: "成功修改治疗方案信息",
+              type: "success",
+              duration: 1000,
+            })
+          } else {
+            this.$message.error("修改治疗方案信息失败");
+          }
+        })
+      } else {
+        /** 新增 */
+        // 输入是否完整
+        // if (!this.confirmComplete(1)) {
+        //   return
+        // }
+        // 输入是否合法
+        // if (!this.confirmInput()) {
+        //   return
+        // }
+        // 进行新增操作
+        this.$http({
+          url: this.$http.adornUrl("/management/healthtreatmentplan/save"),
+          method: "post",
+          data: this.$http.adornData({
+            diseaseCode: this.form.diseaseCode,
+            medicantName: this.form.medicantName,
+            medicantUsage: this.form.medicantUsage,
+            description: this.form.description
+          }),
+        }).then((result) => {
+          if (result.data.code === 0) {
+            // 新增pageIndex的修正
+            this.totalPage++
+            let pages = Math.ceil(this.totalPage / this.pageSize)
+            this.pageIndex = this.pageIndex < pages? pages: this.pageIndex
+            this.resetForm();
+            this.visible = false;
+            this.$message({
+              message: "成功添加治疗方案",
+              type: "success",
+              duration: 1000,
+            });
+          } else {
+            this.$message.error("添加治疗方案失败");
+          }
+        })
+      }
+    },
+    // 清空form
+    resetForm() {
+      for (let i in this.form) {
+        this.form[i] = "";
+      }
+      this.getDataList();
+    },
+    // 取消
+    cancel() {
+      this.visible = false
+      // 如果新增，则不保留form
+      if (this.form.id) {
+        this.resetForm()
+      }
+    },
+    // 校验输入是否完整
+    validComplete (val) {
+      val && (delete this.form.id)
+      for (let i in this.form) {
+        if (!this.form[i].toString()) {
+          return false
+        }
+      }
+      return true
+    },
+    // 如不完整，则提示
+    confirmComplete (val) {
+      if (this.validComplete(val)) {
+        return true
+      }
+      this.$confirm(`请输入完整`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log('牧场输入不完整')
+      }).catch(() => {})
+      return false
+    },
+    // 校验输入是否合法，此处只校验猪舍编号
+    validInput () {
+      // 只允许中文、英文、数字、-、_的输入，取反
+      const reg = /[^\a-\z\A-\Z0-9\u4E00-\u9FA5\_\-]/g
+      if (reg.test(this.form.number)) {
+        return false
+      }
+      return true
+    },
+    // 如不合法，则提示
+    confirmInput () {
+      if (this.validInput()) {
+        return true
+      }
+      this.$confirm(`只允许输入中英文、数字、-与_`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log('猪舍编号输入不合法')
+      }).catch(() => {})
+      return false
+    },
+    getchange (val) {
+      console.log(val);
+    },
+    // 变色
+    tableRowClassName({row, rowIndex}) {
+      console.log(row);
+      if (rowIndex%2 === 0) {
+        return 'warning-row';
+      }
+      return '';
+    }
+    // TODO: 猪舍编号的长度校验
+  }
+}
+</script>
+<style scoped>
+.rect {
+  background-color: #fff;
+  padding: 30px 15px;
+  border-radius: 5px;
+  border: 1px solid #e8e8e8;
+  margin-left: 20px;
+}
+.rect-form {
+  padding-bottom: 10px;
+}
+/* .rect-table {
+  margin-top: 20px;
+} */
+.demo-table-expand {
+  font-size: 0;
+  margin-left: 40px;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 80%;
+}
+.el-table .height {
+  background: rgba(254, 254, 254, 0.5);
+}
+/deep/ .el-table--mini td, .el-table--mini th {
+  padding: 3px 0 !important;
+  height: 20px !important;
+}
+/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
+  color: rgb(24,144,255);
+  background-color: rgb(24,144,255);
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: rgb(24,144,255);
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table .el-checkbox__inner:hover {
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table #select .cell .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: rgb(24,144,255);
+  border-color: rgb(24,144,255);
+}
+</style>

src/views/modules/basic/unit.vue

@@ -0,0 +1,604 @@
+<template>
+  <div class="bunit">
+    <el-container>
+      <el-header>
+        <div class="rect rect-form">
+          <el-form
+            :inline="true"
+            :model="dataForm"
+            @keyup.enter.native="getDataList()"
+            size="mini">
+            <el-form-item style="width: 500px">
+              <el-input
+                v-model="dataForm.key"
+                placeholder="请输入单元编号/猪舍/牧场"
+                clearable style="width: 500px">
+              </el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button icon="el-icon-search" @click="getDataList()">查 询</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button icon="el-icon-circle-close" @click="clearAll()">清 空</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-header>
+      <el-main>
+        <div class="rect rect-table">
+          <!-- 新增 删除按钮 -->
+          <el-form inline size="mini">
+            <el-form-item>
+              <el-button 
+                icon="el-icon-plus" 
+                @click="addOrUpdateHandle()">
+                新 增
+              </el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button 
+                icon="el-icon-delete" 
+                type="danger" 
+                @click="deleteHandle()" 
+                :disabled="selectionDataList.length <= 0">
+                删 除
+              </el-button>
+            </el-form-item>
+          </el-form>
+          <el-table
+            height="540"
+            :data="dataList"
+            @selection-change="selectionChangeHandle"
+            v-loading="dataListLoading"
+            style="width: 100%"
+            size="mini"
+            border
+            stripe
+            :header-cell-style="{background:'rgb(245,245,245)',color:'#000',height: '45px',fontSize: '13px',fontWeight: 'normal',borderBottom: '1px solid #ccc'}" 
+            :cell-style="{color: '#888',fontSize: '13px'}">
+            <el-table-column
+              type="selection"
+              header-align="center"
+              align="center"
+              width="50">
+            </el-table-column>
+            <el-table-column
+              prop="number"
+              header-align="center"
+              align="center"
+              label="单元编号">
+            </el-table-column>
+            <el-table-column
+              prop="phNumber"
+              header-align="center"
+              align="center"
+              label="所属猪舍">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              header-align="center"
+              align="center"
+              label="所属牧场">
+            </el-table-column>
+            <el-table-column
+              fixed="right"
+              header-align="center"
+              align="center"
+              label="操作">
+              <template slot-scope="scope">
+                <el-button
+                  type="text"
+                  size="small"
+                  @click="addOrUpdateHandle(scope.row)">
+                  修改
+                </el-button>
+                <el-button
+                  type="text"
+                  size="small"
+                  @click="deleteHandle(scope.row.id)">
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="block">
+            <el-pagination
+              @size-change="sizeChangeHandle"
+              @current-change="currentChangeHandle"
+              :current-page="pageIndex"
+              :page-sizes="[10, 20, 30, 50, 100]"
+              :page-size="pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="totalPage">
+            </el-pagination>
+          </div>
+          <el-dialog
+            :title="!form.id ? '新增' : '修改'"
+            :close-on-click-modal="false"
+            :visible.sync="visible"
+            @close="cancel"
+            width="600px">
+            <el-form 
+              style="margin-left: 20px;width: 500px" 
+              :model="form" ref="form" 
+              @keyup.enter.native="formSubmit()" 
+              label-width="80px" 
+              :rules="dataRule"
+              size="mini">
+              <el-form-item label="所属牧场" prop="farmId">
+                <el-select v-model="form.farmId" placeholder="请选择所属牧场" @change="getPasture" style="width: 100%">
+                  <el-option
+                    v-for="item in farmList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="所属猪舍" prop="pigstyId">
+                <el-select v-model="form.pigstyId" placeholder="请选择所属猪舍" @change="getPigsty" style="width: 100%">
+                  <el-option
+                    v-for="item in phSelectedList"
+                    :key="item.id"
+                    :label="item.number"
+                    :value="item.id">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="单元编号" prop="number">
+                <el-input v-model="form.number" placeholder="请输入单元编号"></el-input>
+              </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+              <el-button size="mini" @click="cancel">关闭</el-button>
+              <el-button size="mini" type="primary" @click="formSubmit()">确定</el-button>
+            </span>
+          </el-dialog>
+        </div>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      dataForm: {
+        key: ''
+      },
+      dataList: [
+        {
+          id: '',
+          number: '',
+          phNumber: '',
+          name: '',
+        }
+      ],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      selectionDataList: [],
+      visible: false,
+      form: {
+        id: '',
+        number: '',
+        farmId: '',
+        pigstyId: ''
+      },
+      farmList: [], // 牧场list
+      pighouseList: [], // 猪舍list
+      phSelectedList: [], // 选择过牧场后的猪舍list
+      dataRule: {
+        farmId: [
+          { required: true, message: '所属牧场不能为空', trigger: 'blur' }
+        ],
+        pigstyId: [
+          { required: true, message: '所属猪舍不能为空', trigger: 'blur' }
+        ],
+        number: [
+          { required: true, message: '单元编号不能为空', trigger: ['blur', 'change'] }
+          // TODO: 单元编号长度校验
+          // TODO: 单元编号正则校验
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.getDataList()
+  },
+  methods: {
+    // 获取数据列表
+    getDataList () {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/management/unit/list'),
+        method: 'post',
+        params: this.$http.adornParams({
+          page: 1,
+          limit: 10,
+          keywords: this.dataForm.key
+        })
+      }).then(async ({ data }) => {
+        // 获取所有牧场
+        let farmResult = await this.$http({
+          url: this.$http.adornUrl('/management/farm/findAll'),
+          method: 'post'
+        })
+        farmResult.data.all && (this.farmList = farmResult.data.all)
+        // 获取所有猪舍
+        let pighouseResult = await this.$http({
+          url: this.$http.adornUrl('/management/pigsty/findAll'),
+          method: 'post'
+        })
+        pighouseResult.data.all && (this.pighouseList = pighouseResult.data.all)
+        if (data && data.code === 0) {
+          this.dataList = data.page.list
+          this.totalPage = data.page.totalCount
+          // 牧场对应
+          this.dataList.forEach(item => {
+            for (let farm of this.farmList) {
+              if (item.farmId === farm.id) {
+                item.name = farm.name
+                break
+              }
+            }
+          });
+          // 猪舍对应
+          this.dataList.forEach(item => {
+            for (let pighouse of this.pighouseList) {
+              if (item.pigstyId === pighouse.id) {
+                item.phNumber = pighouse.number
+                break
+              }
+            }
+          });
+          this.phSelectedList = this.pighouseList
+          console.log(this.dataList);
+        } else {
+          this.dataList = []
+          this.totalPage = 0
+        }
+        this.dataListLoading = false
+      })
+    },
+    // 清空查询内容
+    clearAll () {
+      this.dataForm.key = ''
+    },
+    // 每页数
+    sizeChangeHandle (val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+    // 当前页
+    currentChangeHandle (val) {
+      this.pageIndex = val
+      this.getDataList()
+    },
+    // 获取到了牧场 → 限制猪舍
+    getPasture (val) {
+      this.phSelectedList = []
+      this.pighouseList.forEach(item => {
+        if (item.farmId === val) {
+          this.phSelectedList.push(item)
+        }
+      });
+      // 如果已有选中的猪舍，且该猪舍不属于该牧场，则清空猪舍选择
+      let i;
+      for (i = 0; i < this.phSelectedList.length; i++) {
+        let item = this.phSelectedList[i];
+        if (item.id === this.form.pigstyId) {
+          break
+        }
+      }
+      if (i === this.phSelectedList.length) {
+        this.form.pigstyId = ''
+      }
+    },
+    // 获取到猪舍
+    getPigsty (val) {
+      //  → 反向确定牧场
+      for (let item of this.pighouseList) {
+        if (item.id === val) {
+          this.form.farmId = item.farmId
+          break
+        }
+      }
+      // → 先获取猪舍，没有确定牧场的情况下，限制猪舍
+      this.phSelectedList = []
+      this.pighouseList.forEach(item => {
+        if (item.farmId === this.form.farmId) {
+          this.phSelectedList.push(item)
+        }
+      });
+    },
+    // 新增 or 修改单元
+    addOrUpdateHandle (row) {
+      // 显示牧场新增 or 修改面板
+      this.visible = true
+      if (row) {
+        for (let key of Object.keys(this.form)) {
+          this.form[key] = row[key]
+        }
+        this.form.id = row.id
+      }
+      // 解决猪舍、牧场已删除，但该页面仍不变问题
+      this.$http({
+        url: this.$http.adornUrl("/management/farm/findAll"),
+        method: "post"
+      }).then(async ({ data }) => {
+        if (data && data.code === 0) {
+          this.farmList = data.all
+          // 获取猪舍
+          let pighouseResult = await this.$http({
+            url: this.$http.adornUrl('/management/pigsty/findAll'),
+            method: 'post'
+          })
+          pighouseResult.data.all && (this.pighouseList = pighouseResult.data.all)
+          this.phSelectedList = this.pighouseList
+          console.log(this.pighouseList);
+        }
+      })
+    },
+    // 选择n个牧场
+    selectionChangeHandle (val) {
+      this.selectionDataList = []
+      val.forEach(item => {
+        this.selectionDataList.push(item.id)
+      });
+    },
+    // 删除n个牧场
+    deleteHandle (id) {
+      this.$confirm(`确定删除单元？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 删除操作
+        if (id) {
+          this.selectionDataList.push(id)
+        }
+        if (this.selectionDataList.length <= 0) {
+          return
+        }
+        this.$http({
+          url: this.$http.adornUrl('/management/unit/delete'),
+          method: 'post',
+          data: this.$http.adornData(this.selectionDataList, false)
+        }).then(result => {
+          console.log(result);
+          if (result.data.code === 0) {
+            this.resetForm()
+            this.$message({
+              message: '成功删除单元',
+              type: 'success',
+              duration: 1000
+            })
+            // pageIndex修正
+            this.totalPage -= this.selectionDataList.length
+            let pages = Math.ceil(this.totalPage / this.pageSize)
+            this.pageIndex = this.pageIndex > pages? pages: this.pageIndex
+            this.pageIndex = this.pageIndex < 1? pages: this.pageIndex
+          } else {
+            this.$message.error('删除单元失败');
+          }
+          this.selectionDataList = []
+        })
+      }).catch(() => {})
+    },
+    formSubmit () {
+      if (this.form.id) {
+        /** 修改 */
+        // 输入是否完整
+        if (!this.confirmComplete()) {
+          return
+        }
+        // 输入是否合法
+        if (!this.confirmInput()) {
+          return
+        }
+        // 进行修改操作
+        this.$http({
+          url: this.$http.adornUrl('/management/unit/update'),
+          method: 'post',
+          data: this.$http.adornData({
+            id: this.form.id,
+            number: this.form.number,
+            farmId: this.form.farmId,
+            pigstyId: this.form.pigstyId
+          })
+        }).then(result => {
+          if (result.data.code === 0) {
+            // 新增pageIndex的修正
+            this.totalPage++
+            let pages = Math.ceil(this.totalPage / this.pageSize)
+            this.pageIndex = this.pageIndex < pages? pages: this.pageIndex
+            this.resetForm();
+            this.visible = false;
+            this.$message({
+              message: '成功修改单元信息',
+              type: 'success',
+              duration: 1000
+            })
+          } else {
+            if (result.data.code === 600) {
+              let msg = result.data.msg.split('-')
+              this.$message({
+                message: `单元编号 <p style="color:#333; display:inline">${msg[0]}</p> 已经存在！`,
+                type: "error",
+                duration: 1000,
+                dangerouslyUseHTMLString: true
+              })
+              return
+            }
+            this.$message.error('修改单元信息失败');
+          }
+        })
+      } else {
+        /** 新增 */
+        // 输入是否完整
+        if (!this.confirmComplete(1)) {
+          return
+        }
+        // 输入是否合法
+        if (!this.confirmInput()) {
+          return
+        }
+        // 进行新增操作
+        this.$http({
+          url: this.$http.adornUrl('/management/unit/save'),
+          method: 'post',
+          data: this.$http.adornData({
+            number: this.form.number,
+            farmId: this.form.farmId,
+            pigstyId: this.form.pigstyId
+          })
+        }).then(result => {
+          if (result.data.code === 0) {
+            this.resetForm();
+            this.visible = false;
+            this.$message({
+              message: '成功添加单元',
+              type: 'success',
+              duration: 1000
+            })
+          } else {
+            if (result.data.code === 600) {
+              let msg = result.data.msg.split('-')
+              this.$message({
+                message: `单元编号 <p style="color:#333; display:inline">${msg[0]}</p> 已经存在！`,
+                type: "error",
+                duration: 1000,
+                dangerouslyUseHTMLString: true
+              })
+              return
+            }
+            this.$message.error('添加失败');
+          }
+        })
+      }
+    },
+    // 清空form
+    resetForm () {
+      for (let i in this.form) {
+        this.form[i] = ''
+      }
+      this.getDataList()
+    },
+    // 取消
+    cancel () {
+      this.visible = false
+      // 如果新增，则不保留form
+      if (this.form.id) {
+        this.resetForm()
+      }
+    },
+    // 校验输入是否完整
+    validComplete (val) {
+      val && (delete this.form.id)
+      console.log(this.form);
+      for (let i in this.form) {
+        if (!this.form[i].toString()) {
+          return false
+        }
+      }
+      return true
+    },
+    // 如不完整，则提示
+    confirmComplete (val) {
+      if (this.validComplete(val)) {
+        return true
+      }
+      this.$confirm(`请输入完整`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log('牧场输入不完整')
+      }).catch(() => {})
+      return false
+    },
+    // 校验输入是否合法，此处只校验单元序号
+    validInput () {
+      // 只允许中文、英文、数字、-、_的输入，取反
+      const reg = /[^\a-\z\A-\Z0-9\u4E00-\u9FA5\_\-]/g
+      if (reg.test(this.form.number)) {
+        return false
+      }
+      return true
+    },
+    // 如不合法，则提示
+    confirmInput () {
+      if (this.validInput()) {
+        return true
+      }
+      this.$confirm(`只允许输入中英文、数字、-与_`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log('单元序号输入不合法')
+      }).catch(() => {})
+      return false
+    },
+    getchange (val) {
+      console.log(val);
+    }
+  }
+}
+</script>
+<style scoped>
+.rect {
+  background-color: #fff;
+  padding: 30px 15px;
+  border-radius: 5px;
+  border: 1px solid #e8e8e8;
+}
+.rect-form {
+  padding-bottom: 10px;
+}
+.rect-table {
+  margin-top: 20px;
+}
+.demo-table-expand {
+  font-size: 0;
+  margin-left: 40px;
+}
+.demo-table-expand label {
+  width: 90px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 80%;
+}
+.el-table .height {
+  background: rgba(254, 254, 254, 0.5);
+}
+/deep/ .el-table--mini td, .el-table--mini th {
+  padding: 3px 0 !important;
+  height: 20px !important;
+}
+/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
+  color: rgb(24,144,255);
+  background-color: rgb(24,144,255);
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: rgb(24,144,255);
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table .el-checkbox__inner:hover {
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: rgb(24,144,255);
+}
+/deep/.el-table #select .cell .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: rgb(24,144,255);
+  border-color: rgb(24,144,255);
+}
+</style>

src/views/modules/breed/bfeed.vue

@@ -140,14 +140,14 @@
       getDataList () {
         this.dataListLoading = true
         this.$http({
-          url: this.$http.adornUrl('/sys/role/list'),
+          url: this.$http.adornUrl('/management/breedfeedweighe/list'),
           method: 'get',
           params: this.$http.adornParams({
             'page': this.pageIndex,
-            'limit': this.pageSize,
-            'roleName': this.dataForm.roleName
+            'limit': this.pageSize
           })
         }).then(({data}) => {
+          console.log(data);
           if (data && data.code === 0) {
             this.dataList = data.page.list
             this.totalPage = data.page.totalCount

src/views/modules/envir/eindoor.vue

@@ -44,12 +44,18 @@
               </el-date-picker>
             </el-form-item>
             <el-form-item>
-              <el-button @click="getDataList()" icon="el-icon-search">查 询</el-button>
+              <el-button 
+                @click="getDataList()" 
+                icon="el-icon-search">
+                查 询
+              </el-button>
             </el-form-item>
             <el-form-item>
               <el-button 
                 icon="el-icon-circle-close"
-                @click="clearAll">清 空</el-button>
+                @click="clearAll">
+                清 空
+              </el-button>
             </el-form-item>
           </el-form>
         </div>