anotherVersion/src/views/modules/pigbasic/pbpedigree.vue

<template>
  <div class="mod-role">
    <el-container>
      <!-- form表单 -->
      <el-header>
        <div class="rect rect-form">
          <el-form :inline="true" :model="form" @keyup.enter.native="getDataList()" 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 breed"
                  :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" @change="pigstyChange">
                <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" @change="ifPigsty('unitId')">
                <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" @change="ifPigsty('periodId')">
                <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-plus" 
                @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-edit" 
                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">
            </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="性别">
            </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="健康状态">
              <template slot-scope="scope">
                <span>{{scope.row.healthStatus? '健康': '不健康'}}</span>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="养殖状态">
              <template slot-scope="scope">
                <span>{{scope.row.outFenceStatus? '出栏': '育肥'}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="breed"
              header-align="center"
              align="center"
              label="品种">
            </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)"
                  @click="detailsHandle(scope.row)">
                  查看谱系
                </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>
          <!-- 弹窗, 新增 / 修改 -->
          <Details v-if="detailsVisible" ref="details" @refreshDataList="getDataList"></Details>
        </div>
      </el-main>
      
      
    </el-container>
  </div>
</template>

<script>
  import Details from './pbped-details.vue'
  export default {
    data () {
      return {
        form: {
          eartag: '',
          sex: '',
          breed: '',
          healthStatus: '',
          outFenceStatus: '',
          periodId: '',
          pigstyId: '',
          unitId: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        detailsVisible: false,
        farmId: undefined,
        gender: [
          {
            value: '公',
            label: '公'
          },
          {
            value: '母',
            label: '母'
          }
        ],
        breed: [
          {
            value: 1,
            label: '杜巴嘉'
          },
          {
            value: 2,
            label: '长白'
          }
        ],
        healthStatus: [
          {
            value: true,
            label: '健康'
          },
          {
            value: false,
            label: '不健康'
          }
        ],
        outFenceStatus: [
          {
            value: 0,
            label: '育肥'
          },
          {
            value: 1,
            label: '出栏'
          }
        ],
        periodList: [], // 所有栏期
        periodSelectedList: [], // 根据栋舍限制的栏期
        pigstyList: [], // 所有栋舍
        unitList: [], // 所有单元
        unitSelectedList: [], // 根据栋舍限制的单元
        labelPosition: 'right'
      }
    },
    components: {
      Details
    },
    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 || (this.form.healthStatus === 0?this.form.healthStatus: undefined),
            'outFenceStatus': this.form.outFenceStatus || (this.form.outFenceStatus === 0?this.form.outFenceStatus: undefined),
            'periodId': this.form.periodId || undefined,
            'pigstyId': this.form.pigstyId || undefined,
            'unitId': this.form.unitId || undefined
          })
        }).then(async({data}) => {
          // // 获取所有牧场
          // let pastureList = []
          // let pastureResult = await this.$http({
          //   url: this.$http.adornUrl("/management/farm/findAll"),
          //   method: "post",
          // })
          // pastureResult.data.all && (pastureList = pastureResult.data.all)
          // 栋舍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,
              farmId: unit.farmId
            }
            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
          this.form.pigstyId? this.periodSelectedList = this.periodList.filter(item => item.pigstyId === this.form.pigstyId): this.periodSelectedList = this.periodList
          this.form.pigstyId? this.unitSelectedList = this.unitList.filter(item => item.pigstyId === this.form.pigstyId): this.unitSelectedList = 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.dataList.forEach((item) => {
          //   // 单元对应
          //   for (let unit of this.unitList) {
          //     if (item.unitId === unit.value) {
          //       item.unitNumber = unit.label;
          //       item.farmId = unit.farmId;
          //       item.pigstyId = unit.pigstyId;
          //       break;
          //     }
          //   }
          //   // // 牧场对应
          //   // for (let pasture of pastureList) {
          //   //   if (item.farmId === pasture.id) {
          //   //     item.name = pasture.name;
          //   //     break;
          //   //   }
          //   // }
          //   // 栋舍对应
          //   for (let pighouse of this.pigstyList) {
          //     if (item.pigstyId === pighouse.value) {
          //       item.phNumber = pighouse.label;
          //       break;
          //     }
          //   }
          //   // 栏期对应
          //   for (let period of this.periodList) {
          //     if (item.periodId === period.value) {
          //       item.periodNumber = period.label;
          //       break;
          //     }
          //   }
          // })
          this.dataListLoading = false
        })
      },
      // 根据栋舍选择限制单元和栏期
      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
      },
      // 查看谱系
      detailsHandle (pig) {
        this.detailsVisible = true
        // var ids = id ? [id] : this.dataListSelections.map(item => {
        //   return {
        //     id: item.id,
        //     eartag: item.eartag
        //   }
        // })
        this.$nextTick(() => {
          this.$refs.details.init(pig.eartag)
        })
      },
      // 删除
      deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${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()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }).catch(() => {})
      }
    },
    watch: {
      'form.pigstyId': {
        handler(newValue, oldValue) {
          if (oldValue) {
            this.form.unitId = ''
            this.form.periodId = ''
          }
        }
      }
    }
  }
</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>