financeData.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-form-item label="达人名称" prop="promoterName">
  5. <el-input
  6. v-model="queryParams.promoterName"
  7. placeholder="请输入达人名称"
  8. clearable
  9. @keyup.enter.native="handleQuery"
  10. />
  11. </el-form-item>
  12. <el-form-item label="达人ID" prop="promoterId">
  13. <el-input
  14. v-model="queryParams.promoterId"
  15. placeholder="请输入达人ID"
  16. clearable
  17. @keyup.enter.native="handleQuery"
  18. />
  19. </el-form-item>
  20. <el-form-item label="商品名称" prop="itemTitle">
  21. <el-input
  22. v-model="queryParams.itemTitle"
  23. placeholder="请输入商品名称"
  24. clearable
  25. @keyup.enter.native="handleQuery"
  26. />
  27. </el-form-item>
  28. <el-form-item label="商品id" prop="itemId">
  29. <el-input
  30. v-model="queryParams.itemId"
  31. placeholder="请输入商品id"
  32. clearable
  33. @keyup.enter.native="handleQuery"
  34. />
  35. </el-form-item>
  36. <el-form-item>
  37. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  38. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  39. </el-form-item>
  40. </el-form>
  41. <el-row :gutter="10" class="mb8">
  42. <el-col :span="1.5">
  43. <el-button
  44. type="primary"
  45. plain
  46. icon="el-icon-plus"
  47. size="mini"
  48. @click="toAdd()"
  49. >新增
  50. </el-button>
  51. </el-col>
  52. <el-col :span="1.5">
  53. <el-button
  54. type="primary"
  55. plain
  56. icon="el-icon-document-add"
  57. size="mini"
  58. @click="importData"
  59. >导入大佬激励
  60. </el-button>
  61. <el-button
  62. type="primary"
  63. plain
  64. size="mini"
  65. @click="downloadTem"
  66. >下载模版
  67. </el-button
  68. >
  69. </el-col>
  70. </el-row>
  71. <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
  72. <el-table-column label="达人名称" align="center" prop="promoterName" width="140px">
  73. <template slot-scope="scope">
  74. <div style="display: flex; width: 100%">
  75. <div style="width: 100%" class="item-name-calss">
  76. <a
  77. style="
  78. text-overflow: ellipsis;
  79. white-space: nowrap;
  80. overflow: hidden;
  81. width: 100%;
  82. "
  83. :title="scope.row.promoterName"
  84. >
  85. {{ scope.row.promoterName }}
  86. </a>
  87. </div>
  88. </div>
  89. </template>
  90. </el-table-column>
  91. <el-table-column label="达人ID" align="center" prop="promoterId" width="180px">
  92. <template slot-scope="scope">
  93. <div style="display: flex; width: 100%">
  94. <div style="width: 100%">
  95. <a
  96. style="color: #00afff"
  97. :title="scope.row.promoterId"
  98. >
  99. {{ scope.row.promoterId }}
  100. </a>
  101. </div>
  102. </div>
  103. </template>
  104. </el-table-column>
  105. <el-table-column label="渠道" align="center" prop="promoterCreateName"/>
  106. <el-table-column label="商品名称" align="center" prop="itemTitle" width="280px" v-if="showItem">
  107. <template slot-scope="scope">
  108. <div style="display: flex; width: 100%">
  109. <div style="width: 100%" class="item-name-calss">
  110. <a
  111. style="
  112. text-overflow: ellipsis;
  113. white-space: nowrap;
  114. overflow: hidden;
  115. width: 100%;
  116. "
  117. :title="scope.row.itemTitle"
  118. >
  119. {{ scope.row.itemTitle }}
  120. </a>
  121. </div>
  122. </div>
  123. </template>
  124. </el-table-column>
  125. <el-table-column label="商品id" align="center" prop="promoterId" width="140px">
  126. <template slot-scope="scope">
  127. <div style="display: flex; width: 100%">
  128. <div style="width: 100%">
  129. <a
  130. style="color: #00afff"
  131. :title="scope.row.itemId"
  132. >
  133. {{ scope.row.itemId }}
  134. </a>
  135. </div>
  136. </div>
  137. </template>
  138. </el-table-column>
  139. <el-table-column label="招商" align="center" prop="itemCreateName" width="100px"/>
  140. <el-table-column label="最近结算日期" align="center" prop="maxDate" width="100px"/>
  141. <el-table-column label="累计结算单量" align="center" prop="totalSettlementNum"/>
  142. </el-table>
  143. <pagination
  144. v-show="total>0"
  145. :total="total"
  146. :page.sync="queryParams.pageNum"
  147. :limit.sync="queryParams.pageSize"
  148. @pagination="getList"
  149. />
  150. <!-- 添加或修改【请填写功能名称】对话框 -->
  151. <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false">
  152. <el-form ref="form" :model="form" :rules="rules" label-width="100px" :inline="true">
  153. <el-form-item label="日期:" prop="statDate" style="width: 100%">
  154. <el-date-picker
  155. style="width: 180px"
  156. v-model="uploadDate"
  157. value-format="yyyy-MM-dd"
  158. format="yyyy-MM-dd"
  159. range-separator="-"
  160. placeholder="请输入日期"
  161. ></el-date-picker>
  162. </el-form-item>
  163. <el-form-item label="商品id:" prop="itemId">
  164. <el-input v-model="form.itemId" placeholder="请输入商品id"/>
  165. </el-form-item>
  166. <el-form-item label="达人ID:" prop="promoterId">
  167. <el-input v-model="form.promoterId" placeholder="请输入达人ID"/>
  168. </el-form-item>
  169. <el-form-item label="当前单量:" prop="currentSettlementNum">
  170. <el-input v-model="form.currentSettlementNum" placeholder="请输入当前结算单量"/>
  171. </el-form-item>
  172. <el-form-item label="累计单量:" prop="totalSettlementNum">
  173. <el-input v-model="form.totalSettlementNum" placeholder="请输入累计结算单量"/>
  174. </el-form-item>
  175. <el-form-item label="结算单价:" prop="settlementPrice">
  176. <el-input v-model="form.settlementPrice" placeholder="请输入结算单价"/>
  177. </el-form-item>
  178. <el-form-item label="主播金额:" prop="anchorAmount">
  179. <el-input v-model="form.anchorAmount" placeholder="请输入主播奖励金额"/>
  180. </el-form-item>
  181. <el-form-item label="推荐人金额:" prop="referenceAmount">
  182. <el-input v-model="form.referenceAmount" placeholder="请输入推荐人奖励金额"/>
  183. </el-form-item>
  184. </el-form>
  185. <div slot="footer" class="dialog-footer">
  186. <el-button type="primary" @click="submitForm">确 定</el-button>
  187. <el-button @click="cancel">取 消</el-button>
  188. </div>
  189. </el-dialog>
  190. <el-dialog :title="importTitle" :visible.sync="importOpen" width="500px" append-to-body>
  191. <el-form ref="importForm" :model="form" :rules="rules" label-width="80px">
  192. <el-upload
  193. class="upload-demo"
  194. action="http://192.168.1.181:9003/isv/supply_chain/insertRewardBaseInfoByExcel"
  195. :before-upload="handleBeforeUpload"
  196. :on-preview="handlePreview"
  197. :on-remove="handleRemove"
  198. :before-remove="beforeRemove"
  199. accept=""
  200. :on-exceed="handleExceed"
  201. :file-list="fileList"
  202. :show-file-list="false"
  203. >
  204. <el-button size="small" icon="el-icon-upload">点击上传</el-button>
  205. <div slot="tip" class="el-upload__tip">
  206. 只能上传.csv .xlsx .xls文件
  207. <br/>
  208. <span v-if="!!dateFile">{{ dateFile.name }}</span>
  209. </div>
  210. </el-upload>
  211. </el-form>
  212. <div slot="footer" class="dialog-footer">
  213. <el-button type="primary" @click="submitFile" :loading="confirmLoading"
  214. >确 定
  215. </el-button
  216. >
  217. <el-button @click="cancel">取 消</el-button>
  218. </div>
  219. </el-dialog>
  220. </div>
  221. </template>
  222. <script>
  223. import {
  224. listInfo,
  225. getInfo,
  226. delInfo,
  227. addInfo,
  228. updateInfo,
  229. getTotal,
  230. importData,
  231. totalListInfo
  232. } from "@/api/goodsManagement/financeData";
  233. export default {
  234. name: "FinanceData",
  235. data() {
  236. return {
  237. confirmLoading: false,
  238. dateFile: null,
  239. fileList: [],
  240. importOpen: false,
  241. uploadDate: new Date(),
  242. userId: null,
  243. // 遮罩层
  244. loading: false,
  245. // 选中数组
  246. ids: [],
  247. // 非单个禁用
  248. single: true,
  249. // 非多个禁用
  250. multiple: true,
  251. // 显示搜索条件
  252. showSearch: true,
  253. // 总条数
  254. total: 0,
  255. // 【请填写功能名称】表格数据
  256. infoList: [],
  257. // 弹出层标题
  258. title: "",
  259. importTitle: "",
  260. // 是否显示弹出层
  261. open: false,
  262. // 查询参数
  263. queryParams: {
  264. pageNum: 1,
  265. pageSize: 10,
  266. itemId: null,
  267. itemTitle: null,
  268. promoterId: null,
  269. promoterName: null,
  270. statDate: null
  271. },
  272. // 表单参数
  273. form: {},
  274. // 表单校验
  275. rules: {}
  276. };
  277. },
  278. created() {
  279. this.userId = this.$store.getters.userId;
  280. let start = new Date();
  281. start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
  282. let date = new Date(start);
  283. let y = date.getFullYear();
  284. let MM = date.getMonth() + 1;
  285. MM = MM < 10 ? "0" + MM : MM;
  286. let dd = date.getDate();
  287. dd = dd < 10 ? "0" + dd : dd;
  288. this.uploadDate = `${y}-${MM}-${dd}`;
  289. this.getList();
  290. },
  291. methods: {
  292. downloadTem() {
  293. window.location.href = `https://live-1301855440.cos.ap-chongqing.myqcloud.com/excle/%E5%A4%A7%E4%BD%AC%E7%BB%93%E7%AE%97%E6%A8%A1%E6%9D%BF.xlsx`
  294. },
  295. toAdd() {
  296. this.$router.replace({
  297. path: "/goodsManagement/addFinanceData",
  298. });
  299. },
  300. importData() {
  301. this.reset();
  302. this.importOpen = true;
  303. this.importTitle = "导入激励";
  304. },
  305. submitFile() {
  306. console.log(this.dateFile)
  307. this.$refs["importForm"].validate((valid) => {
  308. if (valid) {
  309. if (this.dateFile) {
  310. this.confirmLoading = true;
  311. let formData = new FormData();
  312. formData.append("file", this.dateFile);
  313. importData(formData)
  314. .then((res) => {
  315. this.confirmLoading = false;
  316. this.$message.success("上传成功");
  317. this.cancel();
  318. this.handleQuery();
  319. })
  320. .catch((err) => {
  321. this.confirmLoading = false;
  322. });
  323. } else {
  324. this.$message.error("请上传文件");
  325. }
  326. }
  327. });
  328. },
  329. handleExceed(files, fileList) {
  330. this.$message.warning(
  331. `当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${
  332. files.length + fileList.length
  333. } 个文件`
  334. );
  335. },
  336. beforeRemove(file, fileList) {
  337. return false;
  338. },
  339. /** 删除文件 */
  340. handleRemove(file, fileList) {
  341. console.log(file, fileList);
  342. },
  343. /** 上传文件 */
  344. handlePreview(file) {
  345. console.log(file);
  346. },
  347. /** 上传文件前验证 */
  348. handleBeforeUpload(file) {
  349. console.log(file);
  350. const fileSuffix = ["xlsx", "xls", "csv"];
  351. const fileName = file.name;
  352. const fileStrArr = fileName.split(".");
  353. const suffix = fileStrArr[fileStrArr.length - 1];
  354. let result = fileSuffix.some((item) => {
  355. return item === suffix;
  356. });
  357. if (!result) {
  358. this.$message.error("不支持该文件类型");
  359. this.loadDisabled = false;
  360. return false;
  361. }
  362. this.dateFile = file;
  363. return false;
  364. },
  365. /** 查询【请填写功能名称】列表 */
  366. getList() {
  367. this.loading = true;
  368. totalListInfo(this.queryParams).then(response => {
  369. this.infoList = response.rows;
  370. this.total = response.total;
  371. this.loading = false;
  372. }).catch((err) => {
  373. this.loading = false;
  374. })
  375. },
  376. getUploadDate() {
  377. let start = new Date();
  378. start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
  379. let date = new Date(start);
  380. let y = date.getFullYear();
  381. let MM = date.getMonth() + 1;
  382. MM = MM < 10 ? "0" + MM : MM;
  383. let dd = date.getDate();
  384. dd = dd < 10 ? "0" + dd : dd;
  385. this.uploadDate = `${y}-${MM}-${dd}`;
  386. },
  387. // 取消按钮
  388. cancel() {
  389. this.open = false;
  390. this.importOpen = false;
  391. this.reset();
  392. },
  393. // 表单重置
  394. reset() {
  395. this.form = {
  396. id: null,
  397. itemId: null,
  398. itemTitle: null,
  399. promoterId: null,
  400. promoterName: null,
  401. itemCreateId: null,
  402. itemCreateName: null,
  403. promoterCreateId: null,
  404. promoterCreateName: null,
  405. statDate: null,
  406. currentSettlementNum: null,
  407. totalSettlementNum: null,
  408. settlementPrice: null,
  409. anchorAmount: null,
  410. referenceAmount: null,
  411. totalAmount: null,
  412. remarks: null,
  413. createTime: null,
  414. updateTime: null
  415. };
  416. this.dateFile = null;
  417. this.resetForm("form");
  418. },
  419. /** 搜索按钮操作 */
  420. handleQuery() {
  421. this.queryParams.pageNum = 1;
  422. this.getList();
  423. },
  424. /** 重置按钮操作 */
  425. resetQuery() {
  426. this.showItem = true;
  427. this.showPromoter = true;
  428. this.resetForm("queryForm");
  429. this.handleQuery();
  430. },
  431. // 多选框选中数据
  432. handleSelectionChange(selection) {
  433. this.ids = selection.map(item => item.id)
  434. this.single = selection.length !== 1
  435. this.multiple = !selection.length
  436. },
  437. /** 新增按钮操作 */
  438. handleAdd() {
  439. this.reset();
  440. this.open = true;
  441. this.title = "新增激励";
  442. },
  443. /** 修改按钮操作 */
  444. handleUpdate(row) {
  445. this.reset();
  446. const id = row.id || this.ids
  447. getInfo(id).then(response => {
  448. this.form = response.data;
  449. this.uploadDate = response.data.statDate;
  450. this.open = true;
  451. this.title = "修改激励";
  452. });
  453. },
  454. /** 提交按钮 */
  455. submitForm() {
  456. this.$refs["form"].validate(valid => {
  457. if (valid) {
  458. if (this.form.id != null) {
  459. this.form.statDate = this.uploadDate;
  460. updateInfo(this.form).then(response => {
  461. this.$modal.msgSuccess("修改成功");
  462. this.open = false;
  463. this.getUploadDate();
  464. this.getList();
  465. });
  466. } else {
  467. this.form.statDate = this.uploadDate;
  468. addInfo(this.form).then(response => {
  469. this.$modal.msgSuccess("新增成功");
  470. this.open = false;
  471. this.getUploadDate();
  472. this.getList();
  473. });
  474. }
  475. }
  476. });
  477. },
  478. /** 删除按钮操作 */
  479. handleDelete(row) {
  480. const ids = row.id || this.ids;
  481. this.$modal.confirm('是否确认删除所选的数据项?').then(function () {
  482. return delInfo(ids);
  483. }).then(() => {
  484. this.getList();
  485. this.getUploadDate();
  486. this.$modal.msgSuccess("删除成功");
  487. }).catch(() => {
  488. });
  489. },
  490. /** 导出按钮操作 */
  491. handleExport() {
  492. this.download('system/info/export', {
  493. ...this.queryParams
  494. }, `info_${new Date().getTime()}.xlsx`)
  495. }
  496. }
  497. };
  498. </script>