病区管理设置

src/api/ncs_frameGroup.js

@@ -0,0 +1,66 @@
+/**
+ * 科室病区病区接口请求
+ * @param params
+ * @returns {Promise<any>}
+ */
+import request from '@/utils/request'
+
+export function getList(params) {
+  return request({
+    url: '/ncs/frame_group/page',
+    method: 'POST',
+    loading: true,
+    data: params,
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
+  })
+}
+
+/** 新增科室病区 */
+export function add(params) {
+  return request({
+    url: '/ncs/frame_group',
+    method: 'POST',
+    loading: true,
+    data: params
+  })
+}
+
+/** 删除科室病区 */
+export function remove(params) {
+  const ids = params.toString()
+  return request({
+    url: `/ncs/frame_group/${ids}`,
+    method: 'DELETE',
+    loading: true,
+    data: params
+  })
+}
+
+/** 更新科室病区 */
+export function update(id, params) {
+  return request({
+    url: `/ncs/frame_group/${id}`,
+    method: 'put',
+    headers: { 'Content-Type': 'application/json' },
+    data: params
+  })
+}
+
+/** 查询单个科室病区 */
+export function get(id, params) {
+  return request({
+    url: `/ncs/frame_group/${id}`,
+    method: 'get',
+    loading: false,
+    params
+  })
+}
+
+/** 查询某科室下的房间结构 */
+export function getRoomStruct(id) {
+  return request({
+    url: `/ncs/frame/getroomstruct/${id}`,
+    method: 'get',
+    loading: false
+  })
+}

src/router/index.js

