refund_list.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396
  1. <template>
  2. <div class="app-container">
  3. <div v-if="showSurrender">
  4. <el-radio-group @change="changeRadioFn" v-model="examine" size="">
  5. <el-radio-button label="">全部</el-radio-button>
  6. <el-radio-button label="SAVE">保存</el-radio-button>
  7. <el-radio-button label="WAIT">待审核</el-radio-button>
  8. <el-radio-button label="FAIL">审核驳回</el-radio-button>
  9. <el-radio-button label="OK">审核通过</el-radio-button>
  10. </el-radio-group>
  11. <br /><br />
  12. <!-- 筛选条件 -->
  13. <div>
  14. <el-form ref="searchForm" :model="searchForm" label-width="160px" size="small" label-position="left">
  15. <el-row :gutter="20">
  16. <el-col :xs="24" :sm="12" :lg="6">
  17. <el-form-item label="工程登录(信息)编号" prop="refEnginRecordNo">
  18. <el-input v-model="searchForm.refEnginRecordNo" placeholder="请输入"></el-input>
  19. </el-form-item>
  20. </el-col>
  21. <el-col :xs="24" :sm="12" :lg="6">
  22. <el-form-item label="经销商编码" prop="customerKeyword">
  23. <el-input v-model="searchForm.customerKeyword" placeholder="请输入"></el-input>
  24. </el-form-item>
  25. </el-col>
  26. <!-- <el-col :xs="24" :sm="12" :lg="6">
  27. <el-form-item label="经销商名称" prop="customerKeyword">
  28. <el-input
  29. v-model="searchForm.customerKeyword"
  30. placeholder="请输入"
  31. ></el-input>
  32. </el-form-item>
  33. </el-col> -->
  34. <el-col :xs="24" :sm="12" :lg="6">
  35. <el-form-item label="工程名称" prop="refProjectName">
  36. <el-input v-model="searchForm.refProjectName" placeholder="请输入"></el-input>
  37. </el-form-item>
  38. </el-col>
  39. <!-- <el-col :xs="24" :sm="12" :lg="6">
  40. <el-form-item label="发货申请开始日期" prop="startDeliverTime">
  41. <el-date-picker
  42. class="dateStyle"
  43. v-model="searchForm.startDeliverTime"
  44. type="datetime"
  45. placeholder=""
  46. default-time="00:00:00"
  47. value-format="yyyy-MM-dd HH:mm:ss"
  48. >
  49. </el-date-picker>
  50. </el-form-item>
  51. </el-col>
  52. <el-col :xs="24" :sm="12" :lg="6">
  53. <el-form-item label="发货申请结束日期" prop="endDeliverTime">
  54. <el-date-picker
  55. v-model="searchForm.endDeliverTime"
  56. class="dateStyle"
  57. type="datetime"
  58. placeholder=""
  59. default-time="23:59:59"
  60. value-format="yyyy-MM-dd HH:mm:ss"
  61. >
  62. </el-date-picker>
  63. </el-form-item>
  64. </el-col> -->
  65. <!-- <el-col :xs="24" :sm="12" :lg="6">
  66. <el-form-item label="产品名称" prop="">
  67. <el-input placeholder="请输入"></el-input>
  68. </el-form-item>
  69. </el-col>
  70. <el-col :xs="24" :sm="12" :lg="6">
  71. <el-form-item label="规格型号" prop="">
  72. <el-input placeholder="请输入"></el-input>
  73. </el-form-item>
  74. </el-col> -->
  75. <el-col :xs="24" :sm="12" :lg="6">
  76. <el-form-item label="" class="fr">
  77. <el-button size="small" @click="resetFn">清空</el-button>
  78. <el-button size="small" type="primary" @click="searchFn">搜索</el-button>
  79. </el-form-item>
  80. </el-col>
  81. </el-row>
  82. </el-form>
  83. </div>
  84. <!-- 按钮 -->
  85. <div class="btn-group clearfix">
  86. <div class="fl">
  87. <el-radio-group @change="changeEnginOrderTypeFn" v-model="enginOrderType" size="">
  88. <el-radio-button label="HOME">家用工程</el-radio-button>
  89. <el-radio-button label="TRADE">商用工程</el-radio-button>
  90. </el-radio-group>
  91. </div>
  92. <div class="fr">
  93. <el-button type="primary" size="small" @click="exportFn">导出</el-button>
  94. <el-upload class="import-btn" action="" :http-request="handleImport" :file-list="importFileList" :show-file-list="false">
  95. <el-button type="primary" size="small">导入</el-button>
  96. </el-upload>
  97. </div>
  98. </div>
  99. <!-- 列表 -->
  100. <div class="mymain-container">
  101. <div class="table">
  102. <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe @selection-change="handleSelectionChange" show-summary :summary-method="$getSummaries">
  103. >
  104. <el-table-column type="selection" align="center" width="55">
  105. </el-table-column>
  106. <el-table-column align="center" label="工程登录编码" prop="refEnginRecordNo" min-width="160" show-overflow-tooltip></el-table-column>
  107. <el-table-column align="center" label="工程名称" prop="refProjectName" min-width="160" show-overflow-tooltip></el-table-column>
  108. <el-table-column align="center" label="经销商编码" prop="customerId" min-width="160" show-overflow-tooltip></el-table-column>
  109. <el-table-column align="center" label="经销商名称" prop="customerName" min-width="160" show-overflow-tooltip></el-table-column>
  110. <el-table-column align="right" label="押金金额" prop="depositAmount" min-width="160" show-overflow-tooltip>
  111. <template slot-scope="scope">
  112. {{ scope.row.depositAmount | numToFixed }}
  113. </template>
  114. </el-table-column>
  115. <el-table-column align="center" label="状态" prop="" min-width="160" show-overflow-tooltip>
  116. <template v-slot="{ row }">
  117. <el-tag v-show="row.examineStatus == 'SAVE'">保存</el-tag>
  118. <el-tag v-show="row.examineStatus == 'WAIT'" type="warning">待审核</el-tag>
  119. <el-tag v-show="row.examineStatus == 'OK'" type="success">通过</el-tag>
  120. <el-tag v-show="row.examineStatus == 'FAIL'" type="danger">不通过</el-tag>
  121. </template>
  122. </el-table-column>
  123. <el-table-column align="center" label="操作" min-width="160" show-overflow-tooltip>
  124. <template slot-scope="scope">
  125. <el-button type="text" class="textColor" v-if="
  126. scope.row.examineStatus == 'WAIT' &&
  127. $checkBtnRole('examine', $route.meta.roles)
  128. " @click="examineFn(scope.row.depositManageId)">审批</el-button>
  129. <el-button type="text" class="textColor" v-if="
  130. scope.row.examineStatus == 'SAVE' ||
  131. scope.row.examineStatus == 'OK' ||
  132. scope.row.examineStatus == 'FAIL'
  133. " @click="infoFn(scope.row.depositManageId)">详情</el-button>
  134. </template>
  135. </el-table-column>
  136. </el-table>
  137. </div>
  138. <!-- 分页 -->
  139. <div class="fr">
  140. <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="listTotal">
  141. </el-pagination>
  142. </div>
  143. </div>
  144. </div>
  145. <RefundListDetail @updateList="updateList" :detailId="detailId" v-else />
  146. </div>
  147. </template>
  148. <script>
  149. import {
  150. getDepositManageList,
  151. getDepositManagExport,
  152. } from "@/api/engin_deposit/refund_list";
  153. import { downloadFiles, handleImport } from "@/utils/util";
  154. import RefundListDetail from "./components/refund_list-detail.vue";
  155. export default {
  156. components: {
  157. RefundListDetail,
  158. },
  159. data() {
  160. return {
  161. importFileList: [],
  162. enginOrderType: "HOME", //列表类型
  163. currentPage: 1, // 当前页码
  164. pageSize: 10, // 每页数量
  165. listTotal: 0, // 列表总数
  166. dataList: [], // 列表数据
  167. searchForm: {
  168. refEnginRecordNo: "",
  169. customerKeyword: "",
  170. refProjectName: "",
  171. // startDeliverTime: "",
  172. // endDeliverTime: "",
  173. }, //搜索表单
  174. listLoading: false, // 列表加载loading
  175. examine: "",
  176. showSurrender: true,
  177. detailId: "",
  178. selectData: [],
  179. };
  180. },
  181. created() {
  182. this.getDataList({
  183. pageSize: this.pageSize,
  184. pageNum: this.currentPage,
  185. confirmName: "",
  186. createName: "",
  187. customerKeyword: "",
  188. // endDeliverTime: "",
  189. enginOrderNo: "",
  190. enginOrderType: this.enginOrderType,
  191. examineStatus: "",
  192. refEnginRecordNo: "",
  193. refProjectName: "",
  194. refUseUnit: "",
  195. // startDeliverTime: "",
  196. });
  197. },
  198. methods: {
  199. // 导入
  200. async handleImport(param) {
  201. const file = param.file;
  202. const formData = new FormData();
  203. formData.append("file", file);
  204. let result = await handleImport("/deposit-manage/import", formData);
  205. console.log(result);
  206. this.importFileList = [];
  207. if (result.code == 200) {
  208. this.$message.success("导入成功");
  209. this.getDataList({
  210. pageSize: this.pageSize,
  211. pageNum: this.currentPage,
  212. confirmName: "",
  213. createName: "",
  214. customerKeyword: "",
  215. // endDeliverTime: "",
  216. enginOrderNo: "",
  217. enginOrderType: this.enginOrderType,
  218. examineStatus: "",
  219. refEnginRecordNo: "",
  220. refProjectName: "",
  221. refUseUnit: "",
  222. // startDeliverTime: "",
  223. });
  224. } else {
  225. this.$message.error(result.message);
  226. }
  227. },
  228. //审批后更新列表数据
  229. updateList() {
  230. this.getDataList({
  231. pageSize: this.pageSize,
  232. pageNum: this.currentPage,
  233. confirmName: "",
  234. createName: "",
  235. customerKeyword: "",
  236. // endDeliverTime: "",
  237. enginOrderNo: "",
  238. enginOrderType: this.enginOrderType,
  239. examineStatus: "",
  240. refEnginRecordNo: "",
  241. refProjectName: "",
  242. refUseUnit: "",
  243. // startDeliverTime: "",
  244. });
  245. },
  246. //切换列表
  247. changeEnginOrderTypeFn(v) {
  248. // console.log(v);
  249. this.pageSize = 10;
  250. this.currentPage = 1;
  251. this.getDataList({
  252. pageSize: this.pageSize,
  253. pageNum: this.currentPage,
  254. confirmName: "",
  255. createName: "",
  256. customerKeyword: "",
  257. // endDeliverTime: "",
  258. enginOrderNo: "",
  259. enginOrderType: v,
  260. examineStatus: this.examine,
  261. refEnginRecordNo: "",
  262. refProjectName: "",
  263. refUseUnit: "",
  264. // startDeliverTime: "",
  265. });
  266. },
  267. // 更改每页数量
  268. handleSizeChange(val) {
  269. this.pageSize = val;
  270. this.currentPage = 1;
  271. this.getDataList({
  272. pageSize: this.pageSize,
  273. pageNum: this.currentPage,
  274. confirmName: "",
  275. createName: "",
  276. customerKeyword: "",
  277. // endDeliverTime: "",
  278. enginOrderNo: "",
  279. enginOrderType: this.enginOrderType,
  280. examineStatus: this.examine,
  281. refEnginRecordNo: "",
  282. refProjectName: "",
  283. refUseUnit: "",
  284. // startDeliverTime: "",
  285. });
  286. },
  287. // 更改当前页
  288. handleCurrentChange(val) {
  289. this.currentPage = val;
  290. this.getDataList({
  291. pageSize: this.pageSize,
  292. pageNum: this.currentPage,
  293. confirmName: "",
  294. createName: "",
  295. customerKeyword: "",
  296. // endDeliverTime: "",
  297. enginOrderNo: "",
  298. enginOrderType: this.enginOrderType,
  299. examineStatus: this.examine,
  300. refEnginRecordNo: "",
  301. refProjectName: "",
  302. refUseUnit: "",
  303. // startDeliverTime: "",
  304. });
  305. },
  306. //切换radio
  307. changeRadioFn(v) {
  308. this.examine = v;
  309. this.getDataList({
  310. pageSize: this.pageSize,
  311. pageNum: this.currentPage,
  312. confirmName: "",
  313. createName: "",
  314. customerKeyword: "",
  315. // endDeliverTime: "",
  316. enginOrderNo: "",
  317. enginOrderType: this.enginOrderType,
  318. examineStatus: this.examine,
  319. refEnginRecordNo: "",
  320. refProjectName: "",
  321. refUseUnit: "",
  322. // startDeliverTime: "",
  323. });
  324. },
  325. //导出
  326. exportFn() {
  327. if (this.selectData.length) {
  328. const arr = [];
  329. for (let i = 0; i < this.selectData.length; i++) {
  330. arr.push(this.selectData[i].depositManageId);
  331. }
  332. downloadFiles("/deposit-manage/export", { id: arr });
  333. } else {
  334. this.$errorMsg("请选择押金项");
  335. }
  336. },
  337. //多选列表数据
  338. handleSelectionChange(selectData) {
  339. this.selectData = selectData;
  340. },
  341. //重置
  342. resetFn() {
  343. this.$refs.searchForm.resetFields();
  344. },
  345. //搜索
  346. searchFn() {
  347. this.getDataList({
  348. pageSize: this.pageSize,
  349. pageNum: this.currentPage,
  350. confirmName: "",
  351. createName: "",
  352. enginOrderNo: "",
  353. enginOrderType: this.enginOrderType,
  354. examineStatus: this.examine,
  355. refUseUnit: "",
  356. ...this.searchForm,
  357. });
  358. },
  359. //详情
  360. infoFn(id) {
  361. this.detailId = id;
  362. this.showSurrender = false;
  363. },
  364. async getDataList(data) {
  365. const res = await getDepositManageList(data);
  366. res.data.records.forEach((item) => {
  367. item.sums1 = [];
  368. item.sums2 = ["depositAmount"];
  369. });
  370. this.dataList = res.data.records;
  371. this.listTotal = res.data.total;
  372. },
  373. examineFn(id) {
  374. this.detailId = id;
  375. this.showSurrender = false;
  376. },
  377. },
  378. };
  379. </script>
  380. <style lang="scss" scoped>
  381. .dateStyle {
  382. width: 100%;
  383. }
  384. .import-btn {
  385. margin-left: 10px;
  386. display: inline-block;
  387. }
  388. </style>