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

<template>
  <div class="afterSalesUser">

    <el-form ref="queryParams" :model="queryParams" label-width="80px">
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form-item label="用户姓名">
            <el-input v-model="queryParams.userName" clearable placeholder="请输入用户姓名" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户项目">
            <el-select v-model="queryParams.userProject" clearable placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in userProjectList"
                :key="item.userProject"
                :label="item.userProject"
                :value="item.userProject">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户科室">
            <el-input v-model="queryParams.userRoom" clearable placeholder="请输入用户科室"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-row >
            <el-col :span="1" offset="16">
              <el-button type="primary" @click="getDataList">搜索</el-button>
            </el-col>

          </el-row>

        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form-item label="登录手机">
            <el-input v-model="queryParams.userPhone" clearable placeholder="请输入登录手机"></el-input>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <el-row>
      <el-table
        :data="dataList"
        style="width: 100%"
        :height="tableHeight"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        border>
        <el-table-column
        prop="序号"
        label="序号"
        width="100px">
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户姓名"
          width="300">
        </el-table-column>
        <el-table-column
          prop="userProject"
          label="用户项目"
          width="240">
        </el-table-column>
        <el-table-column
          prop="userRoom"
          label="用户科室"
          width="240">
        </el-table-column>
        <el-table-column
          prop="userPhone"
          label="登录手机"
          width="300">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          width="300">
          <template #default="scope">
            <el-button type="text" @click="edit(scope.row)">编辑</el-button>|
            <el-button type="text" @click="remove(scope.row.id)">删除</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-row>

    <el-dialog
      title="提示"
      :visible.sync="editDialog"
      width="80%"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="用户姓名">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户项目">
              <el-input v-model="form.userProject"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户科室">
              <el-input v-model="form.userRoom"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="登陆手机">
              <el-input v-model="form.userPhone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editDialog = false">取 消</el-button>
    <el-button type="primary" @click="submitForm">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>

import {deleteById, edit, getList, getUserProjectList} from "@/api/business/as/afterSalesUser";

export default {
  created() {
    this.getTableHeight()
    this.getDataList()
    this.getUserProjectDataList()
  },
  methods:{
    submitForm(){
      this.$refs["form"].validate(async valid => {
          if (valid) {
            if (this.form.id == undefined) {

            }else {
              edit(this.form).then(res =>{
                if(200 == res.code){
                  this.$message.success("修改成功")
                  this.editDialog = false
                  this.getDataList()
                }
              })
            }
          }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    edit(param){
      this.editDialog=true;
      this.form=param
    },
    remove(param){
      this.$confirm('确认删除？')
        .then(_ => {
          deleteById(param).then(res =>{
            if(200 == res.code){
              this.$message.success("删除成功")
              this.getDataList()
            }
          })
        })
        .catch(_ => {});
    },
    getDataList(){
      getList(this.queryParams).then(res =>{
        if(200 == res.code){
          this.dataList=res.rows
          this.total=res.total
        }
      })
    },
    getUserProjectDataList(){
      getUserProjectList().then(res =>{
        if(200 == res.code){
          this.userProjectList=res.data
        }
      })
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getDataList()
    },
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 150; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
  },
  data() {
    return {
      editDialog:false,
      tableHeight:'', //表格高度
      total:'',
      dataList:[],
      userProjectList:[],
      queryParams:{
        pageNum:1,
        pageSize:10,
        userName:'',
        userProject:'',
        userRoom:'',
        userPhone:'',
      },
      form:{
        id:undefined,
        userName:'',
        userProject:'',
        userRoom:'',
        userPhone:'',
      }
    }
  }
}
</script>

<style>

</style>