anotherVersion/src/views/modules/breed/btransfer.vue

<template>
  <div class="mod-role">
    <el-container>
      <!-- form表单 -->
      <el-header>
        <div class="rect rect-form">
          <el-form :inline="true" :model="form" size="mini" ref="form">
            <el-form-item>
              <el-input v-model="form.eartag" placeholder="耳标" clearable></el-input>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select placeholder="性别" v-model="form.sex">
                <el-option
                  v-for="item in gender"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select placeholder="品种" v-model="form.breed">
                <el-option
                  v-for="item in breedList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select placeholder="健康状态" v-model="form.healthStatus">
                <el-option
                  v-for="item in healthStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select placeholder="养殖状态" v-model="form.outFenceStatus">
                <el-option
                  v-for="item in outFenceStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select 
                placeholder="猪舍" 
                v-model="form.pigstyId">
                <el-option
                  v-for="item in pigstyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select 
                placeholder="单元" 
                v-model="form.unitId" 
                ref="unit"
                @focus="selectFocus('unit')">
                <el-option
                  v-for="item in unitSelectedList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select 
                placeholder="栏期" 
                v-model="form.periodId" 
                ref="period" 
                @focus="selectFocus('period')">
                <el-option
                  v-for="item in periodSelectedList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <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>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <!-- role表格 -->
      <el-main>
        <div class="rect rect-table">
          <!-- 新增 删除按钮 -->
          <el-form inline size="mini">
            <!-- <el-form-item>
              <el-button 
                icon="el-icon-refresh" 
                @click="addOrUpdateHandle()">
                转栏
              </el-button>
            </el-form-item> -->
            <!-- <el-form-item>
              <el-button 
                icon="el-icon-delete" 
                type="danger" 
                @click="deleteHandle()" 
                :disabled="dataListSelections.length <= 0">
                删 除
              </el-button>
            </el-form-item> -->
            <el-form-item>
              <el-button 
                icon="el-icon-refresh" 
                type="danger" 
                @click="addOrUpdateHandle()" 
                :disabled="dataListSelections.length <= 0">
                转 栏
              </el-button>
            </el-form-item>
          </el-form>
          
          <el-table
            :data="dataList"
            border
            stripe
            v-loading="dataListLoading"
            @selection-change="selectionChangeHandle"
            style="width: 100%;"
            size="mini"
            height="540"
            :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="id"
              header-align="center"
              align="center"
              label="id"
              width="80">
            </el-table-column>
            <el-table-column
              prop="eartag"
              header-align="center"
              align="center"
              label="耳标">
            </el-table-column>
            <el-table-column
              prop="sex"
              header-align="center"
              align="center"
              label="性别"
              width="80">
            </el-table-column>
            <el-table-column
              prop="birthday"
              header-align="center"
              align="center"
              label="出生日期">
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="健康状态"
              width="100">
              <template slot-scope="scope">
                <span>{{scope.row.healthStatus? '健康': '不健康'}}</span>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="养殖状态"
              width="100">
              <template slot-scope="scope">
                <span>{{scope.row.outFenceStatus? '出栏': '育肥'}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="breed"
              header-align="center"
              align="center"
              label="品种"
              width="100">
            </el-table-column>
            <el-table-column
              prop="pigstyName"
              header-align="center"
              align="center"
              label="猪舍">
            </el-table-column>
            <el-table-column
              prop="unitName"
              header-align="center"
              align="center"
              label="单元">
            </el-table-column>
            <el-table-column
              prop="periodName"
              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="medium"
                  style="color: rgb(24,144,255)">
                  查看
                </el-button> -->
                <el-button
                  type="text"
                  size="medium"
                  @click="addOrUpdateHandle(scope.row)"
                  style="color: rgb(24,144,255)">
                  转栏
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
          <!-- 弹窗, 新增 / 修改 -->
          <update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></update>
        </div>
      </el-main>
      
      
    </el-container>
  </div>
</template>

<script>
  import Update from './btransfer-update'
  export default {
    data () {
      return {
        form: {
          eartag: '',
          sex: '',
          breed: '',
          healthStatus: '',
          outFenceStatus: '',
          periodId: '',
          pigstyId: '',
          unitId: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        farmId: undefined,
        gender: [
          {
            value: '公',
            label: '公'
          },
          {
            value: '母',
            label: '母'
          }
        ],
        breedList: [],
        healthStatus: [
          {
            value: 1,
            label: '健康'
          },
          {
            value: 0,
            label: '不健康'
          }
        ],
        outFenceStatus: [
          {
            value: 0,
            label: '育肥'
          },
          {
            value: 1,
            label: '出栏'
          }
        ],
        periodList: [], // 所有栏期
        periodSelectedList: [], // 根据栋舍限制的栏期
        pigstyList: [], // 所有猪舍
        unitList: [], // 所有单元
        unitSelectedList: [], // 根据栋舍限制的单元
        labelPosition: 'right'
      }
    },
    components: {
      Update
    },
    activated () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/management/yearpigbase/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'eartag': this.form.eartag || undefined,
            'sex': this.form.sex || undefined,
            'breed': this.form.breed || undefined,
            'healthStatus': this.form.healthStatus || undefined,
            'outFenceStatus': this.form.outFenceStatus || undefined,
            'periodId': this.form.periodId || undefined,
            'pigstyId': this.form.pigstyId || undefined,
            'unitId': this.form.unitId || undefined
          })
        }).then(async({data}) => {
          // 猪舍List
          this.pigstyList = []
          let pigstyList = []
          let pigstyR = await this.$http({
            url: this.$http.adornUrl("/management/pigsty/findAll"),
            method: "get",
            params: this.$http.adornParams({})
          })
          pigstyR.data.all && (pigstyList = pigstyR.data.all)
          pigstyList.forEach(pigsty => {
            let item = {
              value: pigsty.id,
              label: pigsty.number
            }
            this.pigstyList.push(item)
          })
          // 单元List
          this.unitList = []
          let unitList = []
          let unitR = await this.$http({
            url: this.$http.adornUrl("/management/unit/findAll"),
            method: "get",
            params: this.$http.adornParams({})
          })
          unitR.data.all && (unitList = unitR.data.all)
          unitList.forEach(unit => {
            let item = {
              value: unit.id,
              label: unit.number,
              pigstyId: unit.pigstyId
            }
            this.unitList.push(item)
          })
          this.unitSelectedList = this.unitList
          // 栏期List
          this.periodList = []
          let periodList = []
          let periodR = await this.$http({
            url: this.$http.adornUrl("/management/period/findAll"),
            method: "get",
            params: this.$http.adornParams({})
          })
          periodR.data.all && (periodList = periodR.data.all)
          periodList.forEach(period => {
            let item = {
              value: period.id,
              label: period.number,
              pigstyId: period.pigstyId
            }
            this.periodList.push(item)
          })
          this.periodSelectedList = this.periodList
          // 品种list
          this.breedList = []
          let breedList = []
          let breedR = await this.$http({
            url: this.$http.adornUrl("/management/basebloodline/findAll"),
            method: "get",
            params: this.$http.adornParams({})
          })
          breedR.data.all && (breedList = breedR.data.all)
          breedList.forEach(breed => {
            let item = {
              value: breed.name,
              label: breed.name
            }
            this.breedList.push(item)
          })
          this.periodSelectedList = this.form.pigstyId? this.periodList.filter(item => item.pigstyId === this.form.pigstyId): this.periodList
          this.unitSelectedList = this.form.pigstyId? this.unitList.filter(item => item.pigstyId === this.form.pigstyId): this.unitList
          // 获取猪只List
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
            this.$message.error(data.msg)
          }
          this.dataListLoading = false
        })
      },
      // 点击 单元or栏期的选择框
      selectFocus (val) {
        if (!this.form.pigstyId) {
          this.$message.error('请先选择猪舍')
          this.form[val + 'Id'] = ''
          setTimeout(() => {
            this.$refs[val].blur()
          }, 10)
        }
      },
      // // 根据栋舍选择限制单元和栏期
      // pigstyChange (val) {
      //   this.unitSelectedList = this.unitList.filter(item => item.pigstyId === val)
      //   this.periodSelectedList = this.periodList.filter(item => item.pigstyId === val)
      // },
      // // 需要先选择猪舍，才能选择单元或栏期
      // ifPigsty (val) {
      //   if (!this.form.pigstyId) {
      //     this.$message.error('请先选择猪舍')
      //     this.form[val] = ''
      //   }
      // },
      // form表单清空，单元SelectedList 和 栏期SelectedList重置
      clearAll () {
        for (let i in this.form) {
          this.form[i] = ''
        }
        this.unitSelectedList = this.unitList
        this.periodSelectedList = this.periodList
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (pig) {
        this.addOrUpdateVisible = true
        var ids = pig ? [{id: pig.id, eartag: pig.eartag}] : this.dataListSelections.map(item => {
          return {
            id: item.id,
            eartag: item.eartag
          }
        })
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(ids)
        })
      },
      // // 删除
      // deleteHandle (id) {
      //   var ids = id ? [id] : this.dataListSelections.map(item => {
      //     return item.id
      //   })
      //   this.$confirm(`确定对[耳标=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     this.$http({
      //       url: this.$http.adornUrl('/management/yearpigbase/delete'),
      //       method: 'post',
      //       data: this.$http.adornData(ids, false)
      //     }).then(({data}) => {
      //       if (data && data.code === 0) {
      //         this.$message({
      //           message: '操作成功',
      //           type: 'success',
      //           duration: 1500,
      //           // onClose: () => {
      //           //   this.getDataList()
      //           // }
      //         })
      //         this.getDataList()
      //       } else {
      //         this.$message.error(data.msg)
      //       }
      //     })
      //   }).catch(() => {})
      // }
    },
    watch: {
      'form.pigstyId': {
        handler(newValue, oldValue) {
          if (oldValue) {
            this.form.unitId = ''
            this.form.periodId = ''
          }
          this.unitSelectedList = this.unitList.filter(item => item.pigstyId === newValue)
          this.periodSelectedList = this.periodList.filter(item => item.pigstyId === newValue)
        }
      }
    }
  }
</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>