settlement.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690
  1. <template>
  2. <div class="app-container">
  3. <el-form
  4. :model="queryParams"
  5. ref="queryForm"
  6. size="small"
  7. :inline="true"
  8. v-show="showSearch"
  9. label-width="100px"
  10. >
  11. <el-form-item label="达人名称" prop="promoterName">
  12. <el-input
  13. placeholder="请输入达人名称"
  14. style="width: 240px"
  15. v-model="queryParams.promoterName"
  16. >
  17. </el-input>
  18. </el-form-item>
  19. <el-form-item label="达人ID" prop="promoterId">
  20. <el-input
  21. placeholder="请输入达人ID"
  22. style="width: 240px"
  23. v-model="queryParams.promoterId"
  24. >
  25. </el-input>
  26. </el-form-item>
  27. <el-form-item label="选择日期">
  28. <el-date-picker
  29. v-model="uploadDate"
  30. style="width: 240px"
  31. value-format="yyyy-MM-dd"
  32. format="yyyy-MM-dd"
  33. range-separator="-"
  34. start-placeholder="开始日期"
  35. end-placeholder="结束日期"
  36. ></el-date-picker>
  37. </el-form-item>
  38. <el-form-item>
  39. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
  40. >搜索
  41. </el-button
  42. >
  43. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  44. <el-button
  45. type="primary"
  46. plain
  47. size="mini"
  48. @click="upload"
  49. style="margin-bottom: 15px"
  50. >导出
  51. </el-button
  52. >
  53. </el-form-item>
  54. </el-form>
  55. <el-table v-loading="loading" :data="typeList" ref="multipleTable">
  56. <el-table-column label="规则名称" align="center" prop="ruleName"></el-table-column>
  57. <el-table-column label="商品ID" align="center" prop="itemIds"></el-table-column>
  58. <el-table-column label="商品名称" align="center" prop="itemName"></el-table-column>
  59. <el-table-column label="达人ID" align="center" prop="promoterId"></el-table-column>
  60. <el-table-column label="达人名称" align="center" prop="promoterName"></el-table-column>
  61. <el-table-column label="单数" align="center" prop="orderNum"></el-table-column>
  62. <el-table-column label="有效单数" align="center" prop="validOrderNum"></el-table-column>
  63. <el-table-column label="上次结算有效单数" align="center" prop="lastSettlementOrderNum"></el-table-column>
  64. <el-table-column label="达人激励金额" align="center" prop="anchorAmount"></el-table-column>
  65. <el-table-column label="推荐人激励金额" align="center" prop="referenceAmount"></el-table-column>
  66. <el-table-column label="结算状态" align="center" prop="settlementStatusDesc"></el-table-column>
  67. <!-- <el-table-column label="达人ID" align="center" prop="promoterId">
  68. <template slot-scope="scope">
  69. <a style="text-align: center" @click="toDetail(scope.row)"
  70. >{{ scope.row.promoterId }}
  71. </a>
  72. </template>
  73. </el-table-column>
  74. <el-table-column label="达人名称" align="center" prop="promoterName">
  75. <template slot-scope="scope">
  76. <a style="text-align: center" @click="toDetail(scope.row)"
  77. >{{ scope.row.promoterName }}
  78. </a>
  79. </template>
  80. </el-table-column>-->
  81. <el-table-column label="操作" align="center" prop="action">
  82. <template slot-scope="scope">
  83. <el-button size="mini" type="text" :disabled="scope.row.settlementStatus!=2" @click="removeRule(scope.row)"
  84. >结算
  85. </el-button>
  86. </template>
  87. </el-table-column>
  88. </el-table>
  89. <pagination
  90. v-show="total > 0"
  91. :total="total"
  92. :page.sync="queryParams.pageNum"
  93. :limit.sync="queryParams.pageSize"
  94. @pagination="getList"
  95. :pageSizes="[10, 20, 30, 50]"
  96. />
  97. <!-- 添加直播 -->
  98. <el-dialog
  99. :title="!!ids ? '修改规则' : '新增规则'"
  100. :visible.sync="openAllocation"
  101. width="800px"
  102. append-to-body
  103. :close-on-click-modal="false"
  104. >
  105. <el-form
  106. ref="formBroadcast"
  107. :model="formBroadcast"
  108. :rules="rulesBroadcast"
  109. label-width="150px"
  110. :inline="true"
  111. >
  112. <span
  113. style="
  114. color: red;
  115. display: inline-block;
  116. width: 100%;
  117. text-align: center;
  118. font-size: 18px;
  119. "
  120. >
  121. 新增完成后,子规则不可删除</span
  122. >
  123. <el-form-item label="创建人" prop="userName" style="width: 100%">
  124. {{ $store.getters.name }}
  125. </el-form-item>
  126. <el-form-item
  127. label="规则名称"
  128. prop="ruleName"
  129. style="width: 100%"
  130. class="entire-line"
  131. >
  132. <el-input
  133. placeholder="请输入规则名称"
  134. style="width: 240px"
  135. :disabled="!!ids"
  136. v-model="formBroadcast.ruleName"
  137. >
  138. </el-input>
  139. </el-form-item>
  140. <el-form-item
  141. label="规则类型"
  142. prop="ruleType"
  143. style="width: 100%"
  144. class="entire-line"
  145. >
  146. <el-select
  147. filterable
  148. :disabled="!!ids"
  149. v-model="formBroadcast.ruleType"
  150. placeholder="请选择规则类型"
  151. clearable
  152. style="width: 240px"
  153. >
  154. <el-option label="常规规则" value="1"></el-option>
  155. <el-option label="冲量规则" value="2"></el-option>
  156. </el-select>
  157. </el-form-item>
  158. <el-form-item label=" " style="width: 100%" class="entire-line">
  159. <el-button
  160. type="primary"
  161. plain
  162. icon="el-icon-document-add"
  163. size="mini"
  164. @click="
  165. formBroadcast.ruleDetails.push({
  166. startItemCount: undefined,
  167. endItemCount: undefined,
  168. anchorAmount: undefined,
  169. referenceAmount: undefined,
  170. })
  171. "
  172. >子规则新增
  173. </el-button>
  174. </el-form-item>
  175. <div
  176. style="
  177. height: 300px;
  178. overflow-y: auto;
  179. width: 100%;
  180. overflow-x: hidden;
  181. border: 2px solid #f2f2f2;
  182. padding-top: 10px;
  183. "
  184. v-if="formBroadcast.ruleDetails.length > 0"
  185. >
  186. <div
  187. v-for="(item, index) in formBroadcast.ruleDetails"
  188. :key="index"
  189. style="position: relative"
  190. >
  191. <div style="position: absolute; right: 25px">
  192. <el-button
  193. type="error"
  194. plain
  195. icon="el-icon-close"
  196. size="mini"
  197. v-if="!item.id"
  198. @click="formBroadcast.ruleDetails.splice(index, 1)"
  199. >删除
  200. </el-button
  201. >
  202. <el-button
  203. type="error"
  204. plain
  205. size="mini"
  206. @click="addOrEdit(item, index)"
  207. v-if="!!ids"
  208. >确定
  209. </el-button
  210. >
  211. </div>
  212. <el-form-item
  213. label="序号"
  214. prop="sortCount"
  215. style="width: 100%"
  216. class="entire-line"
  217. >
  218. {{ index + 1 }}
  219. </el-form-item>
  220. <el-form-item
  221. label="起始单数"
  222. style="width: 100%"
  223. class="entire-line"
  224. :prop="'ruleDetails.' + index + '.startItemCount'"
  225. :rules="{
  226. required: true,
  227. message: '起始单数不能为空',
  228. trigger: 'blur',
  229. }"
  230. >
  231. <el-input
  232. placeholder="请输入起始单数"
  233. style="width: 240px"
  234. v-model.number="item.startItemCount"
  235. >
  236. </el-input>
  237. </el-form-item>
  238. <el-form-item
  239. label="结束单数"
  240. :prop="'ruleDetails.' + index + '.endItemCount'"
  241. :rules="{
  242. required: true,
  243. message: '结束单数不能为空',
  244. trigger: 'blur',
  245. }"
  246. style="width: 100%"
  247. class="entire-line"
  248. >
  249. <el-input
  250. placeholder="请输入结束单数"
  251. style="width: 240px"
  252. v-model.number="item.endItemCount"
  253. >
  254. </el-input>
  255. </el-form-item>
  256. <el-form-item
  257. label="主播奖励金额"
  258. :prop="'ruleDetails.' + index + '.anchorAmount'"
  259. :rules="{
  260. required: true,
  261. message: '主播奖励金额不能为空',
  262. trigger: 'blur',
  263. }"
  264. style="width: 100%"
  265. class="entire-line"
  266. >
  267. <el-input-number
  268. style="width: 240px"
  269. v-model="item.anchorAmount"
  270. :precision="2"
  271. :step="0.1"
  272. :min="0"
  273. placeholder="请输入主播奖励金额"
  274. ></el-input-number>
  275. </el-form-item>
  276. <el-form-item
  277. label="推荐人奖励金额"
  278. prop="referenceAmount"
  279. style="width: 100%"
  280. class="entire-line"
  281. >
  282. <el-input-number
  283. style="width: 240px"
  284. v-model="item.referenceAmount"
  285. :precision="2"
  286. :step="0.1"
  287. :min="0"
  288. placeholder="请输入推荐人奖励金额"
  289. ></el-input-number>
  290. </el-form-item>
  291. </div>
  292. </div>
  293. </el-form>
  294. <div slot="footer" class="dialog-footer" v-if="!ids">
  295. <el-button type="primary" @click="submitFormBroadcast" :loading="confirmLoading"
  296. >确 定
  297. </el-button
  298. >
  299. <el-button
  300. @click="
  301. confirmLoading = false;
  302. openAllocation = false;
  303. formBroadcast = {};
  304. "
  305. >取 消
  306. </el-button
  307. >
  308. </div>
  309. </el-dialog>
  310. </div>
  311. </template>
  312. <script>
  313. import {refreshCache} from "@/api/system/dict/type";
  314. import {downFilePost} from "@/api/supplyChain/supplyChain";
  315. import {
  316. getSettlementList,
  317. updatePromoterStatus,
  318. addRule,
  319. editRule,
  320. removeRule,
  321. editStatus,
  322. getRuleDetailByRuleId,
  323. editDetail,
  324. addDetail,
  325. } from "@/api/goodsManagement/goods";
  326. export default {
  327. name: "Rule-Config",
  328. components: {},
  329. data() {
  330. return {
  331. // 遮罩层
  332. loading: true,
  333. // 选中数组
  334. ids: null,
  335. okIds: null,
  336. // 非单个禁用
  337. single: true,
  338. // 非多个禁用
  339. multiple: true,
  340. // 显示搜索条件
  341. showSearch: true,
  342. // 总条数
  343. total: 0,
  344. // 字典表格数据
  345. typeList: [],
  346. //上传文件类型
  347. fileType: [".doc", ".xls", ".xlsx", ".ppt", ".pdf", ".csv"],
  348. // 弹出层标题
  349. title: "",
  350. // 是否显示弹出层
  351. open: false,
  352. openFp: false,
  353. formFp: {},
  354. // 是否可编辑
  355. edit: false,
  356. // 分配销售
  357. openAllocation: false,
  358. // 选择的销售id
  359. saleId: undefined,
  360. // 销售列表
  361. saleList: [],
  362. // 分配销售确定loading
  363. confirmLoadingSale: false,
  364. // 日期范围
  365. dateRange: [],
  366. // 查询参数
  367. queryParams: {
  368. pageNum: 1,
  369. pageSize: 10,
  370. promoterId: undefined,
  371. promoterName: undefined,
  372. },
  373. uploadDate: new Date(),
  374. //页面所有的下拉数据
  375. queryParamsList: {},
  376. // 表单参数
  377. form: {},
  378. formBroadcast: {
  379. ruleDetails: [],
  380. },
  381. //上传报表下拉数据
  382. formList: {},
  383. fileList: [],
  384. accept: "",
  385. //获取销售线索文件流
  386. dateFile: new FormData(),
  387. //销售线索上传loading
  388. confirmLoading: false,
  389. // 表单校验
  390. rules: {},
  391. rulesBroadcast: {
  392. ruleName: {
  393. required: true,
  394. message: "规则名称必填",
  395. trigger: "blur",
  396. },
  397. ruleType: {
  398. required: true,
  399. message: "规则类型必选",
  400. trigger: "change",
  401. },
  402. },
  403. // 分配销售展示列表
  404. ksInfo: null,
  405. userId: null,
  406. };
  407. },
  408. created() {
  409. this.userId = this.$store.getters.userId;
  410. let start = new Date();
  411. start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
  412. let date = new Date(start);
  413. let y = date.getFullYear();
  414. let MM = date.getMonth() + 1;
  415. MM = MM < 10 ? "0" + MM : MM;
  416. let dd = date.getDate();
  417. dd = dd < 10 ? "0" + dd : dd;
  418. this.uploadDate = `${y}-${MM}-${dd}`;
  419. this.getList();
  420. },
  421. filters: {},
  422. methods: {
  423. addOrEdit(item, index) {
  424. if (item.id) {
  425. console.log(item);
  426. editDetail({
  427. id: item.id,
  428. ruleId: this.ids,
  429. anchorAmount: item.anchorAmount,
  430. endItemCount: item.endItemCount,
  431. referenceAmount: item.referenceAmount,
  432. sortCount: item.sortCount,
  433. startItemCount: item.startItemCount,
  434. }).then((res) => {
  435. this.$message.success("修改成功");
  436. });
  437. } else {
  438. addDetail({
  439. ruleId: this.ids,
  440. anchorAmount: item.anchorAmount,
  441. endItemCount: item.endItemCount,
  442. referenceAmount: item.referenceAmount,
  443. sortCount: index,
  444. startItemCount: item.startItemCount,
  445. }).then((res) => {
  446. this.$message.success("添加成功");
  447. });
  448. }
  449. },
  450. lookDetail(item) {
  451. getRuleDetailByRuleId({ruleId: item.id}).then((res) => {
  452. this.ids = item.id;
  453. this.edit = true;
  454. this.openAllocation = true;
  455. this.$set(this.formBroadcast, "ruleName", item.ruleName);
  456. this.$set(this.formBroadcast, "ruleType", "" + item.ruleType);
  457. this.$set(this.formBroadcast, "ruleDetails", res.data);
  458. });
  459. },
  460. toDetail(item) {
  461. this.$router.replace({
  462. path: "/goodsManagement/settlementDetails",
  463. query: {
  464. statDate: this.uploadDate,
  465. promoterId: item.promoterId,
  466. },
  467. });
  468. },
  469. removeRule(item) {
  470. this.$modal
  471. .confirm(`请确认是否结算此数据?`)
  472. .then(() => {
  473. var params = {};
  474. params.id = +item.id;
  475. params.settlementStatus = 3;
  476. editStatus(params)
  477. .then((res) => {
  478. this.getList();
  479. this.$modal.msgSuccess("结算成功");
  480. })
  481. .catch(() => {
  482. });
  483. })
  484. .catch(() => {
  485. });
  486. },
  487. editRuleName(item) {
  488. if (!item.promoterPhoneEdit) {
  489. item.promoterPhoneEdit = !item.promoterPhoneEdit;
  490. } else {
  491. if (!!item.ruleName) {
  492. editRule({ruleName: item.ruleName, id: item.id})
  493. .then((res) => {
  494. this.handleQuery();
  495. })
  496. .catch(() => {
  497. });
  498. } else {
  499. this.$message.error("规则名称不能不填");
  500. }
  501. }
  502. },
  503. /** 查询字典类型列表 */
  504. getList() {
  505. this.loading = true;
  506. this.typeList = [];
  507. getSettlementList({statDate: this.uploadDate, ...this.queryParams})
  508. .then((response) => {
  509. this.loading = false;
  510. this.typeList = response.rows;
  511. this.total = response.total;
  512. })
  513. .catch((err) => {
  514. console.log(err);
  515. });
  516. },
  517. // 取消按钮
  518. cancel() {
  519. this.open = false;
  520. this.confirmLoading = false;
  521. this.reset();
  522. },
  523. // 表单重置
  524. reset() {
  525. this.form = {};
  526. this.dateFile = null;
  527. this.resetForm("formBroadcast");
  528. },
  529. /** 搜索按钮操作 */
  530. handleQuery() {
  531. this.queryParams.pageNum = 1;
  532. this.getList();
  533. },
  534. /** 重置按钮操作 */
  535. resetQuery() {
  536. this.dateRange = [];
  537. let start = new Date();
  538. start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
  539. let date = new Date(start);
  540. let y = date.getFullYear();
  541. let MM = date.getMonth() + 1;
  542. MM = MM < 10 ? "0" + MM : MM;
  543. let dd = date.getDate();
  544. dd = dd < 10 ? "0" + dd : dd;
  545. this.uploadDate = `${y}-${MM}-${dd}`;
  546. this.resetForm("queryForm");
  547. this.handleQuery();
  548. },
  549. upload() {
  550. downFilePost("/settlement/exportSettlementList", {
  551. statDate: this.uploadDate,
  552. ...this.queryParams,
  553. }).then((res) => {
  554. let blob = new Blob([res], {
  555. type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  556. });
  557. let downloadElement = document.createElement("a");
  558. let href = window.URL.createObjectURL(blob); //创建下载的链接
  559. downloadElement.href = href;
  560. downloadElement.download = "激励结算.xlsx"; //下载后文件名
  561. document.body.appendChild(downloadElement);
  562. downloadElement.click(); //点击下载
  563. document.body.removeChild(downloadElement); //下载完成移除元素
  564. window.URL.revokeObjectURL(href); //释放掉blob对象
  565. });
  566. },
  567. addNew() {
  568. this.openAllocation = true;
  569. this.edit = false;
  570. this.ids = null;
  571. this.confirmLoading = false;
  572. this.formBroadcast = {};
  573. setTimeout(() => {
  574. this.$refs.formBroadcast.clearValidate();
  575. }, 0);
  576. this.$set(this.formBroadcast, "ruleDetails", []);
  577. },
  578. /** 编辑地址 新增达人*/
  579. handleAddbroadcast(item) {
  580. this.ids = item.id;
  581. this.edit = true;
  582. this.openAllocation = true;
  583. this.$set(this.formBroadcast, "consignee", item.consignee);
  584. this.$set(this.formBroadcast, "phone", item.phone);
  585. this.$set(this.formBroadcast, "promoterAddress", item.promoterAddress);
  586. this.$set(this.formBroadcast, "ruleName", item.ruleName);
  587. this.$set(this.formBroadcast, "promoterId", item.promoterId);
  588. },
  589. /** 修改按钮操作 */
  590. handleUpdate(row) {
  591. this.reset();
  592. },
  593. /** 新增直播确定按钮 */
  594. submitFormBroadcast: function () {
  595. this.$refs["formBroadcast"].validate((valid) => {
  596. if (valid) {
  597. this.confirmLoading = true;
  598. let formData = {
  599. userId: this.userId,
  600. userName: this.$store.getters.name,
  601. ...this.formBroadcast,
  602. ruleDetails: this.formBroadcast.ruleDetails.map((item, index) => {
  603. return {
  604. ...item,
  605. sortCount: index + 1,
  606. };
  607. }),
  608. };
  609. console.log(formData);
  610. if (!this.ids) {
  611. addRule(formData)
  612. .then((res) => {
  613. this.confirmLoading = false;
  614. this.$message.success("新增成功");
  615. this.openAllocation = false;
  616. this.ids = null;
  617. this.cancel();
  618. this.handleQuery();
  619. })
  620. .catch((err) => {
  621. this.confirmLoading = false;
  622. });
  623. } else {
  624. formData.id = this.ids;
  625. editRule(formData)
  626. .then((res) => {
  627. this.confirmLoading = false;
  628. this.$message.success("修改成功");
  629. this.openAllocation = false;
  630. this.ids = null;
  631. this.cancel();
  632. this.handleQuery();
  633. })
  634. .catch((err) => {
  635. this.confirmLoading = false;
  636. });
  637. }
  638. }
  639. });
  640. },
  641. },
  642. };
  643. </script>
  644. <style lang="scss" scoped>
  645. .entire-line {
  646. width: 100%;
  647. }
  648. ::v-deep .entire-line .el-form-item__content {
  649. width: 60%;
  650. }
  651. ::v-deep .el-form-item__label {
  652. white-space: nowrap;
  653. }
  654. </style>
  655. <style scoped lang="scss">
  656. ::v-deep a {
  657. color: #409eff;
  658. display: block;
  659. text-align: left;
  660. }
  661. .item-name-calss p {
  662. margin: 0;
  663. text-align: left;
  664. }
  665. .tableBox {
  666. width: 100%;
  667. }
  668. </style>