elizebeth/src/xt_pages/role/departManage.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-circle-plus-outline"
        style="float:right;"
        @click="openForm"
        >新增</el-button
      >
    </div>
    <div class="app-container">
      <el-table
        :row-style="{ color: '#303133' }"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266'
        }"
        style="width:100%;"
        ref="table"
        border
        :data="tableData"
      >
        <el-table-column label="序号" prop="name" min-width="60" align="center">
           <template slot-scope="scope">
                {{scope.$index + 1}}
           </template>
        </el-table-column>
        <el-table-column label="科室名称" prop="name" min-width="150" align="center">
            <template slot-scope="scope">
                {{scope.row.name}}
            </template>
        </el-table-column>
         <el-table-column label="科室编号"  prop="ip" min-width="150" align="center">
             <template slot-scope="scope">
                 {{scope.row.number}}
             </template>
         </el-table-column>
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top"
            >
            <el-button
                type="primary"
                icon="el-icon-edit-outline"
                size="small"
                @click="editOpenForm(scope.row.id)">
            </el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <el-button
                type="danger"
                size="small"
                icon="el-icon-delete"
                @click="DeleteDepartment(scope.row.id,scope.$index)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>


        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 50, 100]"
            :page-size="10"
            background
            align="right"
            style="margin-top:20px;"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
         >
        </el-pagination>




      <el-dialog
        title="添加科室"
        :visible.sync="dialogVisible"
        width="50%">
        <span>
          <el-form :model="form" ref="form" label-width="120px">
             <el-row :span="24">
                 <el-col :span="10">
                   <el-form-item label="科室名称:">
                      <el-input v-model="form.name" style="width:200px"></el-input>
                  </el-form-item>
                 </el-col>
             </el-row >
             <el-row :span="24" >
                 <el-col :span="12">
                   <el-form-item label="医保科室编号:">
                      <el-input v-model="form.number"  style="width:200px"></el-input>
                  </el-form-item>
                 </el-col>
             </el-row>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="SaveDepartment('form')">确 定</el-button>
        </span>
    </el-dialog>


      <el-dialog
        title="编辑科室"
        :visible.sync="editDialogVisible"
        width="50%">
        <span>
          <el-form :model="form" ref="form" label-width="120px">
             <el-row :span="24">
                 <el-col :span="10">
                   <el-form-item label="科室名称:">
                      <el-input v-model="form.name" style="width:200px"></el-input>
                  </el-form-item>
                 </el-col>
             </el-row >
             <el-row :span="24" >
                 <el-col :span="12">
                   <el-form-item label="医保科室编号:">
                      <el-input v-model="form.number"  style="width:200px"></el-input>
                  </el-form-item>
                 </el-col>
             </el-row>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="UpdatedDepartment('form')">确 定</el-button>
        </span>
    </el-dialog>



    </div>
  </div>
</template>

<script>

import BreadCrumb from "@/xt_pages/components/bread-crumb";
import AdminInfoForm from "./components/AdminInfoForm";
import { SaveDepartment,getDePartmentList,getDepartMentDetail,UpdatedDepartment,DeleteDepartment } from "@/api/project/project"
export default {
  name: "adminManage",
  data() {
    return {
      crumbs: [
        { path: false, name: "管理中心" },
        { path: false, name: "科室管理" }
      ],
      tableData:[],
      dialogVisible:false,
      editDialogVisible:false,
      form:{
        id:0,
        name:"",
        number:"",
      },
      limit:20,
      page:1,
      total:10,
    };
  },
  components: {
    BreadCrumb,
    AdminInfoForm
  },
  created() {
    this.getlist()
  },

  methods: {

    openForm(){
      this.dialogVisible = true
    },

    handleSizeChange(val) {
       this.limit = val
       this.getlist()
    },
    handleCurrentChange(val) {
       this.page = val
       this.getlist()
    },
    SaveDepartment(formName){
         var params = {
            name:this.form.name,
            number:this.form.number,
         }
       this.$refs[formName].validate((valid)=>{
          SaveDepartment(params).then(response=>{
             if(response.data.state == 1){
                var department =  response.data.data.department
                console.log("department",department)
                this.$message.success("保存成功")
                this.dialogVisible = false
                this.getlist()
                this.form.name = ""
                this.form.number = ""
             }
          })
       })
    },
    getlist(){
       var params = {
           limit:this.limit,
           page:this.page,
       }
      getDePartmentList(params).then(response=>{
         if(response.data.state == 1){
           var department =   response.data.data.departMentList
           console.log("department",department)
           this.tableData = department
           var total = response.data.data.total
           console.log("total",total)
           this.total = total
         }
      })
    },

    editOpenForm(id){
      this.editDialogVisible = true
      getDepartMentDetail(id).then(response=>{
         if(response.data.state == 1){
           var departDetail =  response.data.data.departDetail
           console.log("departdetail",departDetail)
           this.form.id = departDetail.id
           this.form.name = departDetail.name
           this.form.number = departDetail.number
         }
      })
    },

    UpdatedDepartment(formName){
         var params = {
            id:this.form.id,
            name:this.form.name,
            number:this.form.number,
         }
       this.$refs[formName].validate((valid)=>{
          UpdatedDepartment(params).then(response=>{
             if(response.data.state == 1){
                var department =  response.data.data.department
                console.log("department",department)
                this.$message.success("保存成功")
                this.editDialogVisible = false
                this.getlist()
             }
          })
       })
    },

   DeleteDepartment(id,index){
      this.$confirm("确认删除此部门吗?", "删除", {
        confirmButtonText: "确 定",
        cancelButtonText: "取 消",
        type: "warning"
       }).then(() => {

       DeleteDepartment(id).then(response => {
          if (response.data.state == 1) {
             var msg = response.data.data.msg
             this.$message.success("删除成功")
             this.tableData.splice(index, 1);
          }
       });
     }).catch(() => {});
    }


  },




};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-button + .el-button {
  margin-left: 0 !important;
}
</style>
<style>
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #d0d3da;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #d0d3da;
}
</style>