anotherVersion/src/views/modules/health/htreat.vue

<template>
  <div class="htreat">
    <el-container>
      <el-header>
        <div class="rect" style="padding-bottom: 10px">
          <el-form
              :inline="true"
              :model="searchForm"
              size="mini">
            <el-form-item style="width: 200px">
              <el-input placeholder="耳标" style="width: 200px" v-model="searchForm.earTag"></el-input>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select v-model="searchForm.sympotomName" placeholder="症状">
                <el-option v-for="item in symptomList" :key="item.id" :label="item.sympotomName" :value="item.sympotomName"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select v-model="searchForm.causeName" placeholder="病因">
                <el-option v-for="item in causeList" :key="item.id" :label="item.causeName" :value="item.causeName"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select v-model="searchForm.diseaseName" placeholder="疾病名称">
                <el-option v-for="item in illnesList" :key="item.id" :label="item.idseaseName" :value="item.idseaseName"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select v-model="searchForm.doctor" placeholder="医生">
                <el-option v-for="item in manList" :key="item.id" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 140px">
              <el-select v-model="searchForm.treatmentPlan" placeholder="治疗方案">
                <el-option v-for="item in tmentplanList" :key="item.id" :label="item.medicantName" :value="item.medicantName"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" @click="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>
      <el-main>
        <div class="rect" style="margin-top: 20px">
          <el-form size="mini" :inline="true">
            <el-form-item>
<!--              <el-button-->
<!--                  icon="el-icon-plus"-->
<!--                  @click="visible = true">-->
<!--                新 增-->
<!--              </el-button>-->
              <el-button
                  icon="el-icon-delete"
                  @click="delAll" 
                  type="danger"
                  :disabled="selectList.length <= 0">
                删 除
              </el-button>
              <el-button
                icon="el-icon-warning"
                @click="dieOrRecoveryHandle(2)" 
                type="danger"
                :disabled="selectList.length <= 0">
                死 亡
              </el-button>
              <el-button
                icon="el-icon-view"
                @click="dieOrRecoveryHandle(1)" 
                type="danger"
                :disabled="selectList.length <= 0">
                康 复
              </el-button>
            </el-form-item>
          </el-form>
          <el-table
            id="select"
            height="530"
            :data="tableData"
            @selection-change="selectionChangeHandle"
            v-loading="dataListLoading"
            style="width: 100%"
            ref="table"
            stripe
            border
            :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'}"
            size="mini">
            <el-table-column
              type="selection"
              header-align="center"
              align="center"
              width="50">
            </el-table-column>
            <el-table-column
              prop="pigId"
              header-align="center"
              align="center"
              label="猪只耳标">
            </el-table-column>
            <el-table-column
              prop="diseaseName"
              header-align="center"
              align="center"
              label="疾病名称">
            </el-table-column>
            <el-table-column
              prop="diseaseTime"
              header-align="center"
              align="center"
              label="发病时间">
            </el-table-column>
            <el-table-column
              prop="symptomName"
              header-align="center"
              align="center"
              label="症 状">
            </el-table-column>
            <el-table-column
              prop="causeName"
              header-align="center"
              align="center"
              label="病 因">
            </el-table-column>
            <el-table-column
              prop="diagnosisTime"
              header-align="center"
              align="center"
              label="诊断时间">
            </el-table-column>
            <el-table-column
              prop="doctor"
              header-align="center"
              align="center"
              label="兽医姓名">
            </el-table-column>
            <el-table-column
              prop="treatmentPlan"
              header-align="center"
              align="center"
              label="治疗方案">
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="治疗结果">
              <template slot-scope="scope">
                <span v-if="scope.row.result === 1">康 复</span>
                <span v-else-if="scope.row.result === 2">死亡（无害化处理）</span>
                <span v-else-if="scope.row.result === 3">治疗中</span>
              </template>
            </el-table-column>
