approval_list.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. <template>
  2. <div>
  3. <div class="all padding-20">
  4. <el-tabs v-model="formData.type" type="card">
  5. <el-tab-pane
  6. v-for="(item, index) in tabsOption"
  7. :key="index"
  8. :label="item.label"
  9. :name="item.name"
  10. ></el-tab-pane>
  11. </el-tabs>
  12. <el-form
  13. ref="formData"
  14. :inline="true"
  15. :model="formData"
  16. label-width="50px"
  17. >
  18. <el-form-item label="类型">
  19. <el-select v-model="formData.pt_id" placeholder="请选择排序">
  20. <el-option
  21. v-for="item in point_types"
  22. :key="item.id"
  23. :label="item.name"
  24. :value="item.id"
  25. ></el-option>
  26. </el-select>
  27. </el-form-item>
  28. </el-form>
  29. <div v-if="formData.type == 'waiting'">
  30. <el-table
  31. :data="list"
  32. style="cursor: pointer;"
  33. v-loading="loading"
  34. class="listTable"
  35. @row-click="openDetail"
  36. >
  37. <el-table-column label="审批标题" prop="task_name">
  38. <template slot-scope="scope">
  39. <div class="flex-box flex-v-ce">
  40. <userImage width="50px" height="50px" :user_name="scope.row.employee_name"></userImage>
  41. <div style="margin-left: 5px;">
  42. <span class="tableTitle" v-show="scope.row.source_type == 1" >{{ scope.row.employee_name }}的积分任务</span>
  43. <span class="tableTitle" v-show="scope.row.source_type == 2">{{ scope.row.employee_name }}的积分申请</span>
  44. <span class="tableTitle" v-show="scope.row.source_type == 3">{{ scope.row.employee_name }}的积分录入</span>
  45. <span class="tableTitle" v-show="scope.row.source_type == 4">{{ scope.row.employee_name }}的绩效工作</span>
  46. </div>
  47. </div>
  48. </template>
  49. </el-table-column>
  50. <el-table-column label="审批内容" prop="remark.rule">
  51. <template slot-scope="scope">
  52. <span class="font-flex-word" style="max-width: 200px;">{{ scope.row.remark.customize || scope.row.remark.rule}}</span>
  53. </template>
  54. </el-table-column>
  55. <el-table-column
  56. label="时间"
  57. prop="event_time"
  58. width="150"
  59. ></el-table-column>
  60. <el-table-column label="操作" prop="owner_id" width="80">
  61. <template slot-scope="scope">
  62. <el-button type="text">审批</el-button>
  63. </template>
  64. </el-table-column>
  65. <template slot="empty">
  66. <div class="nopoint_box">
  67. <div class="noimg noperson"></div>
  68. <span class="title">没有对应的数据</span>
  69. </div>
  70. </template>
  71. </el-table>
  72. </div>
  73. <div v-if="formData.type == 'reviewed'">
  74. <el-table :data="list" style="cursor: pointer;" v-loading="loading" class="listTable" @row-click="openDetail">
  75. <el-table-column label="审批标题" prop="task_name">
  76. <template slot-scope="scope">
  77. <div class="flex-box flex-v-ce">
  78. <userImage width="50px" height="50px" :user_name="scope.row.employee_name"></userImage>
  79. <div style="margin-left: 5px;">
  80. <span class="tableTitle" v-show="scope.row.source_type == 1" >{{ scope.row.employee_name }}的积分任务</span>
  81. <span class="tableTitle" v-show="scope.row.source_type == 2">{{ scope.row.employee_name }}的积分申请</span>
  82. <span class="tableTitle" v-show="scope.row.source_type == 3">{{ scope.row.employee_name }}的积分录入</span>
  83. <span class="tableTitle" v-show="scope.row.source_type == 4">{{ scope.row.employee_name }}的绩效工作</span>
  84. </div>
  85. </div>
  86. </template>
  87. </el-table-column>
  88. <el-table-column label="审批内容" prop="remark.rule">
  89. <template slot-scope="scope">
  90. <el-popover trigger="hover" placement="top" popper-class="popperSPBOX">
  91. <span>{{
  92. scope.row.remark.customize || scope.row.remark.rule
  93. }}</span>
  94. <div slot="reference" class="name-wrapper" style="width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
  95. <span>{{
  96. scope.row.remark.customize || scope.row.remark.rule
  97. }}</span>
  98. </div>
  99. </el-popover>
  100. </template>
  101. </el-table-column>
  102. <el-table-column
  103. label="时间"
  104. prop="event_time"
  105. width="150"
  106. ></el-table-column>
  107. <el-table-column label="积分" prop="review_point" width="120">
  108. <template slot-scope="scope">
  109. <span v-show="scope.row.review_point < 0" class="red">{{
  110. scope.row.review_point
  111. }}</span>
  112. <span v-show="scope.row.review_point >= 0"
  113. >+{{ scope.row.review_point }}</span
  114. >
  115. </template>
  116. </el-table-column>
  117. <el-table-column label="状态" prop="status" width="80">
  118. <template slot-scope="scope">
  119. <span v-show="scope.row.status == 1" class="green"
  120. >审批通过</span
  121. >
  122. <span v-show="scope.row.status == 2" class="red"
  123. >审批驳回</span
  124. >
  125. </template>
  126. </el-table-column>
  127. <template slot="empty">
  128. <div class="nopoint_box">
  129. <div class="noimg noperson"></div>
  130. <span class="title">没有对应的数据</span>
  131. </div>
  132. </template>
  133. </el-table>
  134. </div>
  135. <center style="padding: 20px 0;">
  136. <el-pagination
  137. background
  138. @size-change="handleSizeChange"
  139. @current-change="handleCurrentChange"
  140. :current-page="formData.page"
  141. :page-sizes="[10, 20, 30, 40, 50, 100]"
  142. layout="total, sizes, prev, pager, next"
  143. :page-size="formData.page_size"
  144. :total="total"
  145. >
  146. </el-pagination>
  147. </center>
  148. </div>
  149. <examinePopup
  150. :title="'审核详情'"
  151. :id="detail_id"
  152. :show.sync="detailShow"
  153. ></examinePopup>
  154. </div>
  155. </template>
  156. <script>
  157. import examinePopup from "@/components/examinePopup.vue";
  158. export default {
  159. data() {
  160. return {
  161. formData: {
  162. type: "waiting",
  163. source_type: "0",
  164. pt_id: 0,
  165. page_size: 10,
  166. page: 1
  167. },
  168. total: null,
  169. list: null,
  170. loading: false,
  171. point_types: null,
  172. tabsOption: [
  173. { label: "待我审批", name: "waiting" },
  174. { label: "我已审批", name: "reviewed" }
  175. ],
  176. detailShow: false,
  177. detail_id: null
  178. };
  179. },
  180. watch: {
  181. "formData.type"() {
  182. this.formData.page = 1;
  183. this.list = [];
  184. this.getSpList();
  185. },
  186. "formData.pt_id"() {
  187. this.list = [];
  188. this.formData.page = 1
  189. this.getSpList();
  190. },
  191. },
  192. components: { examinePopup },
  193. mounted() {
  194. this.getSpList();
  195. this.point_types = this.getPointTypes();
  196. },
  197. methods: {
  198. openDetail(item) {
  199. this.detail_id = item.id;
  200. this.detailShow = true;
  201. },
  202. getTypes(){
  203. var arr=this.$getTyps();
  204. return arr.filter(function(item){
  205. return item.code!='JX'
  206. })
  207. },
  208. // 获取积分类型
  209. getPointTypes() {
  210. let point = this.getTypes();
  211. point.unshift({ code: "all", id: 0, name: "全部" });
  212. return point;
  213. },
  214. // 页码变更
  215. handleCurrentChange(val) {
  216. this.formData.page = val;
  217. this.getSpList();
  218. },
  219. handleSizeChange(val) {
  220. this.formData.page_size = val;
  221. this.getSpList();
  222. },
  223. getSpList() {
  224. let self = this;
  225. self.loading = true;
  226. let params = JSON.parse(JSON.stringify(this.formData));
  227. self.$axios('get',"/api/integral/review/list",params).then(res => {
  228. if (res.data.code == 1) {
  229. self.list = res.data.data.list;
  230. self.total = res.data.data.total;
  231. }
  232. }).finally(e => {
  233. self.loading = false;
  234. });
  235. }
  236. }
  237. };
  238. </script>
  239. <style lang="scss">
  240. .box {
  241. min-height: calc(100vh - 140px);
  242. width: 100%;
  243. background-color: #fff;
  244. padding: 20px;
  245. & .listTable {
  246. & .tableTitle {
  247. line-height: 50px;
  248. padding-left: 10px;
  249. }
  250. }
  251. }
  252. .popperSPBOX{
  253. max-width: calc(100vh - 400px);
  254. background-color: #fff;
  255. }
  256. </style>