@@ -191,6 +191,27 @@ export const partRoutes = [
     ]
   },
   {
+    path: '',
+    component: Layout,
+    redirect: '/frameGroup/index',
+    name: 'frameGroup',
+    children: [
+      {
+        path: '/frameGroup/index',
+        component: () => import('@/views/hospitalFrame/frameGroup'),
+        name: 'frameGroup',
+        meta: { title: '病区管理', icon: 'area', noCache: true }
+      },
+      {
+        path: 'edit/:id?',
+        component: () => import('@/views/hospitalFrame/frameGroupEdit'),
+        name: 'frameGroupEdit',
+        meta: { title: '编辑病区信息', icon: 'area', noCache: true },
+        hidden: true
+      }
+    ]
+  },
+  {
     path: '/calling-boardcast',
     component: Layout,
     redirect: '/calling-message/index',

src/utils/mixin.js

@@ -64,6 +64,7 @@ export default {
   },
   methods: {
     /** 返回克隆后的对象 */
+
     MixinClone(obj) {
       return JSON.parse(JSON.stringify(obj))
     },

src/views/hospitalFrame/frameGroup.vue

@@ -0,0 +1,387 @@
+<template>
+  <div>
+    <ag-grid-layout
+      toolbar
+      :table-height="tableHeight"
+      theme="ag-theme-alpine"
+      :column-defs="columnDefs"
+      :row-data="rowData"
+      :locale-text="localeText"
+      :grid-options="gridOptions"
+      :default-col-def="defaultColDef"
+      :animate-rows="true"
+      :row-selection="rowSelection"
+      @filterChanged="filterModifed"
+      @sortChanged="gridSortChange"
+    >
+      <!--        @rowDoubleClicked="getList"-->
+      <div slot="toolbar" class="inner-toolbar">
+        <div class="toolbar-search">
+          <en-table-search placeholder="请输入搜索关键字" @search="handlerSearch" />
+        </div>
+        <div class="toolbar-btns">
+          <el-button type="primary" size="mini" @click="createOrginazition">新建病区</el-button>
+        </div>
+      </div>
+      <el-pagination
+        v-if="pageData"
+        slot="pagination"
+        :current-page="pageData.page_no"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageData.page_size"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pageData.data_total"
+        @size-change="handlePageSizeChange"
+        @current-change="handlePageCurrentChange"
+      />
+    </ag-grid-layout>
+    <!-- 新建病区弹窗 -->
+    <el-dialog :title.sync="formtitle" :visible.sync="formshow" width="30%">
+      <div>
+        <el-form ref="editform" :rules="rules" label-width="120px" :model="formmodel">
+
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="区域名称" prop="group_name">
+                <el-input
+                  v-model="formmodel.group_name"
+                  clearable
+                  :maxlength="100"
+                  placeholder="请输入区域名称"
+                />
+              </el-form-item>
+
+            </el-col>
+          </el-row>
+        </el-form>
+
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="formshow = false">取 消</el-button>
+        <el-button type="primary" @click="handlerFormSubmit('editform')">确 定</el-button>
+      </div>
+    </el-dialog>
+    <!-- 新建病区弹窗结束 -->
+  </div>
+</template>
+
+<script>
+/**
+     * 病区管理
+     */
+import { AG_GRID_LOCALE_CN } from '@/utils/AgGridVueLocaleCn'
+import ButtonCellRender from '../../components/AgGridCellRender/ButtonCellRender'
+import * as API_FrameGroup from '@/api/ncs_frameGroup'
+import { unix2Date } from '@/utils/Foundation'
+
+export default {
+  name: 'FrameGroup',
+  components: { ButtonCellRender },
+  data() {
+    return {
+      tableData: [],
+      /** 列表参数 */
+      params: {
+        page_size: 20,
+        page_no: 1,
+        fixedCondition: ' part_id = ' + this.$store.getters.partId
+      },
+      /** 新建组织弹出参数 **/
+      formtitle: '新建病区',
+      formshow: false,
+      formmodel: {},
+      rules: {
+        group_name: [
+          { required: true, message: '区域名称不能为空', trigger: 'blur' }
+        ]
+      },
+      /** ag-grid参数 **/
+      pageData: [],
+      loading: false,
+      errorId: null,
+      shopVisible: false,
+      columnDefs: null,
+      rowData: null,
+      defaultColDef: null,
+      gridOptions: null,
+      gridApi: null,
+      columnApi: null,
+      localeText: AG_GRID_LOCALE_CN,
+      filterState: null,
+      rowSelection: null,
+      frameworkComponents: null
+    }
+  },
+  computed: {
+    tableHeight() {
+      return this.mainAreaHeight - 130
+    }
+  },
+  beforeMount() {
+    this.gridOptions = {}
+    this.columnDefs = [
+      {
+        headerName: '#',
+        headerCheckboxSelection: true,
+        headerCheckboxSelectionFilteredOnly: true,
+        checkboxSelection: true,
+        sortable: false, filter: false,
+        width: 100,
+        resizable: false,
+        valueGetter: this.hashValueGetter
+      },
+      { headerName: 'ID', field: 'id', sortable: true, filter: 'agNumberColumnFilter' },
+      {
+        headerName: '区域名称', field: 'group_name', sortable: true, filter: 'agTextColumnFilter', flex: 1
+      },
+      // lockPosition 锁定位置，会在第一列
+      // lockPinned = true 不能拖动然后固定
+      // resizeable 单元个大小是否可以调整
+      {
+        headerName: '创建时间',
+        field: 'create_time',
+        sortable: true,
+        filter: 'agNumberColumnFilter',
+        width: 200,
+        valueFormatter: this.unixDateFormatter
+      },
+      {
+        headerName: '更新时间',
+        field: 'update_time',
+        sortable: true,
+        filter: 'agNumberColumnFilter',
+        width: 200,
+        valueFormatter: this.unixDateFormatter
+      },
+      {
+        headerName: '编辑', field: 'shop_id',
+        cellRendererFramework: 'ButtonCellRender',
+        cellRendererParams: {
+          onClick: this.handEdit,
+          label: '编辑',
+          buttonType: 'primary',
+          buttonSize: 'mini'
+        },
+        filter: false,
+        pinned: 'right',
+        lockPinned: true,
+        width: 100,
+        resizable: false,
+        sortable: false
+      },
+      {
+        headerName: '删除', field: 'shop_id',
+        cellRendererFramework: 'ButtonCellRender',
+        cellRendererParams: param => {
+          return {
+            onClick: this.deleteSingle,
+            label: '删除',
+            buttonType: 'danger',
+            buttonSize: 'mini'
+          }
+        },
+        pinned: 'right',
+        lockPinned: true,
+        width: 100,
+        resizable: false,
+        filter: false,
+        sortable: false
+      }
+    ]
+    this.defaultColDef = {
+      filter: 'agTextColumnFilter',
+      sortable: true,
+      resizable: true,
+      comparator: this.dateCustomComparator,
+      filterParams: {
+        debounceMs: 200,
+        newRowsAction: 'keep',
+        textCustomComparator: this.textCustomComparator,
+        comparator: this.dateCustomComparator
+      }
+    }
+    this.rowSelection = 'multiple'
+  },
+  mounted() {
+    window.onresize = this.windowResize
+    this.gridApi = this.gridOptions.api
+    this.gridColumnApi = this.gridOptions.columnApi
+    // 设置默认排序字段，应用列状态之后会触发 gridSortChange 函数，会调用getlist，后面不需要再调用this.getlist
+    this.gridColumnApi.applyColumnState({
+      state: [
+        {
+          colId: 'id',
+          sort: 'asc'
+        }
+      ]
+    })
+    // this.getList()
+  },
+  methods: {
+    windowResize() {
+      this.$set(this, 'mainAreaHeight', Number(document.documentElement.clientHeight) - 84)
+    },
+    handlerDelete(ids) {
+      this.$confirm('删除操作后数据不可复原，您确定要删除此数据?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        API_FrameGroup.remove(ids).then(
+          response => {
+            this.getList()
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            })
+          }
+        ).catch(response => {
+          this.$message({
+            type: 'info',
+            message: response.message
+          })
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    deleteSingle(row) {
+      this.handlerDelete(row.id)
+    },
+    /**
+             * 创建组织
+             */
+    createOrginazition() {
+      this.formshow = true
+      this.formmodel = {
+        group_name: ''
+      }
+    },
+    /** 分页大小发生改变 */
+    handlePageSizeChange(size) {
+      this.params.page_size = size
+      this.getList()
+    },
+
+    /** 分页页数发生改变 */
+    handlePageCurrentChange(page) {
+      this.params.page_no = page
+      this.getList()
+    },
+    /** 加载列表数据 */
+    getList() {
+      this.loading = true
+      const param = this.MixinClone(this.params)
+      this.gridApi.showLoadingOverlay()
+      API_FrameGroup.getList(param).then(response => {
+        this.loading = false
+        // this.tableData = [...response.data]
+        this.pageData = {
+          page_no: response.page_no,
+          page_size: response.page_size,
+          data_total: response.data_total
+        }
+        this.rowData = [...response.data]
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    /** 处理搜索 */
+    handlerSearch(keywords) {
+      this.params.query = keywords
+      this.getList()
+    },
+    /** 处理字段排序 */
+    tableSort(column) {
+      if (column.order !== null) {
+        this.params.sort = column.prop
+        this.params.dir = column.order === 'ascending' ? 'asc' : 'desc'
+      } else {
+        this.params.sort = null
+        this.params.dir = null
+      }
+      this.getList()
+    },
+    /**
+             * 格式化unix时间戳
+             **/
+    unixDateFormatter(param) {
+      if (!param.value) return ''
+      return unix2Date(param.value * 1000)
+    },
+
+    gridSortChange(param) {
+      console.log('sortparam', param)
+      const columnState = param.columnApi.getColumnState()
+      // 排序状态
+      const sortState = columnState.filter(function(s) {
+        return s.sort != null
+      }).map(function(s) {
+        return {
+          colId: s.colId,
+          sort: s.sort,
+          sortIndex: s.sortIndex
+        }
+      }).sort(function(a, b) {
+        return a.sortIndex - b.sortIndex
+      })
+      if (sortState.length > 0) {
+        if (sortState.length === 1) {
+          this.params.sort = sortState[0].colId
+          this.params.dir = sortState[0].sort
+        } else {
+          let sortstring = ''
+          sortState.forEach(function(item) {
+            sortstring += item.colId + ' ' + item.sort + ','
+          })
+          this.params.sort = sortstring.substring(0, sortstring.length - 1)
+          this.params.dir = ' '
+        }
+      } else {
+        delete this.params.sort
+        delete this.params.dir
+      }
+
+      this.getList()
+      console.log(sortState)
+    },
+    filterModifed(param) { // todo 通过转换后的数值过滤，需要转回原始数值
+      console.log(param)
+      var model = param.api.getFilterModel()
+      console.log('model', JSON.stringify(model))
+      this.params.filter = JSON.stringify(model)
+      this.getList()
+    },
+    handEdit(row) {
+      this.$router.push({ name: 'frameGroupEdit', params: { id: row.id, callback: this.getList() }})
+    },
+    /**
+             * 提交新增表单
+             * @param formname
+             */
+    handlerFormSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          /** 新增 */
+          delete this.formmodel.id
+          this.formmodel.part_id = this.$store.getters.partId
+          API_FrameGroup.add(this.formmodel).then(() => {
+            this.formshow = false
+            this.$message.success('保存成功！')
+            this.getList()
+          }).catch(err => {
+            this.$message.error(err)
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/hospitalFrame/frameGroupEdit.vue

@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <el-card style="margin: 15px">
+      <el-form ref="editform" :rules="rules" label-width="80px" :model="formmodel">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="区域名称" prop="group_name">
+              <el-input
+                v-model="formmodel.group_name"
+                clearable
+                :maxlength="100"
+                placeholder="请输入区域名称"
+              />
+            </el-form-item>
+
+          </el-col>
+        </el-row>
+        <fieldset class="margin-top-sm">
+          <legend>病区管辖空间</legend>
+          <el-row :gutter="20">
+            <el-col v-for="(item,index) in rooms" :key="index" gut :xs="8" :sm="6" :md="4" :lg="4" :xl="4">
+              <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                  <el-checkbox v-model="item.checked" @change="handleCheckboxChanged(item)"><svg-icon icon-class="sickroom" style="color: #9aaabf;margin-right: 5px" /><span>{{ item.name }}</span></el-checkbox>
+                  <el-checkbox v-model="item.allCkeck" style="float: right;" :indeterminate="item.indeterminate" @change="(checked)=>{handleCheckAll(checked,item)}">全选</el-checkbox>
+                </div>
+                <div v-for="(bed,_index) in item.children" :key="_index" class="text item">
+                  <el-checkbox v-model="bed.checked" @change="handleCheckboxChanged(item)"><svg-icon icon-class="bed" style="color: #9aaabf;margin-right: 5px" />{{ bed.name }}</el-checkbox>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+        </fieldset>
+        <el-form-item align="center" class="margin-top-sm">
+          <el-button type="success" @click="onSubmit">保存设置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+/**
+     * 编辑病区信息
+     */
+import * as API_FrameGroup from '@/api/ncs_frameGroup'
+export default {
+  name: 'FrameGroupEdit',
+  data() {
+    return {
+      groupId: this.$route.params.id,
+      formmodel: {
+        group_name: null
+      },
+      rules: {
+        group_name: [
+          { required: true, message: '区域名称不能为空', trigger: 'blur' }
+        ] },
+      /** 空间结构房间 **/
+      rooms: []
+    }
+  },
+  mounted() {
+    this.getGroup()
+    this.getRoomStructs()
+  },
+  methods: {
+
+    getGroup() {
+      API_FrameGroup.get(this.groupId).then(res => {
+        this.formmodel = { ...res }
+      })
+    },
+
+    getRoomStructs() {
+      API_FrameGroup.getRoomStruct(this.$store.getters.partId).then(res => {
+        this.rooms = this.filterGroupFrames(res, this.groupId)
+        console.log('rooms', this.rooms)
+      }).catch(err => {
+        this.$message.error(err)
+      })
+    },
+
+    /** 递归筛选被选空间节点 */
+    filterGroupFrames(frames, groupId) {
+      const _frames = []
+      frames.forEach(item => {
+        if (Number(groupId) === item.group_id) {
+          item.checked = true
+        } else {
+          item.checked = false
+        }
+        if (item.children) {
+          this.$set(item, 'children', this.filterGroupFrames(item.children, groupId))
+        }
+        _frames.push(item)
+      })
+      _frames.forEach(item => {
+        this.countAllFrame(item)
+      })
+      return _frames
+    },
+    /** 选择 */
+    handleCheckboxChanged(item) {
+      this.countAllFrame(item)
+    },
+    handleCheckAll(checked, item) {
+      this.$set(item, 'indeterminate', false)
+      this.setFrameCheck(item, checked)
+    },
+    /** 获取所有frame的长度、被选中的长度 */
+    countAllFrame(frame) {
+      const _list = []
+      if (!Array.isArray(frame)) {
+        _list.push(frame)
+        if (frame.children) _list.push(...this.countAllFrame(frame.children))
+      } else {
+        frame.forEach(item => {
+          _list.push(item)
+          if (item.children) _list.push(...this.countAllFrame(item.children))
+        })
+      }
+      const length = _list.length
+      const length_checked = _list.filter(_item => _item.checked).length
+      this.$set(frame, 'allCkeck', length === _list.filter(_item => _item.checked).length)
+      this.$set(frame, 'indeterminate', (length_checked !== 0) && (length !== length_checked))
+      console.log('list', _list)
+      return _list
+    },
+    /** 设置选择状态 */
+    setFrameCheck(item, checked) {
+      const perm = this.MixinClone(item)
+      if (!Array.isArray(perm)) {
+        this.$set(item, 'checked', checked)
+        if (item.children && item.children.length) {
+          this.$set(item, 'children', this.setFrameCheck(item.children, checked))
+        }
+      } else {
+        perm.map(item => {
+          item.checked = checked
+          this.$set(item, 'checked', checked)
+          if (item.children && item.children.length) {
+            this.$set(item, 'children', this.setFrameCheck(item.children, checked))
+          }
+        })
+      }
+      return perm
+    },
+    onSubmit() {
+      this.$refs['editform'].validate((valid) => {
+        if (valid) {
+          API_FrameGroup.update(this.formmodel.id, { frame_group: this.formmodel, areas: this.rooms }).then(res => {
+            this.$message.success('保存成功！')
+          }).catch(err => {
+            this.$message.error(err.message)
+          })
+        } else {
+          this.$message.error('表单填写错误，请检查！')
+        }
+      })
+    }
+  }
+
+}
+</script>
+
+<style scoped type="text/scss">
+  /deep/ .el-checkbox__input.is-checked + .el-checkbox__label svg{
+    color: #1890ff !important;
+  }
+  .item {
+    margin-bottom: 10px;
+  }
+  /deep/ .el-card__body {
+      min-height: 130px;
+    }
+  /deep/ .el-card__header{
+      padding:10px 20px;
+    }
+  .margin-top-sm{
+    margin-top: 20px;
+  }
+fieldset{
+  border:1px solid #DCDFE6;
+  border-radius: 5px;
+}
+</style>