<!--            <el-table-column-->
<!--                header-align="center"-->
<!--                align="center"-->
<!--                label="隔离状态">-->
<!--              <template slot-scope="scope">-->
<!--                <span v-if="scope.row.isolationStatus === 1">未隔离</span>-->
<!--                <span v-else-if="scope.row.isolationStatus === 2">隔 离</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--                prop="offTime"-->
<!--                header-align="center"-->
<!--                align="center"-->
<!--                label="出栏时间">-->
<!--            </el-table-column>-->
            <el-table-column
              header-align="center"
              align="center"
              label="操作">
              <template slot-scope="scope">
                <el-button
                  v-if="isAuth('sys:user:update')"
                  type="text"
                  size="medium"
                  @click="addOrUpdateHandle(scope.row)"
                  style="color: rgb(24,144,255)">
                  修改
                </el-button>
                <el-button
                  v-if="isAuth('sys:user:delete')"
                  type="text"
                  size="medium"
                  @click="deleteHandle(scope.row.id)"
                  style="color: rgb(24,144,255)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="sizeChange"
            @current-change="pageChange"
            :current-page="page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="limit"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
        <!--  弹框      -->
        <el-dialog
            :title="!dataForm.id ? '新增' : '修改'"
            :close-on-click-modal="false"
            :visible.sync="visible"
            width="600px">
          <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="pigId">
              <el-input
                  type="text"
                  placeholder="请输入耳标号"
                  v-model="dataForm.pigId"
                  :disabled="dataForm.id? true: false">
              </el-input>
            </el-form-item>
            <el-form-item label="疾病名称" prop="diseaseName" >
              <el-select v-model="dataForm.diseaseName" disabled>
                <el-option v-for="item in illnesList" :key="item.id" :value="item.idseaseName" :label="item.idseaseName"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发病时间" prop="diseaseName">
              <el-date-picker
                  disabled
                  v-model="dataForm.diseaseTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="症 状">
              <el-select v-model="dataForm.sympotomName" disabled>
                <el-option v-for="item in symptomList" :key="item.id" :label="item.sympotomName" :value="item.sympotomName"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="病 因" prop="causeName">
              <el-select v-model="dataForm.causeName" disabled>
                <el-option v-for="item in causeList" :key="item.id" :value="item.causeName" :label="item.causeName"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="兽医姓名" prop="doctorId">
              <el-select
                  @change="onChangeMan($event)"
                  v-model="dataForm.doctorId" disabled>
                <el-option
                    v-for="item in manList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="诊断时间">
              <el-date-picker
                  disabled
                  v-model="dataForm.diagnosisTime"
                  type="date"
                  placeholder="选择日期时间"
                  value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="治疗方案" >
              <el-select v-model="dataForm.treatmentPlan" disabled>
                <el-option v-for="item in tmentplanList" :key="item.id" :label="item.medicantName" :value="item.medicantName"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="治疗结果">
              <el-select v-model="dataForm.result">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
<!--            <el-form-item label="隔离状态">-->
<!--              <el-select v-model="dataForm.isolationStatus">-->
<!--                <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="出栏时间">-->
<!--              <el-date-picker-->
<!--                  v-model="dataForm.offTime"-->
<!--                  type="date"-->
<!--                  placeholder="选择日期时间"-->
<!--                  value-format="yyyy-MM-dd"-->
<!--              >-->
<!--              </el-date-picker>-->
<!--            </el-form-item>-->
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="onCancel">关闭</el-button>
            <el-button size="mini" type="primary" @click="dataFormSubmit()">确定</el-button>
          </span>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import TableFooter from '../../../components/TableFooter'
