drp-ui/src/views/business/as/hospital/index.vue

<template>
  <div class="hospital">
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-form ref="queryParams" :model="queryParams" label-width="130px">
        <el-col :span="5" style="width: 100%">
          <el-form-item label="项目/医院名称">
            <el-input v-model="queryParams.projectSource"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <el-col :span="2">
        <el-button type="primary" @click="queryBtn">搜索</el-button>
      </el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="end">
      <el-col :span="2">
        <el-button @click="addBtn">新增</el-button>
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="dataList"
      :height="tableHeight"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      border
      style="width: 100%;margin-top: 20px">
      <el-table-column
        prop="id"
        label="序号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="projectSource"
        label="项目/医院名称"
        width="240">
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        width="240">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template #default="scope">
          <el-button type="text">编辑</el-button>|
          <el-button type="text" @click="routerBtn(scope.row)">权限分配</el-button>|
          <el-button type="text" @click="delBtn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page=this.queryParams.pageNum
      :page-sizes="[10,20,50,100]"
      :page-size=this.queryParams.pageSize
      layout="total, sizes, prev, pager, next, jumper"
      :total=this.total>
    </el-pagination>
    <el-dialog
      :title="this.title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="130px">
        <el-form-item label="项目/医院名称">
          <el-input v-model="form.projectSource"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm">确 定</el-button>
  </span>
    </el-dialog>
  </div>


</template>
<script>
import {add,edit,list,remove} from '@/api/business/as/hospital'
export default {
  mounted() {
    //挂载window.onresize事件(动态设置table高度)
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  },
  created() {
    this.getData()
    this.getTableHeight();
  },
  methods:{
    routerBtn(row,event,colum) {
      let resolve = this.$router.push({path:'/business/as/hospital/assignAuthority',query:{id:row.id}});
    },
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 150; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
    queryBtn(){
      this.getData()
    },
    getData(){
      list(this.queryParams).then(res =>{
        if(res.code == 200){
          this.dataList = res.rows
          this.total = res.total
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageNum = val
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    addBtn() {
      this.dialogVisible=true
      this.title="新增"
    },
    delBtn(scope){
      this.$confirm('确认删除？')
        .then(_ => {
          remove(scope.id).then(res =>{
            if(res.code == 200){
              this.$modal.msgSuccess("删除成功");
              this.getData()
            }
          })
        })
        .catch(_ => {});
    },
    cancal(){
      this.form={
        id:undefined,
        projectSource:''
      }
    },
    submitForm(){
      this.$refs["form"].validate( valid => {
        if (valid) {
          if (this.form.id == undefined) {
            add(this.form).then(res =>{
              if(res.code == 200){
                this.$modal.msgSuccess("新增成功");
                this.dialogVisible = false
                this.cancal()
                this.getData()
              }
            })
          }else {
            edit().then(res =>{
              if(res.code == 200){
                this.$modal.msgSuccess("修改成功");
                this.dialogVisible = false
              }
            })
          }
        }
      })
    }
  },
  data() {
    return {
      dialogVisible:false,
      loading:false,
      tableHeight:'', //表格高度
      title:'',
      total:'',
      dataList:[],
      queryParams:{
        pageNum:1,
        pageSize:10,
        projectSource:''
      },
      form:{
        id:undefined,
        projectSource:''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>