前台样式调整及测试问题调整

src/api/key-dm-user.js

@@ -47,8 +47,9 @@ export const dmUserOffice = (param) => {
 
 export const getUserTypeList = (param) => {
   return axios.request({
-    url: '/api/ac/jilinsscgsdp/keyDmUserCategory/selectList'
-
+    url: '/api/ac/jilinsscgsdp/keyDmUserCategory/selectList',
+    method: 'post',
+    data: param
   })
 }
 // 获取人员多选器列表（所有在职人员）

src/api/key-dm.js

@@ -167,3 +167,77 @@ export const getWorkloadDetails = (param) => {
     data: param
   })
 }
+
+// ===== 图表分析 =====
+// 汇总统计数据
+export const getSummaryStats = () => {
+  return axios.request({
+    url: '/api/ac/jilinsscgsdp/keyDmUserCategory/getSummaryStats',
+    method: 'post'
+  })
+}
+
+// 请假类型统计
+export const getLeaveTypeStats = () => {
+  return axios.request({
+    url: '/api/ac/jilinsscgsdp/keyDmUserCategory/getLeaveTypeStats',
+    method: 'post'
+  })
+}
+
+// 人员请假统计
+export const getLeaveUserStats = () => {
+  return axios.request({
+    url: '/api/ac/jilinsscgsdp/keyDmUserCategory/getLeaveUserStats',
+    method: 'post'
+  })
+}
+
+// 用品领用统计
+export const getMaterialUsageStats = () => {
+  return axios.request({
+    url: '/api/ac/jilinsscgsdp/keyDmUserCategory/getMaterialUsageStats',
+    method: 'post'
+  })
+}
+
+// 库存预警列表
+export const getStockWarningList = () => {
+  return axios.request({
+    url: '/api/ac/jilinsscgsdp/keyDmUserCategory/getStockWarningList',
+    method: 'post'
+  })
+}
+
+// ===== 部门管理 =====
+export const getOrgList = (param) => {
+  return axios.request({
+    url: '/api/ac/jilinsscgsdp/keyDmUserCategory/selectOrgList',
+    method: 'post',
+    data: param
+  })
+}
+
+export const saveOrg = (param) => {
+  return axios.request({
+    url: '/api/ac/jilinsscgsdp/keyDmUserCategory/saveOrg',
+    method: 'post',
+    data: param
+  })
+}
+
+export const deleteOrg = (param) => {
+  return axios.request({
+    url: '/api/ac/jilinsscgsdp/keyDmUserCategory/deleteOrg',
+    method: 'post',
+    data: param
+  })
+}
+
+export const assignUsersToOrg = (param) => {
+  return axios.request({
+    url: '/api/ac/jilinsscgsdp/keyDmUserCategory/assignUsersToOrg',
+    method: 'post',
+    data: param
+  })
+}

src/router/group/key-person.js

@@ -254,5 +254,13 @@ export default [
       title: '日常管理统计'
     },
     component: () => import('@/view/key-person/key_dm_inventory/stats')
+  },
+  {
+    path: '/key-person/dmChartAnalysis',
+    name: 'dmChartAnalysis',
+    meta: {
+      title: '日常数据统计分析'
+    },
+    component: () => import('@/view/key-person/key_dm_conf/chartAnalysis')
   }
 ]

src/view/key-person/key_dm_inventory/stats.vue