import {mapActions, mapState} from 'vuex'
export default {
  name: 'htreat',
  data () {
    return {
      searchForm: {
        earTag: '',
        causeName: '',
        diseaseName: '',
        doctor: '',
        treatmentPlan: ''
      },
      dataListLoading: false,
      page: 1,
      limit: 20,
      tableData: [],
      total: 0,
      visible: false,
      selectList: [],
      dataForm: {
        id: '',
        pigId: '',
        isolationStatus: '',
        doctorId: '',
        doctor: '',
        diseaseName: '',
        diseaseTime: '',
        diagnosisTime: '',
        treatmentPlan: '',
        causeName: '',
        sympotomName: '',
        result: 1,
        offTime: ''
      },
      options: [
        {
          id: 1,
          name: '康复'
        },
        {
          id: 2,
          name: '死亡（无害化处理）'
        },
        {
          id: 3,
          name: '治疗中'
        }
      ],
      options1: [
        {
          id: 1,
          name: '未隔离'
        },
        {
          id: 2,
          name: '隔离'
        }
      ],
      dataRule: {}
    }
  },
  components: {
    TableFooter
  },
  computed: {
    ...mapState(['manList', 'causeList', 'illnesList', 'symptomList', 'tmentplanList'])
  },
  methods: {
    ...mapActions(['getManList', 'getTmentplan', 'getSymptom', 'getCause', 'getIllnes']),
    search () {
      this.init()
    },
    clearAll () {
      this.searchForm.earTag = ''
      this.searchForm.causeName = ''
      this.searchForm.diseaseName = ''
      this.searchForm.doctor = ''
      this.searchForm.treatmentPlan = ''
      this.searchForm.sympotomName = ''
    },
    init () {
      let params = {
        page: this.page,
        limit: this.limit,
        eartag: this.searchForm.earTag,
        diseaseName: this.searchForm.diseaseName,
        causeName: this.searchForm.causeName,
        doctor: this.searchForm.doctor,
        treatmentPlan: this.searchForm.treatmentPlan,
        symptomName: this.searchForm.sympotomName
      }
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/management/healthmedicalrecord/list'),
        method: 'get',
        params: this.$http.adornParams(params)
      })
          .then(res => {
            if (res.data.code === 0) {
              this.tableData = res.data.page.list
              this.total = res.data.page.totalCount
            }
          }).finally(() => {
            this.dataListLoading = false
          })
    },
    // 修改size
    sizeChange (val) {
      this.limit = val
      this.init()
    },
    // 修改页数
    pageChange (val) {
      this.page = val
      this.init()
    },
    // 批量死亡 or 康复
    dieOrRecoveryHandle (result) {
      let ids = this.selectList.map(item => item.id)
      let eartags = this.selectList.map(item => item.pigId)
      if (this.selectList.length > 0) {
        let that = this
        this.$confirm(`确定批量修改耳标号${eartags.join(',')}的猪只的治疗结果为${result === 1? '康复': '死亡'}?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.$http({
            url: that.$http.adornUrl('/management/healthmedicalrecord/updateCureResult'),
            method: 'post',
            data: that.$http.adornData({ ids, result }, false)
          }).then(res => {
            if (res.data.code === 0) {
              this.$message.success('修改成功！')
              this.init()
              this.selectList = []
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          })
        })
      } else {
        this.$message.error('请选择要修改的数据！')
      }
    },
    // 批量删除
    delAll () {
      let ids = this.selectList.map(item => item.id)
      let eartags = this.selectList.map(item => item.pigId)
      if (this.selectList.length > 0) {
        let that = this
        this.$confirm(`确定批量删除耳标号${eartags.join(',')}的猪只的治疗结果?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.$http({
            url: that.$http.adornUrl('/management/healthmedicalrecord/delete'),
            method: 'post',
            data: that.$http.adornData(ids, false)
          }).then(res => {
            if (res.data.code === 0) {
              this.$message.success('删除成功！')
              this.init()
              this.selectList = []
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$message.error('请选择要删除的数据！')
      }
    },
    selectionChangeHandle (val) {
      this.selectList = val
      // val.forEach(item => {
      //   this.selectList.push(item.id)
      // })
    },
    addOrUpdateHandle (row) {
      this.visible = true
      this.dataForm = {
        id: row.id,
        pigId: row.pigId,
        isolationStatus: row.isolationStatus,
        doctorId: row.doctorId,
        doctor: row.doctor,
        diseaseName: row.diseaseName,
        diseaseTime: row.diseaseTime,
        diagnosisTime: row.diagnosisTime,
        treatmentPlan: row.treatmentPlan,
        causeName: row.causeName,
        sympotomName: row.symptomName,
        result: row.result,
        offTime: row.offTime
      }
    },
    deleteHandle (id) {
      let ids = [id]
      let eartag = this.tableData.filter(item => item.id === id)[0].pigId
      let that = this
      this.$confirm(`确定删除耳标号${eartag}的猪只的疾病诊断?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.$http({
          url: that.$http.adornUrl('/management/healthmedicalrecord/delete'),
          method: 'post',
          data: that.$http.adornData(ids, false)
        })
            .then(res => {
              if (res.data.code === 0) {
                this.$message.success('删除成功！')
                this.init()
              } else {
                this.$message.error(res.data.msg)
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    onChangeMan (id) {
      let man = {}
      man = this.manList.find(item => {
        return item.id === id
      })
      this.dataForm.doctor = man.name
    },
    // 取消
    onCancel () {
      this.reset()
      this.visible = false
    },
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          let params = {
            id: this.dataForm.id == '' ? undefined : this.dataForm.id,
            pigId: this.dataForm.pigId,
            isolationStatus: this.dataForm.isolationStatus,
            doctorId: this.dataForm.doctorId,
            doctor: this.dataForm.doctor,
            diseaseName: this.dataForm.diseaseName,
            diseaseTime: this.dataForm.diseaseTime,
            diagnosisTime: this.dataForm.diagnosisTime,
            treatmentPlan: this.dataForm.treatmentPlan,
            causeName: this.dataForm.causeName,
            result: this.dataForm.result,
            offTime: this.dataForm.offTime,
            symptomName: this.dataForm.sympotomName
          }
          this.$http({
            url: this.$http.adornUrl(`${!this.dataForm.id ? '/management/healthmedicalrecord/save' : '/management/healthmedicalrecord/update'}`),
            method: 'post',
            data: this.$http.adornData(params, true)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.visible = false
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500
              })
              this.init()
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    reset () {
      this.dataForm = {
        id: '',
        pigId: '',
        isolationStatus: '',
        doctorId: '',
        doctor: '',
        diseaseName: '',
        diseaseTime: '',
        diagnosisTime: '',
        treatmentPlan: '',
        causeName: '',
        sympotomName: '',
        result: 3,
        offTime: ''
      }
    }
  },
  created () {
    this.getIllnes()
    this.getManList()
    this.getTmentplan()
    this.getSymptom()
    this.getCause()
  },
  activated () {
    this.init()
  }
}
</script>

<style scoped>
  .rect {
    background-color: #fff;
    padding: 30px 15px;
    border-radius: 5px;
    border: 1px solid #e8e8e8;
  }
  /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>