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

<template>
  <div class="assignAuthority">
    <el-row :gutter="10" type="flex" class="row-bg" justify="space-between">
     <el-col :span="6">
       <h3>权限分配</h3>
     </el-col>
      <el-col :span="10">
       <el-form ref="queryParams" :model="queryParams">
         <el-form-item>
           <el-input v-model="queryParams.nickName" placeholder="请输入姓名、部门"></el-input>
         </el-form-item>
       </el-form>
      </el-col>
      <el-col :span="6" >
        <el-button type="primary" @click="queryBtn">搜索</el-button>
        <el-button type="primary" @click="resetBtn">重置</el-button>
      </el-col>
     <el-col :span="6" >
       <el-button type="primary" @click="addBtn">新增</el-button>
<!--       <el-button type="primary" @click="removeBtn">删除</el-button>-->
     </el-col>
    </el-row>
    <el-divider></el-divider>
    <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"
      @selection-change="handleSelectionChange1">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="序号"
        width="100">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column
        prop="nickName"
        label="用户姓名"
        width="240">
      </el-table-column>
      <el-table-column
        prop="deptName"
        label="用户部门"
        width="240">
      </el-table-column>
      <el-table-column
        prop="isDefaultPerson"
        fixed="right"
        label="是否为问题默认处理人">
        <template #default="scope">
          <el-select v-model="scope.row.isDefaultPerson" placeholder="请选择" @change="changeBtn(scope.row)">
            <el-option
              v-for="item in isOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>

      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange1"
      @current-change="handleCurrentChange1"
      :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="title"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="userQueryHandleClose">
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form ref="userQueryParams" :model="userQueryParams" label-width="90px">
            <el-form-item label="名称/编号">
              <el-input v-model="userQueryParams.userName" placeholder="请输入名称/编号"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="queryUserBtn">搜索</el-button>
        </el-col>
        <el-col :span="2">
          <el-button @click="userQueryParamReset">重置</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-table
          :data="userDataList"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="编码"
            width="180">
          </el-table-column>
          <el-table-column
            prop="nickName"
            label="名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="deptName"
            label="部门">
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page=this.userQueryParams.pageNum
          :page-sizes="[10,20,50,100]"
          :page-size=this.userQueryParams.pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total=this.userTotal>
        </el-pagination>
      </el-row>
      <span slot="footer" class="dialog-footer">
    <el-button @click="userQueryCancel">取 消</el-button>
    <el-button type="primary" @click="addUserBtn">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import {addUser, list, userList, edit, removeByIdList} from "@/api/business/as/assignAuthority";

export default {
  created() {
    if(this.$route.query.id){
      this.queryParams.hId=this.$route.query.id
      list(this.queryParams).then(res =>{
        if(res.code == 200){
          this.dataList=res.rows
          this.total=res.total
        }
      })
    }
  },
  mounted() {
    //挂载window.onresize事件(动态设置table高度)
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  },
  methods:{
    //批量删除用户
    removeBtn(){
      removeByIdList(this.removeList).then(res =>{
        console.log(res)
      })
    },
    /**
     * 获取项目已有用户
     */
    handleSelectionChange1(val){
      console.log(val)
      for (let i = 0; i < val.length; i++) {
        // 为arrayC添加名称为arrayB[i].id的属性字段，值等于arrayB[i].name
        this.removeList[i] = val[i].id
        // arrayC[arrayB[i].id] = arrayB[i].dev_name
      }
      console.log(this.removeList)
    },
    changeBtn(row){
      console.log('row',row)
      edit(row).then(res =>{
        if(res.code == 200){
          this.$message.success("修改成功")
          this.queryBtn()
        }else {
          this.$message.error("已存在默认人,请勿重复设置")
          this.queryBtn()
        }
      })
    },
    getList(){
      list(this.queryParams).then(res =>{
        if(res.code == 200){
          this.dataList=res.rows
          this.total=res.total
        }
      })
    },
    queryBtn(){
      this.queryParams.deptName=this.queryParams.nickName
      this.getList()
    },
    resetBtn(){
      this.queryParams={
        hId:this.$route.query.id,
        pageNum:1,
        pageSize:10,
        userName:'',
        nickName:'',
        deptName:'',
      }
      this.getList()
      console.log("this.queryParams",this.queryParams)
    },
    handleSelectionChange(val) {
      this.userFormList = val;
      console.log("this.userFormList",this.userFormList)
      this.userFormList.forEach((item) =>{
        item.hid=this.queryParams.hId
      })
    },
    addUserBtn(){
      addUser(this.userFormList).then(res =>{
        if(res.code == 200){
          this.$message.success("新增成功")
          this.dialogVisible = false
          this.userQueryParamReset()
          this.queryBtn()
        }
      })
    },
    queryUserBtn(){
      this.userQueryParams.nickName=this.userQueryParams.userName
      userList(this.userQueryParams).then(res =>{
        if(res.code == 200){
          this.userDataList = res.rows
          this.userTotal=res.total
        }
      })
    },
    userQueryParamReset(){
      this.userQueryParams={
        pageNum:1,
        pageSize:10,
        userName:'',
        nickName:'',
      }
    },
    userQueryHandleClose(done){
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
          this.userQueryParamReset()
        })
        .catch(_ => {});
    },
    userQueryCancel(){
      this.dialogVisible=false
      this.userQueryParamReset()
    },
    addBtn(){
      this.dialogVisible=true
      this.title="需求人员"
      userList().then(res =>{
        if(res.code == 200){
          this.userDataList = res.rows
          this.userTotal=res.total
        }
      })
    },
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 150; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
    handleSizeChange1(val) {
      this.queryParams.pageSize = val
      this.queryBtn()
    },
    handleSizeChange2(val) {
      this.userQueryParams.pageSize = val
      this.queryUserBtn()
    },
    handleCurrentChange1(val) {
      this.queryParams.pageNum = val
      this.queryBtn()
    },
    handleCurrentChange2(val) {
      this.userQueryParams.pageNum = val
      this.queryUserBtn()
    },
  },
  data(){
    return {
      removeList:[],
      isOptions:[
        {
          value: '1',
          label: '否',
        },
        {
          value: '0',
          label: '是',
        }
      ],
      userFormList:[],
      userTotal:'',
      userDataList:[],
      title:'',
      dialogVisible:false,
      isDefault:'否',
      loading:false,
      total:0,
      tableHeight:'', //表格高度
      userQueryParams:{
        pageNum:1,
        pageSize:10,
        userName:'',
        nickName:'',
      },
      queryParams:{
        hId:undefined,
        pageNum:1,
        pageSize:10,
        userName:'',
        nickName:'',
        deptName:'',
      },
      dataList:[]
    }
  }
}
</script>
<style lang="scss" scoped>

</style>