@@ -152,84 +152,128 @@ export default {
       const et = this.workEnd ? normalizeVisitTimeValue(this.workEnd) : null
       if (type === 'leave') {
         this.detailModal.columns = [
-          { title: '人员', key: 'user_name', align: 'center' },
-          { title: '开始', key: 'start_time', align: 'center', render: (h, params) => {
-            const time = params.row.start_time
-            if (time) {
-              const date = new Date(time)
-              const year = date.getFullYear()
-              const month = String(date.getMonth() + 1).padStart(2, '0')
-              const day = String(date.getDate()).padStart(2, '0')
-              const hours = String(date.getHours()).padStart(2, '0')
-              const minutes = String(date.getMinutes()).padStart(2, '0')
-              const seconds = String(date.getSeconds()).padStart(2, '0')
-              return h('span', `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`)
+          {
+            title: '人员',
+            key: 'user_name',
+            align: 'center'
+          },
+          {
+            title: '开始',
+            key: 'start_time',
+            align: 'center',
+            render: (h, params) => {
+              const time = params.row.start_time
+              if (time) {
+                const date = new Date(time)
+                const year = date.getFullYear()
+                const month = String(date.getMonth() + 1).padStart(2, '0')
+                const day = String(date.getDate()).padStart(2, '0')
+                const hours = String(date.getHours()).padStart(2, '0')
+                const minutes = String(date.getMinutes()).padStart(2, '0')
+                const seconds = String(date.getSeconds()).padStart(2, '0')
+                return h('span', `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`)
+              }
+              return h('span', '-')
             }
-            return h('span', '-')
-          }},
-          { title: '结束', key: 'end_time', align: 'center', render: (h, params) => {
-            const time = params.row.end_time
-            if (time) {
-              const date = new Date(time)
-              const year = date.getFullYear()
-              const month = String(date.getMonth() + 1).padStart(2, '0')
-              const day = String(date.getDate()).padStart(2, '0')
-              const hours = String(date.getHours()).padStart(2, '0')
-              const minutes = String(date.getMinutes()).padStart(2, '0')
-              const seconds = String(date.getSeconds()).padStart(2, '0')
-              return h('span', `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`)
+          },
+          {
+            title: '结束',
+            key: 'end_time',
+            align: 'center',
+            render: (h, params) => {
+              const time = params.row.end_time
+              if (time) {
+                const date = new Date(time)
+                const year = date.getFullYear()
+                const month = String(date.getMonth() + 1).padStart(2, '0')
+                const day = String(date.getDate()).padStart(2, '0')
+                const hours = String(date.getHours()).padStart(2, '0')
+                const minutes = String(date.getMinutes()).padStart(2, '0')
+                const seconds = String(date.getSeconds()).padStart(2, '0')
+                return h('span', `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`)
+              }
+              return h('span', '-')
             }
-            return h('span', '-')
-          }},
-          { title: '时长', key: 'duration', align: 'center' },
-          { title: '状态', key: 'status', align: 'center', render: (h, params) => {
-            const status = params.row.status
-            let statusText = ''
-            switch (status) {
-              case 0: statusText = '未提交'; break
-              case 1: statusText = '审核中'; break
-              case 9: statusText = '审核通过'; break
-              case -1: statusText = '驳回'; break
-              default: statusText = status
+          },
+          {
+            title: '时长',
+            key: 'duration',
+            align: 'center'
+          },
+          {
+            title: '状态',
+            key: 'status',
+            align: 'center',
+            render: (h, params) => {
+              const status = params.row.status
+              let statusText = ''
+              switch (status) {
+                case 0: statusText = '未提交'; break
+                case 1: statusText = '审核中'; break
+                case 9: statusText = '审核通过'; break
+                case -1: statusText = '驳回'; break
+                default: statusText = status
+              }
+              return h('span', statusText)
             }
-            return h('span', statusText)
-          }}
+          }
         ]
         getWorkloadDetails({ user_id: row.user_id, start: st, end: et, type: 'leave' }).then(ret => {
           if (ret.data && ret.data.errcode === 0) { this.detailModal.rows = ret.data.data || []; this.detailModal.visible = true } else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
         })
       } else {
         this.detailModal.columns = [
-          { title: '申请时间', key: 'submit_time', align: 'center', render: (h, params) => {
-            const time = params.row.submit_time
-            if (time) {
-              const date = new Date(time)
-              const year = date.getFullYear()
-              const month = String(date.getMonth() + 1).padStart(2, '0')
-              const day = String(date.getDate()).padStart(2, '0')
-              const hours = String(date.getHours()).padStart(2, '0')
-              const minutes = String(date.getMinutes()).padStart(2, '0')
-              const seconds = String(date.getSeconds()).padStart(2, '0')
-              return h('span', `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`)
+          {
+            title: '申请时间',
+            key: 'submit_time',
+            align: 'center',
+            render: (h, params) => {
+              const time = params.row.submit_time
+              if (time) {
+                const date = new Date(time)
+                const year = date.getFullYear()
+                const month = String(date.getMonth() + 1).padStart(2, '0')
+                const day = String(date.getDate()).padStart(2, '0')
+                const hours = String(date.getHours()).padStart(2, '0')
+                const minutes = String(date.getMinutes()).padStart(2, '0')
+                const seconds = String(date.getSeconds()).padStart(2, '0')
+                return h('span', `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`)
+              }
+              return h('span', '-')
             }
-            return h('span', '-')
-          }},
-          { title: '物料', key: 'material_name', align: 'center' },
-          { title: '申请数量', key: 'apply_quantity', align: 'center' },
-          { title: '归还数量', key: 'returned_quantity', align: 'center' },
-          { title: '状态', key: 'approval_status', align: 'center', render: (h, params) => {
-            const status = params.row.approval_status
-            let statusText = ''
-            switch (status) {
-              case 0: statusText = '待提交'; break
-              case 1: statusText = '审核中'; break
-              case 9: statusText = '审核通过'; break
-              case -1: statusText = '驳回'; break
-              default: statusText = status
+          },
+          {
+            title: '物料',
+            key: 'material_name',
+            align: 'center'
+          },
+          {
+            title: '申请数量',
+            key: 'apply_quantity',
+            align: 'center'
+          },
+          {
+            title: '归还数量',
+            key: 'returned_quantity',
+            align: 'center'
+          },
+          {
+            title: '状态',
+            key: 'approval_status',
+            align: 'center',
+            render: (h, params) => {
+              const status = params.row.approval_status
+              let statusText = ''
+              switch (status) {
+                case 0: statusText = '待提交'; break
+                case 1: statusText = '审核中'; break
+                case 9: statusText = '审核通过'; break
+                case -1: statusText = '驳回'; break
+                default: statusText = status
+              }
+              return h('span', statusText)
             }
-            return h('span', statusText)
-          }}
-
+          }
         ]
         getWorkloadDetails({ user_id: row.user_id, start: st, end: et, type: 'inventory' }).then(ret => {
           if (ret.data && ret.data.errcode === 0) { this.detailModal.rows = ret.data.data || []; this.detailModal.visible = true } else this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })

src/view/key-person/key_dm_leave/index.vue

@@ -4,24 +4,22 @@
       <TabPane label="请假申请" name="apply">
         <div class="search-div">
           <Row type="flex" :gutter="16" class="mt8">
-            <Col span="12">
+            <Col span="20">
               <span>开始：</span>
               <DatePicker v-model="filters.apply.start_time" type="date" placeholder="开始日期" style="min-width:110px;margin-right:20px" />
               <span>结束：</span>
               <DatePicker v-model="filters.apply.end_time" type="date" placeholder="结束日期" style="min-width:110px;margin-right:20px" />
-            </Col>
-            <Col span="8">
               <span>状态：</span>
-              <Select v-model="filters.apply.status" style="width: 60%">
+              <Select v-model="filters.apply.status" style="width: 150px">
                 <Option v-for="opt in statusOptions" :key="opt.id" :value="opt.id">{{ opt.name }}</Option>
               </Select>
             </Col>
           <Col span="4" class="text-right">
               <Button type="primary" class="mr10" @click="handleSearch('apply')">搜索</Button>
-              <Button class="mr10" @click="handleReset('apply')">重置</Button>
-              <Button type="success" @click="openApplyModal">申请</Button>
+              <Button type="primary" class="mr10" @click="handleReset('apply')">重置</Button>
+              <Button type="primary" @click="openApplyModal">申请</Button>
             </Col>
-          </Row> 
+          </Row>
         </div>
         <Table border :loading="loading.apply" :columns="applyColumns" :data="tables.apply">
           <template slot="action" slot-scope="{ row }">
@@ -53,21 +51,19 @@
       <TabPane label="审核历史查询" name="history">
         <div class="search-div">
           <Row type="flex" :gutter="16" align="middle">
-            <Col span="12">
+            <Col span="20">
               <span>开始：</span>
               <DatePicker v-model="filters.history.start_time" type="date" placeholder="开始日期" style="min-width:110px;margin-right:20px" />
               <span>结束：</span>
               <DatePicker v-model="filters.history.end_time" type="date" placeholder="结束日期" style="min-width:110px;margin-right:20px" />
-            </Col>
-            <Col span="8">
               <span>状态：</span>
-              <Select v-model="filters.history.status" style="width: 60%">
+              <Select v-model="filters.history.status" style="width: 150px" class="mr10">
                 <Option v-for="opt in statusOptions" :key="opt.id" :value="opt.id">{{ opt.name }}</Option>
               </Select>
             </Col>
             <Col span="4" class="text-right">
               <Button type="primary" class="mr10" @click="handleSearch('history')">搜索</Button>
-              <Button @click="handleReset('history')">重置</Button>
+              <Button type="primary" @click="handleReset('history')">重置</Button>
             </Col>
           </Row>
         </div>
@@ -83,21 +79,19 @@
       <TabPane label="请假申请查询" name="query">
         <div class="search-div">
           <Row type="flex" :gutter="16" align="middle">
-            <Col span="8">
+            <Col span="16">
               <span>开始：</span>
               <DatePicker v-model="filters.query.start_time" type="date" placeholder="开始日期" style="min-width:110px;margin-right:20px" />
               <span>结束：</span>
               <DatePicker v-model="filters.query.end_time" type="date" placeholder="结束日期" style="min-width:110px;margin-right:20px" />
-            </Col>
-            <Col span="8">
               <span>状态：</span>
-              <Select v-model="filters.query.status" style="width: 60%">
+              <Select v-model="filters.query.status" style="width: 150px">
                 <Option v-for="opt in statusOptions" :key="opt.id" :value="opt.id">{{ opt.name }}</Option>
               </Select>
             </Col>
             <Col span="8" class="text-right">
               <Button type="primary" class="mr10" @click="handleSearch('query')">搜索</Button>
-              <Button @click="handleReset('query')">重置</Button>
+              <Button type="primary" @click="handleReset('query')">重置</Button>
             </Col>
           </Row>
         </div>
@@ -119,11 +113,11 @@
               <span>结束：</span>
               <DatePicker v-model="statsEnd" type="date" placeholder="结束日期" style="min-width:110px;margin-right:20px" />
               <span>部门：</span>
-              <Input v-model="statsDept" placeholder="请输入部门名称" style="width:65%" />
+              <Input v-model="statsDept" placeholder="请输入部门名称" style="width: 200px" />
             </Col>
             <Col span="8" class="text-right">
               <Button type="primary" class="mr10" @click="loadStats">统计</Button>
-              <Button @click="resetStats">重置</Button>
+              <Button type="primary" @click="resetStats">重置</Button>
             </Col>
           </Row>
         </div>
@@ -415,6 +409,7 @@ export default {
       if (name === 'pending') this.fetchList('pending')
       if (name === 'history') this.fetchList('history')
       if (name === 'query') this.fetchList('query')
+      if (name === 'stats') this.loadStats()
     },
     fetchList (tab) {
       const apiMap = { apply: getLeaveListByUserId, pending: getPendingList, history: getApprovalHistory, query: getLeaveList }

src/view/key-person/key_dm_user/index.vue

@@ -10,11 +10,11 @@
         </Col> -->
         <Col :span="12" class="text-left">
           <span>姓名：</span>
-          <Input v-model="filters.name" placeholder="请输入姓名" style="width: 40%" />
+          <Input v-model="filters.name" placeholder="请输入姓名" style="width: 200px" />
         </Col>
         <Col :span="12" class="text-right">
           <Button type="primary" class="mr10" @click="handleSearch">搜索</Button>
-          <Button @click="handleReset" class="mr10">重置</Button>
+          <Button type="primary" @click="handleReset" class="mr10">重置</Button>
           <Button type="primary" class="mr10" @click="handleSync">同步</Button>
         </Col>
       </Row>
@@ -56,10 +56,10 @@
         <!-- 角色已移除 -->
         <!-- <FormItem label="归属部门">
           <SelectDisplay v-model="editModal.form.office_id" placeholder="请输入机构" @open="openOfficeSelect(editModal.form)" />
-        </FormItem>
-        <FormItem label="直属领导">
-          <SelectDisplay v-model="editModal.form.leader" placeholder="只能选择本级或父机构人员" @open="openSelectLeader(editModal.form)" />
         </FormItem> -->
+        <FormItem label="直属领导">
+          <Input v-model="editModal.form.leader_name" readonly placeholder="点击选择直属领导" @click.native="selectLeader" style="cursor: pointer" />
+        </FormItem>
         <FormItem label="是否离职">
           <Select v-model="editModal.form.is_leave" style="width: 160px">
             <Option :value="0">未离职</Option>
@@ -72,16 +72,25 @@
         <Button type="primary" :loading="editModal.saving" @click="saveEdit">保存</Button>
       </div>
     </Modal>
+
+    <!-- 人员选择器 -->
+    <UserSelector
+      v-model="userSelectorVisible"
+      permission=""
+      @on-ok="handleLeaderSelected"
+      @cancel="userSelectorVisible = false" />
+
     <!-- 领导与归属部门选择已移除 -->
   </div>
 </template>
 
 <script>
 import { getDmUserList, syncDmUsersByOffice, saveDmUser } from '@/api/key-dm-user'
+import UserSelector from './userSelector.vue'
 
 export default {
   name: 'key-dm-user-index',
-  components: {},
+  components: { UserSelector },
   data () {
     return {
       officeCode: '',
@@ -103,7 +112,8 @@ export default {
         visible: false,
         saving: false,
         form: {}
-      }
+      },
+      userSelectorVisible: false
       // leader / office state 已移除
     }
   },
@@ -188,6 +198,14 @@ export default {
       this.editModal.form = copy
       this.editModal.visible = true
     },
+    selectLeader () {
+      this.userSelectorVisible = true
+    },
+    handleLeaderSelected (user) {
+      this.editModal.form.leader = user.id
+      this.editModal.form.leader_name = user.name
+      this.userSelectorVisible = false
+    },
     /* leader / office 相关方法已移除 */
     saveEdit () {
       this.$refs.editForm.validate(valid => {

src/view/key-person/key_dm_user/userMultiSelector.vue

@@ -4,7 +4,7 @@
       <Row type="flex" :gutter="16" align="middle">
         <Col :span="12">
           <span>姓名：</span>
-          <Input v-model="filters.name" placeholder="请输入姓名" @on-enter="handleSearch" />
+          <Input v-model="filters.name" placeholder="请输入姓名" style="width: 200px" />
         </Col>
         <Col :span="12" class="text-right">
           <Button type="primary" class="mr10" @click="handleSearch">搜索</Button>
@@ -37,7 +37,9 @@ export default {
   name: 'user-multi-selector',
   props: {
     // v-model: value 控制显示
-    value: { type: Boolean, default: false }
+    value: { type: Boolean, default: false },
+    // 范围参数1父，本级，下级2本级
+    round: { type: String, default: '1' }
   },
   data () {
     return {
@@ -50,12 +52,12 @@ export default {
       confirming: false,
       columns: [
         { type: 'selection', width: 60, align: 'center' },
+        { title: '归属部门', key: 'office_name', align: 'center', minWidth: 150 },
         { title: '姓名', key: 'name', align: 'center', minWidth: 100 },
         { title: '工号', key: 'gh', align: 'center', minWidth: 120 },
-        { title: '邮箱', key: 'email', align: 'center', minWidth: 150 },
+        // { title: '邮箱', key: 'email', align: 'center', minWidth: 150 },
         { title: '电话', key: 'phone', align: 'center', minWidth: 120 },
-        { title: '手机', key: 'mobile', align: 'center', minWidth: 120 },
-        { title: '归属部门', key: 'office_name', align: 'center', minWidth: 150 }
+        { title: '手机', key: 'mobile', align: 'center', minWidth: 120 }
       ]
     }
   },
@@ -78,11 +80,7 @@ export default {
   methods: {
     fetchList () {
       this.loading = true
-      const payload = {
-        pageNo: this.pager.pageNo,
-        pageSize: this.pager.pageSize,
-        params: this.filters
-      }
+      const payload = Object.assign({}, { pageNo: this.pager.pageNo, pageSize: this.pager.pageSize, round: this.round }, this.filters)
       getUserMultiSelectorList(payload).then(ret => {
         if (ret.data && ret.data.errcode === 0) {
           const data = ret.data.data || {}

src/view/key-person/key_dm_user/userSelector.vue

+<template>
+  <Modal v-model="visible" title="选择人员" width="900" :mask-closable="false">
+    <div class="search-div">
+      <Row type="flex" :gutter="16" align="middle">
+        <Col :span="12">
+          <span>姓名：</span>
+          <Input v-model="filters.name" placeholder="请输入姓名" style="width: 200px" />
+        </Col>
+        <Col :span="12" class="text-right">
+          <Button type="primary" class="mr10" @click="handleSearch">搜索</Button>
+          <Button @click="handleReset">重置</Button>
+        </Col>
+      </Row>
+    </div>
+
+    <Table
+      :data="rows"
+      :loading="loading"
+      :columns="columns"
+      border
+      highlight-row
+      @on-current-change="onCurrentRowChange"
+      @on-row-dblclick="onRowDblclick" />
+
+    <Page class="page_style" :total="pager.totalRecord" :current="pager.pageNo" :page-size="pager.pageSize" show-total show-sizer
+      @on-change="pageChange" @on-page-size-change="sizeChange" />
+
+    <div slot="footer">
+      <Button @click="handleCancel">取消</Button>
+      <Button type="primary" :loading="confirming" @click="handleConfirm" :disabled="!selectedRow">确定</Button>
+    </div>
+  </Modal>
+</template>
+
+<script>
+import { getUserSelectorList } from '@/api/key-dm-user'
+
+export default {
+  name: 'user-selector',
+  props: {
+    // v-model: value 控制显示
+    value: { type: Boolean, default: false },
+    // 权限参数
+    permission: { type: String, default: '' }
+  },
+  data () {
+    return {
+      visibleInternal: false,
+      filters: { name: '' },
+      rows: [],
+      loading: false,
+      pager: { pageNo: 1, pageSize: 10, totalRecord: 0 },
+      selectedRow: null,
+      confirming: false,
+      columns: [
+        { title: '姓名', key: 'name', align: 'center', minWidth: 100 },
+        { title: '工号', key: 'gh', align: 'center', minWidth: 120 },
+        { title: '邮箱', key: 'email', align: 'center', minWidth: 150 },
+        { title: '电话', key: 'phone', align: 'center', minWidth: 120 },
+        { title: '手机', key: 'mobile', align: 'center', minWidth: 120 },
+        { title: '归属部门', key: 'office_name', align: 'center', minWidth: 150 },
+        { title: '人员分类', key: 'category_names', align: 'center', minWidth: 200 }
+      ]
+    }
+  },
+  computed: {
+    visible: {
+      get () { return this.value },
+      set (v) { this.$emit('input', v) }
+    }
+  },
+  watch: {
+    visible (v) {
+      if (v) {
+        this.pager.pageNo = 1
+        this.selectedRow = null
+        this.filters.name = ''
+        this.fetchList()
+      }
+    }
+  },
+  methods: {
+    fetchList () {
+      this.loading = true
+      const payload = Object.assign({},
+        { pageNo: this.pager.pageNo, pageSize: this.pager.pageSize, office_code: this.officeCode, permission: this.permission },
+        this.filters)
+      getUserSelectorList(payload).then(ret => {
+        if (ret.data && ret.data.errcode === 0) {
+          const data = ret.data.data || {}
+          this.rows = data.results || []
+          this.pager.totalRecord = data.totalRecord || 0
+        } else {
+          this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
+        }
+      }).finally(() => { this.loading = false })
+    },
+    handleSearch () {
+      this.pager.pageNo = 1
+      this.fetchList()
+    },
+    handleReset () {
+      this.filters = { name: '' }
+      this.pager.pageNo = 1
+      this.fetchList()
+    },
+    pageChange (pageNo) {
+      this.pager.pageNo = pageNo
+      this.fetchList()
+    },
+    sizeChange (size) {
+      this.pager.pageSize = size
+      this.pager.pageNo = 1
+      this.fetchList()
+    },
+    onCurrentRowChange (currentRow, oldCurrentRow) {
+      this.selectedRow = currentRow
+    },
+    onRowDblclick (row, index) {
+      this.selectedRow = row
+      this.handleConfirm()
+    },
+    handleCancel () {
+      this.$emit('cancel')
+      this.$emit('input', false)
+    },
+    handleConfirm () {
+      if (!this.selectedRow) {
+        this.$Message.warning('请先选择人员')
+        return
+      }
+      this.confirming = true
+      // emit selected user to parent
+      this.$emit('on-ok', this.selectedRow)
+      this.$emit('input', false)
+      this.confirming = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.search-div { border: 1px solid #dce1e7; padding: 12px; margin-bottom: 12px; background-color: #f8fbff; }
+.mr10 { margin-right: 10px; }
+.page_style { margin-top: 12px; text-align: right; }
+.text-right { text-align: right; }
+</style>