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

<template>
  <div class="hvaccine">
    <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>
              <el-button icon="el-icon-search" @click="init">查 询</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-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="id"
                header-align="center"
                align="center"
                label="id">
            </el-table-column>
            <el-table-column
                prop="pigId"
                header-align="center"
                align="center"
                label="猪只耳标">
            </el-table-column>
            <el-table-column
                prop="vaccineName"
                header-align="center"
                align="center"
                label="疫苗名称">
            </el-table-column>
            <el-table-column
                prop="createTime"
                header-align="center"
                align="center"
                label="创建时间">
            </el-table-column>
            <el-table-column
                prop="manName"
                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="textarea"
                  :rows="2"
                  placeholder="每个耳标之间用英文逗号隔开，最多可以添加50头猪"
                  v-model="dataForm.pigId"
                  :disabled="dataForm.id? true: false">
              </el-input>
            </el-form-item>
            <el-form-item label="疫苗名称" prop="vaccineName">
              <el-input v-model="dataForm.vaccineName" placeholder="请输入疫苗名称"></el-input>
            </el-form-item>
            <el-form-item label="操作人" prop="manId">
              <el-select
                  ref="slelctRef"
                  @change="onChangeMan($event)"
                  v-model="dataForm.manId"
                  style="width: 100%">
                <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>
          <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 {mapState, mapActions} from 'vuex'
export default {
  name: 'hvaccine',
  components: {
    TableFooter
  },
  data () {
    return {
      searchForm: {
        earTag: ''
      },
      tableData: [],
      dataListLoading: false,
      page: 1,
      limit: 20,
      total: 0,
      dataForm: {
        id: '',
        pigId: '',
        vaccineName: '',
        manId: '',
        manName: ''
      },
      visible: false,
      dataRule: {
        pigId: [
          {required: true, message: '猪只耳标不能为空', trigger: 'blur'}
        ],
        vaccineName: [
          {required: true, message: '疫苗名称不能为空', trigger: 'blur'}
        ],
        manId: [
          {required: true, message: '操作人不能为空', trigger: 'change'}
        ]
      },
      selectList: []
    }
  },
  computed: {
    ...mapState(['manList'])
  },
  methods: {
    ...mapActions(['getManList']),
    // 修改size
    sizeChange (val) {
      this.limit = val
      this.init()
    },
    // 修改页数
    pageChange (val) {
      this.page = val
      this.init()
    },
    init () {
      this.dataListLoading = true
      let params = {
        page: this.page,
        limit: this.limit,
        eartag: this.searchForm.earTag
      }
      this.$http({
        url: this.$http.adornUrl('/management/healthimmunerecord/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
      })
    },
    selectionChangeHandle (val) {
      this.selectList = []
      val.forEach(item => {
        this.selectList.push(item.id)
      })
    },
    // 修改
    addOrUpdateHandle (row) {
      this.dataForm = {
        id: row.id,
        pigId: row.pigId,
        vaccineName: row.vaccineName,
        manId: row.manId
      }
      this.visible = true
    },
    deleteHandle (id) {
      let ids = [id]
      this.$http({
        url: this.$http.adornUrl('/management/healthimmunerecord/delete'),
        method: 'post',
        data: this.$http.adornData(ids, false)
      })
      .then(res => {
        if (res.data.code === 0) {
          this.$message.success('删除成功！')
          this.init()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    onChangeMan (id) {
      let man = {}
      man = this.manList.find(item => {
        return item.id === id
      })
      this.dataForm.manName = man.name
    },
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          let params = {
            id: this.dataForm.id == '' ? undefined : this.dataForm.id,
            eartags: this.dataForm.pigId,
            vaccineName: this.dataForm.vaccineName,
            manId: this.dataForm.manId,
            manName: this.dataForm.manName
          }
          this.$http({
            url: this.$http.adornUrl(`${!this.dataForm.id ? '/management/healthimmunerecord/saveAll' : '/management/healthimmunerecord/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)
            }
          })
        }
      })
    },
    clearAll () {
      this.searchForm.earTag = ''
    },
    delAll () {
      this.$http({
        url: this.$http.adornUrl('/management/healthimmunerecord/delete'),
        method: 'post',
        data: this.$http.adornData(this.selectList, false)
      })
      .then(res => {
        if (res.data.code === 0) {
          this.$message.success('删除成功')
          this.init()
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    // 关闭模态框
    onCancel () {
      this.visible = false
      this.reset()
    },
    reset () {
      this.dataForm = {
        id: '',
        pigId: '',
        vaccine: '',
        manId: '',
        manName: ''
      }
    }
  },
  created () {
    this.getManList()
  },
  activated () {
    this.init()
  }
}
</script>

<style scoped>
  .hvaccine {

  }
  .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>