预付款管理

src/views/iosBasicData/advanceCharge/detailsPage.vue

@@ -0,0 +1,261 @@
+<template>
+    <div>
+        <div class="customer-head">
+            <div class="customer-back">
+                <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
+                    @click="goBack(0)">返回列表
+                </el-button>
+            </div>
+        </div>
+        <div style="margin-top: 50px">
+            <trade-card title="基础信息">
+                <avue-form :option="optionForm" v-model="form" ref="form">
+                </avue-form>
+            </trade-card>
+            <trade-card title="预付款明细">
+                <avue-crud :option="option" :data="form.advanceChargeItemList" id="out-table" ref="crud"
+                    @selection-change="selectionChange" @resetColumn="resetColumn('crud', 'option', 'optionBack', 400)"
+                    @saveColumn="saveColumn('crud', 'option', 'optionBack', 400)">
+                    <template slot="orderNo" slot-scope="{ row }">
+                        <span style="color: #1e9fff" @click="rowEdit(row)">{{ row.orderNo }}</span>
+                    </template>
+                    <template slot="billNo" slot-scope="{ row }">
+                        <span style="color: #1e9fff" @click="rowEdit(row)">{{ row.billNo }}</span>
+                    </template>
+                </avue-crud>
+            </trade-card>
+        </div>
+    </div>
+</template>
+
+<script>
+import { submit, getDetail } from "@/api/iosBasicData/advanceCharge";
+import dicSelect from "@/components/dicSelect/main";
+import { bfeesList } from "@/api/iosBasicData/bfees";
+import _ from "lodash";
+export default {
+    name: "detailsPage",
+
+    data() {
+        return {
+            form: {
+                status: '0',
+                advanceChargeItemList: []
+            },
+            optionForm: {
+                menuBtn: false,
+                span: 8,
+                disabled: true,
+                column: [
+                    {
+                        label: '客户',
+                        prop: "corpName",
+                    },
+                    {
+                        label: "预付款余额",
+                        prop: "advancePaymentBalance",
+                    },
+                    {
+                        label: "增加金额",
+                        prop: "inOverpayment",
+                    },
+                    {
+                        label: "消费金额",
+                        prop: "outOverpaymen",
+                    },
+                    {
+                        label: '备注',
+                        prop: "remarks",
+                        type: 'textarea',
+                        disabled: false,
+                        span: 24,
+                        minRows: 2,
+                    },
+                ]
+            },
+            option: {},
+            optionBack: {
+                height: 'auto',
+                calcHeight: 30,
+                menuWidth: 140,
+                border: true,
+                index: true,
+                addBtn: false,
+                viewBtn: false,
+                editBtn: false,
+                delBtn: false,
+                menu: false,
+                refreshBtn: false,
+                align: 'center',
+                column: [
+                    {
+                        label: "订单号",
+                        prop: "orderNo",
+                        overHidden: true
+                    },
+                    {
+                        label: "提单号",
+                        prop: "billNo",
+                        overHidden: true
+                    },
+                    {
+                        label: "金额",
+                        prop: "overpayment",
+                        overHidden: true
+                    },
+                    {
+                        label: "消费类型",
+                        prop: "overpaymentType",
+                        type: 'select',
+                        dicData: [{
+                            label: '增加',
+                            value: 0
+                        }, {
+                            label: '消费',
+                            value: 1
+                        }],
+                        overHidden: true
+                    },
+                    {
+                        label: "来源单号",
+                        prop: "srcOrderNo",
+                        overHidden: true
+                    },
+                    {
+                        label: "生成标识",
+                        prop: "identifier",
+                        type: 'select',
+                        dicData: [{
+                            label: '系统生成',
+                            value: 0
+                        }, {
+                            label: '手动添加',
+                            value: 1
+                        }],
+                        overHidden: true
+                    },
+                    {
+                        label: "备注",
+                        prop: "remarks",
+                        overHidden: true
+                    }
+                ]
+            },
+        }
+    },
+    components: {
+        dicSelect,
+    },
+    props: {
+        detailData: Object
+    },
+    async created() {
+        this.option = await this.getColumnData(this.getColumnName(400), this.optionBack);
+        if (this.detailData.id) {
+            this.getDetails(this.detailData.id)
+        }
+    },
+    methods: {
+        rowEdit(row) {
+            if (row.overpaymentType == 1) {
+                if (this.$store.getters.firstSetStatus) {
+                    this.$alert("货款收费(T)页面已存在,请关闭货款收费(T)再进行操作", "温馨提示", {
+                        confirmButtonText: "确定",
+                        type: 'warning',
+                        callback: action => {
+                        }
+                    });
+                } else {
+                    this.$router.push({
+                        path: '/tradeAgency/firstSettlement/index',
+                        query: {
+                            billNo: row.srcPid
+                        },
+                    })
+                }
+
+            }
+            if (row.overpaymentType == 0) {
+                if (this.$store.getters.exchangePurStatus) {
+                    this.$alert("货款付费(T)页面已存在,请关闭货款付费(T)再进行操作", "温馨提示", {
+                        confirmButtonText: "确定",
+                        type: 'warning',
+                        callback: action => {
+                        }
+                    });
+                } else {
+                    this.$router.push({
+                        path: '/tradeAgency/exchangePurchasing/index',
+                        query: {
+                            billNo: row.srcPid
+                        },
+                    })
+                }
+            }
+        },
+        getDetails(id) {
+            const loading = this.$loading({
+                lock: true,
+                text: '加载中',
+                spinner: 'el-icon-loading',
+                background: 'rgba(255,255,255,0.7)'
+            });
+            getDetail({ id: id }).then(res => {
+                this.form = res.data.data
+                this.$refs.crud.dicInit();
+            }).finally(() => {
+                loading.close()
+            })
+        },
+        //自定义列保存
+        async saveColumn(ref, option, optionBack, code) {
+            const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
+            if (inSave) {
+                this.$message.success("保存成功");
+                //关闭窗口
+                this.$refs[ref].$refs.dialogColumn.columnBox = false;
+            }
+        },
+        //自定义列重置
+        async resetColumn(ref, option, optionBack, code) {
+            this[option] = this[optionBack];
+            const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
+            if (inSave) {
+                this.$message.success("重置成功");
+                this.$refs[ref].$refs.dialogColumn.columnBox = false;
+            }
+        },
+        goBack(type) {
+            this.$emit("goBack", type);
+            this.$emit('updateKey')
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-form-item {
+    margin-bottom: 8px !important;
+}
+
+::v-deep .el-table .cell {
+    padding: 0 2px !important;
+
+    .el-form-item {
+        margin-bottom: 0px !important;
+    }
+
+}
+
+::v-deep .avue-crud .el-table .el-form-item__label {
+    left: -1px;
+}
+
+::v-deep#out-table .back-one {
+    background: #ecf5ff !important;
+}
+
+::v-deep#out-table .back-two {
+    background: #ecf5ff !important;
+}
+</style>

src/views/iosBasicData/advanceCharge/index.vue

@@ -0,0 +1,297 @@
+<template>
+    <div>
+        <basic-container v-if="isShow">
+            <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :search.sync="query"
+                v-model="form" id="out-table" :header-cell-class-name="headerClassName" ref="crud" @row-del="rowDel"
+                @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
+                @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange"
+                @resetColumn="resetColumn('crud', 'option', 'optionBack', 399)"
+                @saveColumn="saveColumn('crud', 'option', 'optionBack', 399)" @on-load="onLoad">
+                <template slot="menuLeft">
+                    <el-button type="primary" size="small" icon="el-icon-plus" @click="addButton">新 增
+                    </el-button>
+                </template>
+                <tempalte slot="advancePaymentBalance" slot-scope="{ row }">
+                    <el-input-number v-if="row.$cellEdit" v-model="row.advancePaymentBalance" @change="countChange(row)"
+                        :controls="false" placeholder="请输入 单价" size="small" style="width: 100%;"></el-input-number>
+                    <span v-else>{{ row.advancePaymentBalance }}</span>
+                </tempalte>
+                <template slot="menu" slot-scope="{ row, index }">
+                    <el-button size="small" icon="el-icon-edit" type="text" @click="inEdit(row)">{{ row.$cellEdit ? "保存" :
+                        "编辑" }}</el-button>
+                </template>
+                <template slot="corpName" slot-scope="{ row }">
+                    <span style="color: #1e9fff" @click="rowEdit(row)">{{ row.corpName }}</span>
+                </template>
+            </avue-crud>
+        </basic-container>
+        <detailsPage v-if="!isShow" :detailData="detailData" @goBack="goBack"></detailsPage>
+    </div>
+</template>
+  
+<script>
+import { getList, remove, submit } from "@/api/iosBasicData/advanceCharge";
+import detailsPage from "./detailsPage";
+import _ from "lodash";
+
+export default {
+    data() {
+        return {
+            detailData: {},
+            isShow: true,
+            form: {},
+            query: {},
+            loading: false,
+            page: {
+                pageSize: 10,
+                currentPage: 1,
+                total: 0
+            },
+            selectionList: [],
+            option: {},
+            optionBack: {
+                height: 'auto',
+                calcHeight: 30,
+                menuWidth: 120,
+                searchShow: true,
+                searchMenuSpan: 18,
+                border: true,
+                index: true,
+                addBtn: false,
+                viewBtn: false,
+                editBtn: false,
+                delBtn: false,
+                searchIcon: true,
+                searchIndex: 3,
+                column: [
+                    {
+                        label: "客户名称",
+                        prop: "corpId",
+                        width: "200",
+                        overHidden: true,
+                        search: true,
+                        type: 'select',
+                        filterable: true,
+                        remote: true,
+                        dicUrl: "/api/blade-los/bcorps/listByType?cnName={{key}}",
+                        props: {
+                            label: 'cnName',
+                            value: 'id',
+                            res: 'data.records'
+                        },
+                        hide: true,
+                        showColumn: false,
+                        searchOrder: 1,
+                    },
+                    {
+                        label: "客户名称",
+                        prop: "corpName",
+                        width: "200",
+                        overHidden: true,
+                    },
+                    {
+                        label: "预付款余额",
+                        prop: "advancePaymentBalance",
+                        overHidden: true,
+                    },
+                    {
+                        label: "增加金额",
+                        prop: "inOverpayment",
+                        overHidden: true
+                    },
+                    {
+                        label: "消费金额",
+                        prop: "outOverpaymen",
+                        overHidden: true
+                    },
+                    {
+                        label: "备注",
+                        prop: "remarks",
+                        overHidden: true
+                    }
+                ]
+            },
+            data: [],
+        };
+    },
+    components: {
+        detailsPage,
+    },
+    async created() {
+        this.option = await this.getColumnData(this.getColumnName(399), this.optionBack);
+    },
+    methods: {
+        addButton() {
+            this.isShow = false
+        },
+        rowEdit(row) {
+            this.detailData = {
+                id: row.id
+            };
+            this.isShow = false
+        },
+        rowDel(row) {
+            if (row.status == 1) {
+                this.$confirm("确定将选择数据删除?", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning"
+                })
+                    .then(() => {
+                        return remove({ ids: row.id }).then(() => {
+                            this.onLoad(this.page);
+                            this.$message({
+                                type: "success",
+                                message: "删除成功!"
+                            });
+                        });
+                    })
+
+            } else {
+                this.$message({
+                    message: '非禁用状态无法删除',
+                    type: 'warning'
+                });
+            }
+        },
+        // 编辑
+        inEdit(row) {
+            if (row.$cellEdit == true) {
+                this.loading = true;
+                submit(row).then(res => {
+                    this.$message({
+                        type: "success",
+                        message: "修改成功!"
+                    });
+                    this.onLoad(this.page, this.query);
+                }).finally(() => {
+                    this.loading = false;
+                })
+                this.$set(row, '$cellEdit', false)
+            } else {
+                this.$set(row, '$cellEdit', true)
+            }
+
+        },
+        countChange(row) {
+            row.inOverpayment = _.add(Number(row.advancePaymentBalance ? row.advancePaymentBalance : 0), Number(row.outOverpaymen ? row.outOverpaymen : 0))
+        },
+        searchReset() {
+            this.query = this.$options.data().query;
+            this.onLoad(this.page);
+        },
+        // 搜索按钮点击
+        searchChange(params, done) {
+            this.page.currentPage = 1;
+            this.onLoad(this.page, this.query);
+            done();
+        },
+        selectionChange(list) {
+            this.selectionList = list;
+        },
+        currentChange(currentPage) {
+            this.page.currentPage = currentPage;
+        },
+        sizeChange(pageSize) {
+            this.page.pageSize = pageSize;
+        },
+        refreshChange() {
+            this.onLoad(this.page, this.query);
+        },
+        onLoad(page, params = {}) {
+            let obj = {}
+            obj = {
+                ...Object.assign(params, this.query),
+            }
+            console.log(obj)
+            this.loading = true;
+            getList(page.currentPage, page.pageSize, obj).then(res => {
+                this.data = res.data.data.records;
+                this.page.total = res.data.data.total;
+                this.$nextTick(() => {
+                    this.$refs.crud.doLayout();
+                    this.$refs.crud.dicInit();
+                });
+            }).finally(() => {
+                this.loading = false;
+            })
+
+        },
+        // 详情的返回列表
+        goBack() {
+            // 初始化数据
+            // if (JSON.stringify(this.$route.query) != "{}") {
+            //     this.$router.$avueRouter.closeTag();
+            //     this.$router.push({
+            //         path: "/iosBasicData/accounts/index"
+            //     });
+            // }
+            this.detailData = {}
+            this.isShow = true;
+            this.onLoad(this.page, this.search);
+        },
+        //自定义列保存
+        async saveColumn(ref, option, optionBack, code) {
+            /**
+             * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
+             * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
+             * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
+             */
+            const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
+            if (inSave) {
+                this.$message.success("保存成功");
+                //关闭窗口
+                this.$refs[ref].$refs.dialogColumn.columnBox = false;
+                this.searchReset()
+            }
+        },
+        //自定义列重置
+        async resetColumn(ref, option, optionBack, code) {
+            this[option] = this[optionBack];
+            const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
+            if (inSave) {
+                this.$message.success("重置成功");
+                this.$refs[ref].$refs.dialogColumn.columnBox = false;
+                this.searchReset()
+            }
+        },
+        // 更改表格颜色
+        headerClassName(tab) {
+            //颜色间隔
+            let back = ""
+            if (tab.columnIndex >= 0 && tab.column.level === 1) {
+                if (tab.columnIndex % 2 === 0) {
+                    back = "back-one"
+                } else if (tab.columnIndex % 2 === 1) {
+                    back = "back-two"
+                }
+            }
+            return back;
+        },
+
+    }
+}
+
+</script>
+  
+<style scoped>
+::v-deep#out-table .back-one {
+    background: #ecf5ff !important;
+    text-align: center;
+}
+
+::v-deep#out-table .back-two {
+    background: #ecf5ff !important;
+    text-align: center;
+}
+
+.pointerClick {
+    cursor: pointer;
+    color: #1e9fff;
+}
+
+::v-deep .el-col-md-8 {
+    width: 24.33333%;
+}
+</style>
+