index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
  1. <template>
  2. <div class="m-container">
  3. <h2>
  4. <div class="squrt"></div>
  5. 费用审核列表
  6. </h2>
  7. <div class="m-core">
  8. <!-- 搜索标题 -->
  9. <save-form
  10. :inline="true"
  11. class="searchForm"
  12. ref="searchForm"
  13. :model.sync="searchForm"
  14. >
  15. <el-form-item>
  16. <el-input
  17. v-model.trim="searchForm.search"
  18. clearable
  19. @keyup.enter.native="search"
  20. placeholder="乐团名称/编号"
  21. ></el-input>
  22. </el-form-item>
  23. <el-form-item>
  24. <el-select
  25. class="multiple"
  26. v-model.trim="searchForm.organId"
  27. filterable
  28. clearable
  29. placeholder="请选择分部"
  30. >
  31. <el-option
  32. v-for="(item, index) in selects.branchs"
  33. :key="index"
  34. :label="item.name"
  35. :value="item.id"
  36. ></el-option>
  37. </el-select>
  38. </el-form-item>
  39. <el-form-item>
  40. <el-select
  41. class="multiple"
  42. v-model.trim="searchForm.paymentType"
  43. filterable
  44. clearable
  45. placeholder="申请类型"
  46. >
  47. <el-option
  48. v-for="(item, index) in paymentTypeList"
  49. :key="index"
  50. :label="item.label"
  51. :value="item.value"
  52. ></el-option>
  53. </el-select>
  54. </el-form-item>
  55. <el-form-item>
  56. <el-select
  57. class="multiple"
  58. v-model.trim="searchForm.status"
  59. filterable
  60. clearable
  61. placeholder="审核状态"
  62. >
  63. <el-option
  64. v-for="(item, index) in statusList"
  65. :key="index"
  66. :label="item.label"
  67. :value="item.value"
  68. ></el-option>
  69. </el-select>
  70. </el-form-item>
  71. <el-form-item>
  72. <el-button @click="search" type="primary">搜索</el-button>
  73. <el-button @click="reset" type="danger">重置</el-button>
  74. <auth auths="musicGroupPaymentCalender/batchAuditing" style="margin-left: 10px">
  75. <el-button
  76. @click="typesStatus = true"
  77. :disabled="!selList.length > 0"
  78. type="primary"
  79. >批量审核</el-button
  80. >
  81. </auth>
  82. </el-form-item>
  83. </save-form>
  84. <div class="tableWrap">
  85. <el-table
  86. :data="tableList"
  87. :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
  88. @selection-change="handleSelectionChange"
  89. >
  90. <el-table-column
  91. fixed="left"
  92. type="selection"
  93. width="55"
  94. :selectable="selectable"
  95. ></el-table-column>
  96. <el-table-column align="center" prop="organName" label="分部名称">
  97. <template slot-scope="scope">
  98. <copy-text>{{ scope.row.organName }}</copy-text>
  99. </template>
  100. </el-table-column>
  101. <el-table-column
  102. align="center"
  103. width="200px"
  104. prop="musicGroupName"
  105. label="乐团名称"
  106. >
  107. <template slot-scope="scope">
  108. <div>
  109. <Tooltip :content="scope.row.musicGroupName" />
  110. </div>
  111. </template>
  112. </el-table-column>
  113. <el-table-column
  114. align="center"
  115. width="180px"
  116. prop="musicGroupId"
  117. label="乐团编号"
  118. >
  119. <template slot-scope="scope">
  120. <copy-text>{{ scope.row.musicGroupId }}</copy-text>
  121. </template>
  122. </el-table-column>
  123. <el-table-column align="center" prop="paymentType" label="申请类型">
  124. <template slot-scope="scope">
  125. <div>
  126. {{ scope.row.paymentType | auditPaymentType }}
  127. </div>
  128. </template>
  129. </el-table-column>
  130. <el-table-column align="center" prop="payUserType" label="订单类型">
  131. <template slot-scope="scope">
  132. <div>
  133. {{ scope.row.payUserType | payOrderType }}
  134. </div>
  135. </template>
  136. </el-table-column>
  137. <el-table-column
  138. align="center"
  139. prop="addCourseTotalTime"
  140. label="加课总时长(分钟)"
  141. ></el-table-column>
  142. <el-table-column
  143. align="center"
  144. prop="courseOriginalPrice"
  145. label="原现价(元)"
  146. >
  147. <template slot-scope="scope">
  148. <div>
  149. {{ scope.row.courseOriginalPrice | moneyFormat }}
  150. </div>
  151. </template>
  152. </el-table-column>
  153. <el-table-column
  154. align="center"
  155. prop="courseCurrentPrice"
  156. label="申请价格(元)"
  157. >
  158. <template slot-scope="scope">
  159. <div>
  160. {{ scope.row.courseCurrentPrice | moneyFormat }}
  161. </div>
  162. </template>
  163. </el-table-column>
  164. <el-table-column
  165. align="center"
  166. prop="memo"
  167. width="200px"
  168. label="备注"
  169. >
  170. <template slot-scope="scope">
  171. <overflow-text width="200px" :text="scope.row.memo" />
  172. </template>
  173. </el-table-column>
  174. <el-table-column
  175. align="center"
  176. prop="auditMemo"
  177. width="200px"
  178. label="审核备注"
  179. >
  180. <template slot-scope="scope">
  181. <overflow-text width="200px" :text="scope.row.auditMemo" />
  182. </template>
  183. </el-table-column>
  184. <el-table-column
  185. align="center"
  186. prop="operatorName"
  187. label="申请人"
  188. ></el-table-column>
  189. <el-table-column
  190. align="center"
  191. prop="auditStatus"
  192. label="状态"
  193. width="100px"
  194. >
  195. <template slot-scope="scope">
  196. <div>
  197. {{ scope.row.auditStatus | auditType }}
  198. </div>
  199. </template>
  200. </el-table-column>
  201. <el-table-column
  202. align="center"
  203. prop="createTime"
  204. label="申请时间"
  205. width="140px"
  206. >
  207. <template slot-scope="scope">
  208. <div>
  209. {{ scope.row.createTime | dateForMinFormat }}
  210. </div>
  211. </template>
  212. </el-table-column>
  213. <!-- -->
  214. <el-table-column
  215. align="center"
  216. label="操作"
  217. width="100px"
  218. fixed="right"
  219. >
  220. <template slot-scope="scope">
  221. <el-button @click="lookDetail(scope.row)" type="text" v-if="$helpers.permission(scope.row.auditStatus === 'AUDITING' ? 'musicGroupPaymentCalender/auditListDetail/update' : 'musicGroupPaymentCalender/auditListDetail/look')">
  222. {{ scope.row.auditStatus === "AUDITING" ? "审核" : "查看" }}
  223. </el-button>
  224. </template>
  225. </el-table-column>
  226. </el-table>
  227. <pagination
  228. :total.sync="pageInfo.total"
  229. sync
  230. :page.sync="pageInfo.page"
  231. :limit.sync="pageInfo.limit"
  232. :page-sizes="pageInfo.page_size"
  233. @pagination="getList"
  234. />
  235. </div>
  236. </div>
  237. <el-dialog
  238. title="申请详情"
  239. width="900px"
  240. :visible.sync="typeStatus"
  241. destroy-on-close
  242. >
  243. <review :detail="detail" @close="close" />
  244. </el-dialog>
  245. <el-dialog
  246. title="批量审核"
  247. width="700px"
  248. :visible.sync="typesStatus"
  249. destroy-on-close
  250. >
  251. <audit
  252. :selList="selList"
  253. @close="typesStatus = false"
  254. @submited="submited"
  255. />
  256. </el-dialog>
  257. </div>
  258. </template>
  259. <script>
  260. import pagination from "@/components/Pagination/index";
  261. import review from "@/views/resetTeaming/modals/review.vue";
  262. import audit from "./audit.vue";
  263. // import store from '@/store'
  264. import { getAuditList, getAuditListDetail } from "@/api/auditManager";
  265. import { getEmployeeOrgan } from "@/api/buildTeam";
  266. import Tooltip from "@/components/Tooltip/index";
  267. import { auditTypeList, auditPaymentTypeList } from "@/utils/searchArray";
  268. const initSearch = {
  269. search: null,
  270. paymentType: null,
  271. status: "AUDITING",
  272. organId: null,
  273. };
  274. export default {
  275. components: { pagination, Tooltip, review, audit },
  276. name: "helpCategory",
  277. data() {
  278. return {
  279. typesStatus: false,
  280. selList: [],
  281. paymentTypeList: auditPaymentTypeList,
  282. organList: [],
  283. statusList: auditTypeList,
  284. searchForm: { ...initSearch },
  285. tableList: [],
  286. pageInfo: {
  287. // 分页规则
  288. limit: 10, // 限制显示条数
  289. page: 1, // 当前页
  290. total: 0, // 总条数
  291. page_size: [10, 20, 40, 50], // 选择限制显示条数
  292. },
  293. detail: null,
  294. typeStatus: false,
  295. };
  296. },
  297. mounted() {
  298. this.$store.dispatch("setBranchs");
  299. this.getList();
  300. },
  301. methods: {
  302. selectable(row, index) {
  303. return row.auditStatus == "AUDITING";
  304. },
  305. search() {
  306. this.pageInfo.page = 1;
  307. this.$refs.searchForm.save(this.searchForm);
  308. this.$refs.searchForm.save(this.pageInfo, "page");
  309. this.getList();
  310. },
  311. reset() {
  312. this.searchForm = { ...initSearch };
  313. this.search();
  314. },
  315. handleSelectionChange(arr) {
  316. this.selList = arr;
  317. },
  318. getList() {
  319. let params = {
  320. page: this.pageInfo.page,
  321. rows: this.pageInfo.limit,
  322. ...this.searchForm,
  323. };
  324. getAuditList(params).then((res) => {
  325. let result = res.data;
  326. if (res.code == 200) {
  327. this.tableList = result.rows;
  328. this.pageInfo.total = result.total;
  329. }
  330. });
  331. },
  332. lookDetail(row) {
  333. // this.detail = res.data
  334. this.detail = {
  335. id: row.musicGroupPaymentCalenderId,
  336. batchNo: row.batchNo,
  337. musicGroupId: row.musicGroupId,
  338. status: row.auditStatus,
  339. };
  340. this.typeStatus = true;
  341. },
  342. submited() {
  343. this.pageInfo.page = 1;
  344. this.getList();
  345. },
  346. close() {
  347. this.typeStatus = false;
  348. this.getList();
  349. },
  350. },
  351. watch: {
  352. typeStatus(val) {
  353. if (!val) {
  354. this.detail = null;
  355. }
  356. },
  357. },
  358. };
  359. </script>
  360. <style lang="scss" scoped>
  361. /deep/.el-date-editor.el-input {
  362. width: 100% !important;
  363. }
  364. /deep/.el-select {
  365. width: 100% !important;
  366. }
  367. /deep/.el-table .cell {
  368. display: -webkit-box;
  369. overflow: hidden;
  370. text-overflow: ellipsis;
  371. -webkit-line-clamp: 3;
  372. -webkit-box-orient: vertical;
  373. }
  374. /deep/.el-dialog__body {
  375. padding: 10px 20px;
  376. }
  377. .newBand {
  378. display: inline-block;
  379. }
  380. </style>