award_punish.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511
  1. <template>
  2. <div class="all" style="padding: 20px;">
  3. <el-tabs v-model="tabs" type="card">
  4. <el-tab-pane label="奖扣成功" name="success"></el-tab-pane>
  5. <el-tab-pane label="待审批" name="waiting"></el-tab-pane>
  6. <el-tab-pane label="被驳回" name="refuse"></el-tab-pane>
  7. </el-tabs>
  8. <el-row style="margin-bottom: 15px;">
  9. <el-col :span="12">
  10. <el-button type="primary" @click="point_b">奖扣B分</el-button>
  11. <el-button type="primary" @click="point_a" plain>奖扣A分</el-button>
  12. </el-col>
  13. <el-col :span="6" :offset="6">
  14. <el-input v-model="keyword" placeholder="输入同事姓名/内容" @keyup.enter.native="getData">
  15. <el-button slot="append" @click="getData" icon="el-icon-search"></el-button>
  16. </el-input>
  17. </el-col>
  18. </el-row>
  19. <el-table v-if="tabs == 'success'" :data="dataList" stripe fit v-loading="table_loading" @row-click="open_detail">
  20. <el-table-column label="姓名" prop="employee_id" align="left">
  21. <template slot-scope="scope">
  22. <div class="flex-box flex-contet-conter">
  23. <userImage :user_name="scope.row.employee_name" width="50px" height="50px"></userImage>
  24. <span style="margin-left: 10px; line-height: 50px;">{{ scope.row.employee_name }}</span>
  25. </div>
  26. </template>
  27. </el-table-column>
  28. <el-table-column prop="remark" show-overflow-tooltip label="奖扣内容"></el-table-column>
  29. <el-table-column prop="point" label="积分" width="120">
  30. <template slot-scope="scope">
  31. <span :class="{ color_green: scope.row.point < 0, color_red: scope.row.point > 0 }">
  32. <span v-show="scope.row.point > 0">+</span>
  33. {{ scope.row.point }} {{ point_name(scope.row.pt_id) }}
  34. </span>
  35. </template>
  36. </el-table-column>
  37. <el-table-column prop="create_time" label="奖扣时间" width="150">
  38. <template slot-scope="scope">
  39. {{ cuttString(scope.row.create_time) }}
  40. </template>
  41. </el-table-column>
  42. <template slot="empty">
  43. <noData></noData>
  44. </template>
  45. </el-table>
  46. <el-table v-if="tabs !== 'success'" :data="dataList" stripe fit v-loading="table_loading" @row-click="open_detail1">
  47. <el-table-column label="姓名" prop="employee_id" align="left">
  48. <template slot-scope="scope">
  49. <div class="flex-box flex-contet-conter">
  50. <userImage :user_name="scope.row.employee_name" width="50px" height="50px"></userImage>
  51. <span style="margin-left: 10px; line-height: 50px;">{{ scope.row.employee_name }}</span>
  52. </div>
  53. </template>
  54. </el-table-column>
  55. <el-table-column prop="remark" show-overflow-tooltip label="奖扣内容">
  56. <template slot-scope="scope">
  57. {{ scope.row.remark.customize }}
  58. </template>
  59. </el-table-column>
  60. <el-table-column prop="event_time" label="奖扣时间" width="150"></el-table-column>
  61. <template slot="empty">
  62. <noData></noData>
  63. </template>
  64. </el-table>
  65. <center style="margin-top: 15px;">
  66. <el-pagination
  67. background
  68. @size-change="handleSizeChange"
  69. @current-change="handleCurrentChange"
  70. :current-page="formData.page"
  71. :page-sizes="[10, 20, 30, 40, 50, 100]"
  72. layout="total, sizes, prev, pager, next"
  73. :page-size="pageLimit"
  74. :total="formData.total"
  75. ></el-pagination>
  76. </center>
  77. <el-drawer title="奖扣详情" :visible.sync="drawer" ref="drawer" :with-header="false" :size="'600px'" direction="rtl">
  78. <div class="drawer_title">奖扣详情</div>
  79. <div class="detail_popup" v-loading="detail_loading" v-if="detail_info !== null">
  80. <el-row :gutter="10" style="padding-bottom:10px;border-bottom:1px #f8f8f8 solid;">
  81. <el-col :span="24">
  82. <div class="flex-box flex-v-ce">
  83. <userImage :user_name="detail_info.employee_name" :img_url="detail_info.img_url" width="50px" height="50px" fontSize="1"></userImage>
  84. <span style="line-height:50px; margin-left:10px;margin:0px 10px;">{{ detail_info.employee_name }}</span>
  85. <span class="color_red point" v-show="detail_info.point >= 0 && detail_info.point"> +{{ detail_info.point }}</span>
  86. <span class="color_green point" v-show="detail_info.point < 0 && detail_info.point"> {{ detail_info.point }}</span>
  87. <span v-show="detail_info.point"> {{ detail_info.pt_id == 1 ? '绩效分' : detail_info.pt_id == 2 ? 'A分' : detail_info.pt_id == 3 ? 'B分' : '' }}</span>
  88. </div>
  89. </el-col>
  90. </el-row>
  91. <el-row :gutter="10">
  92. <el-col :span="4">任务描述</el-col>
  93. <el-col :span="20" v-if="detail_info.remark">{{ detail_info.remark && (detail_info.remark.customize || detail_info.remark.rule) }}</el-col>
  94. </el-row>
  95. <el-row :gutter="10">
  96. <el-col :span="4">规则分类</el-col>
  97. <el-col :span="20">{{ detail_info.rule_list }}</el-col>
  98. </el-row>
  99. <el-row :gutter="10" v-show="detail_info.rule_list">
  100. <el-col :span="4">事件时间</el-col>
  101. <el-col :span="20">{{ detail_info.date }}</el-col>
  102. </el-row>
  103. <el-row :gutter="10" v-show="detail_info.source_type_mark">
  104. <el-col :span="4">来源类型</el-col>
  105. <el-col :span="20">{{ detail_info.source_type_mark }}</el-col>
  106. </el-row>
  107. <el-row :gutter="10" v-show="!detail_info.rule_id">
  108. <el-col :span="4">记录人</el-col>
  109. <el-col :span="20">{{ detail_info.employee_name }}</el-col>
  110. </el-row>
  111. <el-row :gutter="10" :v-if="detail_info.files">
  112. <el-col v-for="(item, index) in detail_info.files" :key="index" :span="4">{{ index == 0 ? '图片' : '' }}</el-col>
  113. <el-col :span="20">
  114. <el-image
  115. v-for="(item, index) in detail_info.files"
  116. :key="index"
  117. style="width: 100px; height: 100px;margin-right:8px"
  118. :src="item"
  119. :preview-src-list="detail_info.files"
  120. ></el-image>
  121. </el-col>
  122. </el-row>
  123. <div v-show="detail_info.rule_item_id">
  124. <p class="row_title">规则依据</p>
  125. <el-row :gutter="10">
  126. <el-col :span="4">规则分类</el-col>
  127. <el-col :span="19">{{ detail_info.rule_list }}</el-col>
  128. </el-row>
  129. <el-row v-if="detail_info.remark && detail_info.remark.rule">
  130. <el-col :span="4">积分规则</el-col>
  131. <el-col :span="19">{{ detail_info.remark.rule }}</el-col>
  132. </el-row>
  133. <el-row v-if="detail_info.rule_item">
  134. <el-col :span="4">积分</el-col>
  135. <el-col :span="19" v-show="detail_info.rule_item.min_point == detail_info.rule_item.max_point">{{ detail_info.rule_item.min_point }}</el-col>
  136. <el-col :span="19" v-show="detail_info.rule_item.min_point != detail_info.rule_item.max_point">
  137. {{ detail_info.rule_item.min_point }} ~ {{ detail_info.rule_item.max_point }}
  138. </el-col>
  139. </el-row>
  140. </div>
  141. <div v-show="detail_info.process != false">
  142. <p class="row_title">
  143. 审批
  144. <span class="row_tips">多人审批时,以最后一人为准</span>
  145. </p>
  146. <div class="examine_steps">
  147. <el-steps direction="vertical" :space="50">
  148. <el-step v-for="(item, index) in detail_info.process" :key="index">
  149. <template slot="icon">
  150. <userImage width="36px" height="36px" :img_url="item.img_url" :user_name="item.name"></userImage>
  151. </template>
  152. <template slot="title">
  153. <div style="color: #303133;font-size:14px;margin-top:-2px;">
  154. {{ item.name }} {{ item.remark }}
  155. <!-- <span v-show="item.point !== 0">{{item.point}}</span> -->
  156. </div>
  157. </template>
  158. <template slot="description">
  159. <div style="color:rgb(130 130 130)">{{ item.time }}</div>
  160. </template>
  161. </el-step>
  162. </el-steps>
  163. </div>
  164. </div>
  165. </div>
  166. </el-drawer>
  167. <el-drawer title="奖扣详情" :visible.sync="detailShow" :with-header="false" :size="'600px'" direction="rtl">
  168. <div class="drawer_title">奖扣详情</div>
  169. <div class="detail_popup" v-loading="detail_loading" v-if="detail_info !== null">
  170. <el-row :gutter="10" style="padding-bottom:10px;border-bottom:1px #f8f8f8 solid;">
  171. <el-col :span="24" >
  172. <div class="flex-box flex-v-ce">
  173. <userImage :user_name="detail_info.employee_name" width="50px" height="50px" fontSize="1"></userImage>
  174. <span style="line-height:50px; margin-left:10px;margin:0px 10px;">{{ getEmployeeName(detail_info.applyor_id) }}</span>
  175. <span class="color_red point" v-show="detail_info.point >= 0 && detail_info.point">+{{ detail_info.point }}</span>
  176. <span class="color_green point" v-show="detail_info.point < 0 && detail_info.point">{{ detail_info.point }}</span>
  177. <span v-show="detail_info.point">{{ detail_info.pt_id == 1 ? '绩效分' : detail_info.pt_id == 2 ? 'A分' : detail_info.pt_id == 3 ? 'B分' : '' }}</span>
  178. </div>
  179. </el-col>
  180. </el-row>
  181. <el-row :gutter="10" v-show="detail_info.source_type_mark">
  182. <el-col :span="4">来源类型</el-col>
  183. <el-col :span="20">{{ detail_info.source_type_mark }}</el-col>
  184. </el-row>
  185. <el-row :gutter="10" v-for="(item, index) in detail_info.detail" :key="index">
  186. <el-col :span="4">{{ item.key }}</el-col>
  187. <el-col :span="20" v-if="item.key == '附件'">
  188. <el-image style="width: 100px; height: 100px" :src="item.value[0]" :preview-src-list="item.value"></el-image>
  189. </el-col>
  190. <el-col :span="20" v-else>{{ item.value }}</el-col>
  191. </el-row>
  192. <el-row :gutter="10" :v-if="detail_info.files">
  193. <el-col v-for="(item, index) in detail_info.files" :key="index" :span="4">{{ index == 0 ? '图片' : '' }}</el-col>
  194. <el-col :span="20">
  195. <el-image
  196. v-for="(item, index) in detail_info.files"
  197. :key="index"
  198. style="width: 100px; height: 100px;margin-right:8px"
  199. :src="item"
  200. :preview-src-list="detail_info.files"
  201. ></el-image>
  202. </el-col>
  203. </el-row>
  204. <div v-show="detail_info.rule_id && detail_info.process !== null && detail_info.process.length > 0">
  205. <p class="row_title">
  206. 审批
  207. <span class="row_tips">多人审批时,以最后一人为准</span>
  208. </p>
  209. <div class="examine_steps">
  210. <el-steps direction="vertical" :space="50">
  211. <el-step v-for="(item, index) in detail_info.process" :key="index">
  212. <template slot="icon">
  213. <userImage width="36px" height="36px" :img_url="item.img_url" :user_name="item.name"></userImage>
  214. </template>
  215. <template slot="title">
  216. <div style="color: #303133;font-size:14px;margin-top:-2px;">
  217. {{ item.name }} {{ item.remark }}
  218. <!-- <span v-show="item.point !== 0">{{item.point}}</span> -->
  219. </div>
  220. </template>
  221. <template slot="description" style="">
  222. <div style="color:rgb(130 130 130)">{{ item.time }}</div>
  223. </template>
  224. </el-step>
  225. </el-steps>
  226. </div>
  227. </div>
  228. </div>
  229. </el-drawer>
  230. <bonusPointsPopup :title="popuTitle" :visible.sync="popupVisible" :refresh.sync="refreshData" :integralType.sync="integralType"></bonusPointsPopup>
  231. </div>
  232. </template>
  233. <script>
  234. import EmployeeSelector from '@/components/EmployeeSelector.vue';
  235. import moment from 'moment';
  236. import noData from '@/components/noData';
  237. import bonusPointsPopup from '@/components/bonusPointsPopup';
  238. export default {
  239. data() {
  240. return {
  241. refreshData: '',
  242. popuTitle: '奖扣A分',
  243. popupVisible: false,
  244. integralType: 0,
  245. table_loading: false,
  246. formData: {
  247. page: 1,
  248. page_size: 10,
  249. total: 0
  250. },
  251. tabs: 'success',
  252. dataList: [],
  253. pageLimit: 10,
  254. keyword: '',
  255. showTitle: false,
  256. dialogVisible: false,
  257. dialogData: {
  258. members: [],
  259. items: [
  260. {
  261. rule_switch: false,
  262. rule_id: '',
  263. item_id: '',
  264. point: '0',
  265. remark: '',
  266. event_time: moment().format('YYYY-MM-DD'),
  267. approval: '',
  268. approval_not_select: [],
  269. approval_selected: { dept: [], employee: [] },
  270. plus: true,
  271. pt_id: '',
  272. reviewer_id: '',
  273. files: []
  274. }
  275. ]
  276. },
  277. itemData: {},
  278. rules: {
  279. manager: [{ required: true, message: '请选择录入对象', trigger: 'blur' }]
  280. },
  281. manager: '',
  282. employee_not_select: [],
  283. manager_selected: { dept: [], employee: [] },
  284. show_employee_selector: false,
  285. show_approval_selector: false,
  286. itemIndex: 0,
  287. rule_list: [],
  288. rule_item_list: {},
  289. rule_item_list_value: null,
  290. drawer: false,
  291. detail_loading: false,
  292. detail_info: {},
  293. detailShow: false,
  294. employee_name: JSON.parse(localStorage.getItem('SET_EMPLOYEE_MAP')),
  295. fileList: [],
  296. userId:167
  297. };
  298. },
  299. components: {
  300. EmployeeSelector,
  301. bonusPointsPopup,
  302. noData
  303. },
  304. mounted() {
  305. // if(this.$route.query.type == 1){
  306. // this.point_a()
  307. // }else if(this.$route.query.type == 2){
  308. // this.point_b()
  309. // }
  310. this.getData()
  311. },
  312. watch: {
  313. tabs(val) {
  314. this.dataList = [];
  315. this.formData.total = 0;
  316. this.keyword = '';
  317. this.formData.page = 1;
  318. this.formData.page_size = 10;
  319. this.getData();
  320. },
  321. refreshData(val) {
  322. // this.getData();
  323. }
  324. },
  325. methods: {
  326. getEmployeeName(id) {
  327. for (const key in this.employee_name) {
  328. if (this.employee_name[key].id == id) {
  329. return this.employee_name[key].name;
  330. }
  331. }
  332. },
  333. open_detail1(item) {
  334. this.detailShow = true;
  335. let data = {
  336. review_id: item.id
  337. };
  338. this.detail_loading = true;
  339. this.$axios('get', '/api/integral/review', data).then(res => {
  340. if (res.data.code == 1) {
  341. this.detail_info = res.data.data;
  342. } else {
  343. this.$message.error(res.data.data.msg);
  344. }
  345. })
  346. .finally(() => {
  347. this.detail_loading = false;
  348. });
  349. },
  350. open_detail(item) {
  351. this.drawer = true;
  352. let data = {
  353. event_id: item.id
  354. };
  355. this.detail_loading = true;
  356. this.$axios('get', '/api/integral/statistics/integral/info', data).then(res => {
  357. if (res.data.code == 1) {
  358. this.detail_info = res.data.data;
  359. } else {
  360. this.$message.error(res.data.data.msg);
  361. }
  362. })
  363. .finally(() => {
  364. this.detail_loading = false;
  365. });
  366. },
  367. cuttString(data) {
  368. return data.substring(0, 10);
  369. },
  370. point_a() {
  371. this.popupVisible = false;
  372. this.integralType = 2;
  373. this.popuTitle = '奖扣A分';
  374. this.popupVisible = true;
  375. },
  376. point_b() {
  377. this.popupVisible = false;
  378. this.integralType = 3;
  379. this.popuTitle = '奖扣B分';
  380. this.popupVisible = true;
  381. },
  382. point_name(id) {
  383. return this.$getTyps(id).name;
  384. },
  385. handleCurrentChange(val) {
  386. this.formData.page = val;
  387. this.getData();
  388. },
  389. handleSizeChange(val) {
  390. this.pageLimit = val;
  391. this.formData.page_size = this.pageLimit;
  392. this.getData();
  393. },
  394. getData() {
  395. this.table_loading = true;
  396. let data = {};
  397. if (this.tabs == 'success') {
  398. data = {
  399. page: this.formData.page,
  400. page_size: this.formData.page_size,
  401. recorder_id:this.userId,
  402. source_type: '1',
  403. keyword: this.keyword
  404. };
  405. } else if (this.tabs == 'waiting') {
  406. data = {
  407. page: this.formData.page,
  408. page_size: this.formData.page_size,
  409. keyword: this.keyword,
  410. pt_id: '0',
  411. type: 'waiting'
  412. };
  413. } else {
  414. data = {
  415. page: this.formData.page,
  416. page_size: this.formData.page_size,
  417. keyword: this.keyword,
  418. pt_id: '0',
  419. type: 'refuse'
  420. };
  421. }
  422. this.$axios('get', this.tabs == 'success' ? '/api/integral/statistics/integral' : '/api/integral/review/entry/list', data)
  423. .then(res => {
  424. if (res.data.code == 1) {
  425. this.dataList = res.data.data.list;
  426. this.formData.total = res.data.data.total;
  427. }
  428. })
  429. .finally(() => {
  430. this.table_loading = false;
  431. });
  432. }
  433. }
  434. };
  435. </script>
  436. <style scoped lang="scss">
  437. .box {
  438. background-color: #ffffff;
  439. padding: 20px;
  440. min-height: calc(100vh - 160px);
  441. }
  442. .color_green {
  443. color: #4bd964;
  444. }
  445. .color_red {
  446. color: #f56c6c;
  447. }
  448. .detail_popup {
  449. padding: 20px;
  450. height: calc(100vh - 60px);
  451. overflow: auto;
  452. .row_title {
  453. position: relative;
  454. margin: 0 0 20px 0;
  455. padding-top: 12px;
  456. font-size: 16px;
  457. color: #303133;
  458. line-height: 22px;
  459. }
  460. .row_title:before {
  461. position: absolute;
  462. top: 0;
  463. content: ' ';
  464. width: 100%;
  465. border-top: 1px #f8f8f8 solid;
  466. }
  467. .el-row {
  468. margin-bottom: 10px;
  469. font-size: 14px;
  470. .el-col-4 {
  471. color: #606266;
  472. }
  473. }
  474. }
  475. .drawer_title {
  476. font-size: 18px;
  477. padding: 20px;
  478. border-bottom: 1px #efefef solid;
  479. }
  480. ::v-deep .el-table tr:hover {
  481. cursor: pointer;
  482. }
  483. </style>