web_dist/src/views/settings/DeptPhones.vue

<template>
  <el-container>
    <el-header height="36px" style="margin-top: 8px">
      <span>快速查询：</span>
      <el-input v-model="search" placeholder="科室编码、名称、内线电话、外线电话" style="width: 260px" clearable></el-input>
    </el-header>
    <el-main>
      <el-table :data="cptData" :height="tableHeight" stripe highlight-current-row>
        <el-table-column prop="code" label="科室编码"></el-table-column>
        <el-table-column prop="name" label="科室名称"></el-table-column>
        <el-table-column prop="inPhone" label="内线电话"></el-table-column>
        <el-table-column prop="outPhone" label="外线电话"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" icon="Edit" @click="edit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <el-dialog v-model="dialogVisible" title="编辑" width="300px">
      <div class="medit">科室编码：<el-input v-model="selectedRow.code" style="width: 130px" disabled></el-input></div>
      <div class="medit">科室名称：<el-input v-model="selectedRow.name" style="width: 130px" disabled></el-input></div>
      <div class="medit">内线电话：<el-input ref="inPhoneRef" v-model="selectedRow.inPhone" style="width: 130px" @keyup.enter="submit"></el-input></div>
      <div class="medit">外线电话：<el-input v-model="selectedRow.outPhone" style="width: 130px" @keyup.enter="submit"></el-input></div>
      <div>
        <el-button type="primary" size="small" icon="Check" style="width: 200px" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import { computed, onMounted, ref } from 'vue'
import { getDeptPhones, saveDeptPhone } from '@/api/settings/dept-phones'
import store from '@/store'
import { ElMessage } from 'element-plus'
export default {
  setup() {
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 45
    const search = ref('')
    const data = ref([])
    const cptData = computed(() => {
      return data.value.filter((item) => {
        return (
          item.code.indexOf(search.value) !== -1 ||
          item.name.indexOf(search.value) !== -1 ||
          item.inPhone.indexOf(search.value) !== -1 ||
          item.outPhone.indexOf(search.value) !== -1
        )
      })
    })

    const inPhoneRef = ref(null)
    const selectedRow = ref({})
    const dialogVisible = ref(false)
    const edit = (row) => {
      selectedRow.value = row
      dialogVisible.value = true
      setTimeout(() => {
        inPhoneRef.value.focus()
      }, 100)
    }

    const submit = () => {
      saveDeptPhone(selectedRow.value).then(() => {
        ElMessage({
          message: '保存成功。',
          type: 'success',
          duration: 2500,
          showClose: true,
        })
        dialogVisible.value = false
      })
    }

    onMounted(() => {
      getDeptPhones().then((res) => {
        data.value = res
      })
    })

    return {
      tableHeight,
      search,
      data,
      cptData,
      inPhoneRef,
      selectedRow,
      dialogVisible,
      edit,
      submit,
    }
  },
}
</script>

<style scoped>
.medit {
  padding: 0 0 20px 0;
}
</style>