Smart_platform_ui/src/views/exportTrade/purchaseContract/index.vue

<template>
    <div>
        <basic-container v-show="show" class="page-crad">
            <avue-crud
                    ref="crud"
                    :option="option"
                    :data="dataList"
                    v-model="form"
                    :page.sync="page"
                    :search.sync="search"
                    @search-change="searchChange"
                    @current-change="currentChange"
                    @size-change="sizeChange"
                    @refresh-change="refreshChange"
                    @on-load="onLoad"
                    :table-loading="loading"
                    @saveColumn="saveColumn"
                    @resetColumn="resetColumn"
                    :cell-style="cellStyle"
                    @selection-change="selectionChange"
                    @search-criteria-switch="searchCriteriaSwitch"
            >
                <template slot="createTimeSearch">
                    <el-date-picker
                            v-model="search.createTime"
                            type="daterange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                    >
                    </el-date-picker>
                </template>
                <template slot="menuLeft">
                    <el-button
                            type="primary"
                            icon="el-icon-plus"
                            size="small"
                            @click.stop="newAdd('new')"
                    >创建单据
                    </el-button>
                    <el-button
                            type="success"
                            size="small"
                            @click.stop="copyDoc()"
                            :disabled="selectionList.length != 1"
                    >复制单据
                    </el-button>
                    <el-button type="info" size="small" disabled>报表打印</el-button>
                    <el-button type="warning" size="small" @click="dialogVisible = true;">采购任务</el-button>
                </template>
                <template slot="corpIdSearch">
                    <crop-select v-model="search.corpId" corpType="KH"></crop-select>
                </template>
                <template slot="businesDateSearch">
                    <el-date-picker
                            v-model="search.businesDate"
                            type="daterange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                </template>
                <template slot="plannedDeliveryDateSearch">
                    <el-date-picker
                            v-model="search.plannedDeliveryDate"
                            type="daterange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                    >
                    </el-date-picker>
                </template>
                <template slot="requiredDeliveryDateSearch">
                    <el-date-picker
                            v-model="search.requiredDeliveryDate"
                            type="daterange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                    >
                    </el-date-picker>
                </template>
                <template slot-scope="scope" slot="corpId">
          <span
                  style="color: #409EFF;cursor: pointer"
                  @click.stop="editOpen(scope.row, 1)"
          >{{ scope.row.strCorpName }}
          </span>
                </template>
                <template slot-scope="scope" slot="orderNo">
          <span
                  style="color: #409EFF;cursor: pointer"
                  @click.stop="editOpen(scope.row, 1)"
          >{{ scope.row.orderNo }}
          </span>
                </template>
                <template slot-scope="scope" slot="fudaPurchaseStatus">
          <span class="el-button--text">
            {{ scope.row.fudaPurchaseStatus }}
          </span>
                </template>
                <template slot-scope="scope" slot="fudaPurchaseDate">
          <span class="el-button--text">
            {{ scope.row.fudaPurchaseDate }}
          </span>
                </template>
                <template slot-scope="scope" slot="productionScheduling">
          <span class="el-button--text">
            {{ scope.row.productionScheduling }}
          </span>
                </template>
                <template slot-scope="scope" slot="createUser">
                    {{ scope.row.createUserName }}
                </template>
                <template slot-scope="{ row }" slot="orderQuantity">
                    <span>{{ row.orderQuantity | IntegerFormat }}</span>
                </template>
                <template slot-scope="scope" slot="menu">
                    <el-button
                            type="text"
                            icon="el-icon-delete"
                            size="small"
                            @click.stop="rowDel(scope.row, scope.index)"
                    >删除
                    </el-button>
                </template>
            </avue-crud>
        </basic-container>
        <detail-page
                @goBack="goBack"
                @copyOrder="copyOrder"
                :detailData="detailData"
                v-if="!show"
        ></detail-page>
        <el-dialog
                title="导入采购任务"
                v-if="dialogVisible"
                :visible.sync="dialogVisible"
                append-to-body
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                :before-close="function() {
          dialogVisible = false;params={}
        }"
                top="1vh"
                width="90%">
      <span>
        <el-row>
          <el-col :span="6" style="padding: 0 10px">
            <el-scrollbar>
<!--                <avue-tree :option="treeOption" :key="avueTree" :data="treeData" @node-click="nodeClick"/>-->
                <!--                {{ treeData }}-->
                <el-table
                        style="width: 100%"
                        border
                        size="mini"
                        ref="singleTable"
                        highlight-current-row
                        @current-change="handleCurrentChange"
                        :data="treeData">
                      <el-table-column
                              prop="orderNo"
                              show-overflow-tooltip
                              align="center"
                              label="销售单号">
                      </el-table-column>
                      <el-table-column
                              prop="plannedDeliveryDate"
                              show-overflow-tooltip
                              width="105"
                              align="center"
                              label="交货日期">
                          <template slot-scope="{row}">
                              {{ row.plannedDeliveryDate ? row.plannedDeliveryDate.slice(0, 10) : '' }}
                          </template>
                      </el-table-column>
                </el-table>
            </el-scrollbar>
          </el-col>
          <el-col :span="18">
<!--            :page.sync="dialogPage"-->
            <avue-crud
                    :data="dialogData"
                    :option="dialogOption"
                    :search.sync="params"
                    ref="dialogCrud"
                    @resetColumn="resetColumnTwo('dialogCrud','dialogOption','dialogOptionList',2.1)"
                    @saveColumn="saveColumnTwo('dialogCrud','dialogOption','dialogOptionList',2.1)"
                    @refresh-change="refreshChangeTwo"
                    @search-change="searchChangeTwo"
                    @search-reset="searchReset"
                    @on-load="dialogOnLoad">
          <template slot="menuLeft">
                <el-tabs v-model="activeName" @tab-click="tabHandle">
                  <el-tab-pane label="查询结果" name="searchList"/>
                  <el-tab-pane label="已选定数据" name="importStaging"/>
                </el-tabs>
              </template>
          <template slot="corpNameSearch">
            <crop-select v-model="params.corpId" corpType="GYS"/>
          </template>
          <template slot="orderQuantity" slot-scope="scope">
              <el-input-number v-if="activeName === 'importStaging'" v-model="scope.row.orderQuantity" :precision="2" :min="0.01" :controls="false"></el-input-number>
              <span v-else>{{scope.row.orderQuantity}}</span>
          </template>
          <template slot-scope="scope" slot="menu">
            <el-button
                    type="text"
                    icon="el-icon-edit"
                    size="small"
                    @click.stop="importStagList(scope.row, scope.index)"
                    v-if="activeName == 'searchList'"
                    :disabled=" goodsListSave.findIndex(item => item.id == scope.row.id) !== -1 "
            >选择
            </el-button>
            <el-button
                    type="text"
                    icon="el-icon-delete"
                    size="small"
                    @click.stop="removeStagList(scope.row, scope.index)"
                    v-else
            >移除
            </el-button>
          </template>
        </avue-crud>
          </el-col>
        </el-row>
      </span>
            <span slot="footer" class="dialog-footer">
          <el-button type="warning" @click="outExport">导出</el-button>
        <el-button @click="dialogVisible = false;params={}">取 消</el-button>
        <el-button type="primary" :disabled="goodsListSave.length === 0" @click="confirmImport">导 入</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
import option from "./config/mainList.json";
import {
    getList,
    remove,
    gainUser,
    listXS,
    generatePurchaseBill,
    listBYStatus
} from "@/api/exportTrade/purchaseContract";
import detailPage from "./detailsPage.vue";
import {defaultDate} from "@/util/date";
import {IntegerFormat} from "@/util/validate";
import {customerParameter} from "@/enums/management-type";
import {getToken} from "@/util/auth";

export default {
    name: "customerInformation",
    data() {
        return {
            search: {
                businesDate: defaultDate()
            },
            treeData: [],
            avueTree: false,
            treeOption: {
                nodeKey: "id",
                lazy: true,
                treeLoad: function (node, resolve) {
                    listBYStatus({}).then(res => {
                        resolve(
                            res.data.data.map(item => {
                                return {
                                    ...item,
                                    leaf: !item.hasChildren
                                };
                            })
                        );
                    });
                },
                addBtn: false,
                menu: false,
                size: "small",
                props: {
                    labelText: "标题",
                    label: "orderNo",
                    value: "id",
                    children: "children"
                }
            },
            dialogData: [],
            goodsListShow: [],
            goodsListSave: [],
            params: {},
            dialogPage: {
                pageSize: 20,
                currentPage: 1,
                total: 0,
                pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500]
            },
            activeName: 'searchList',
            dialogOption: {},
            dialogOptionList: {
                searchShow: true,
                searchMenuSpan: 8,
                border: true,
                index: true,
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                addBtn: false,
                menuWidth: "100",
                headerAlign: "center",
                searchIcon: false,
                searchIndex: 2,
                tip: false,
                column: [{
                    label: "销售单号",
                    prop: "billNo",
                    search: true,
                    searchSpan: 8,
                    searchOrder:1,
                    overHidden: true
                }, {
                    label: "销售日期",
                    prop: "businesDate",
                    searchProp: "businesDateList",
                    width: 100,
                    type: "date",
                    searchSpan: 8,
                    searchRange: true,
                    search: true,
                    searchDefaultTime: ["00:00:00", "23:59:59"],
                    format: "yyyy-MM-dd",
                    valueFormat: "yyyy-MM-dd HH:mm:ss",
                    overHidden: true
                }, {
                    label: "供应商",
                    prop: "corpName",
                    searchSpan: 8,
                    search: true,
                    overHidden: true
                }, {
                    label: "交货日期",
                    prop: "plannedDeliveryDate",
                    searchProp: "plannedDeliveryDateList",
                    width: 100,
                    type: "date",
                    searchSpan: 8,
                    searchRange: true,
                    search: true,
                    searchDefaultTime: ["00:00:00", "23:59:59"],
                    format: "yyyy-MM-dd",
                    valueFormat: "yyyy-MM-dd HH:mm:ss",
                    overHidden: true
                }, {
                    label: "采购员",
                    prop: "carry",
                    overHidden: true
                }, {
                    label: "产品名称",
                    prop: "cname",
                    overHidden: true
                }, {
                    label: "产品编号",
                    prop: "code",
                    overHidden: true
                }, {
                    label: "产品类别",
                    prop: "priceCategory",
                    overHidden: true
                }, {
                    label: "产品型号",
                    prop: "itemType",
                    overHidden: true
                }, {
                    label: "数量",
                    prop: "orderQuantity"
                }, {
                    label: "采购数",
                    prop: "purchaseQuantity",
                    overHidden: true
                }, {
                    label: "螺纹",
                    prop: "remarksOne",
                    overHidden: true
                }, {
                    label: "介质",
                    prop: "customTwo",
                    overHidden: true
                }, {
                    label: "颜色",
                    prop: "customThree",
                    overHidden: true
                }, {
                    label: "电压",
                    prop: "customFour",
                    overHidden: true
                }, {
                    label: "显示全部",
                    prop: "showAll",
                    searchSpan: 8,
                    searchOrder:2,
                    overHidden: true,
                    type: "select",
                    clearable:false,
                    search: true,
                    hide: true,
                    showColumn: false,
                    dicData: [{
                        label: '需采购',
                        value: 0
                    }, {
                        label: '已采购',
                        value: 1
                    }],
                    searchValue: 0
                }]
            },
            dialogVisible: false,
            form: {},
            option: {},
            parentId: 0,
            dataList: [],
            page: {
                pageSize: 20,
                currentPage: 1,
                total: 0,
                pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500]
            },
            totalTwo: 0,
            show: true,
            detailData: {},
            loading: false,
            selectionList: []
        };
    },
    components: {detailPage},
    async created() {
        this.option = await this.getColumnData(this.getColumnName(2), option);
        this.dialogOption = await this.getColumnData(this.getColumnName(2.1), this.dialogOptionList);
        this.getWorkDicts("payment_term").then(res => {
            this.findObject(this.option.column, "paymentType").dicData = res.data.data;
        });
        gainUser().then(res => {
            this.findObject(this.option.column, "createUser").dicData = res.data.data;
        });
        this.option.height = window.innerHeight - 210;
    },
    filters: {
        IntegerFormat(num) {
            return IntegerFormat(num);
        }
    },
    activated() {
        if (this.$route.query.check) {
            this.detailData = {
                check: this.$route.query.check,
                id: this.$route.query.check.billId
            };
            this.show = false;
            this.$store.commit("IN_CG_STATUS");
        }
    },
    methods: {
        outExport() {
            let config = {params: {...this.params}}
            if (config.params) {
                for (const propName of Object.keys(config.params)) {
                    const value = config.params[propName];
                    if (value !== null && typeof (value) !== "undefined") {
                        if (value instanceof Array) {
                            for (const key of Object.keys(value)) {
                                let params = propName + '[' + key + ']';
                                config.params[params] = value[key]
                            }
                            delete config.params[propName]
                        }
                    }
                }
            }
            const routeData = this.$router.resolve({
                path: '/api/blade-purchase-sales/exportOrder/listXSExport',      //跳转目标窗口的地址
                query: {
                    ...config.params    //括号内是要传递给新窗口的参数
                }
            })
            window.open(routeData.href.slice(1, routeData.href.length) + '&' + `${this.website.tokenHeader}=${getToken()}`);
        },
        nodeClick(data) {
            this.params.pid = data.id
            this.dialogPage.currentPage = 1;
            this.dialogOnLoad(this.dialogPage);
        },
        removeStagList(row, index) {
            this.goodsListSave.splice(row.$index, 1);
        },
        searchCriteriaSwitch(type) {
            if (type) {
                this.option.height = this.option.height - 139;
            } else {
                this.option.height = this.option.height + 139;
            }
            this.$refs.crud.getTableHeight();
        },
        cellStyle() {
            return "padding:0;height:40px;";
        },
        //删除列表后面的删除按钮触发触发(row, index, done)
        rowDel(row, index, done) {
            this.$confirm("确定删除数据?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                remove(row.id).then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: "success",
                            message: "删除成功!"
                        });
                        this.onLoad(this.page, this.search);
                    }
                });
            });
        },
        selectionChange(list) {
            this.selectionList = list;
        },
        copyDoc() {
            this.selectionList.forEach(e => {
                this.detailData = {
                    id: e.id,
                    status: "copy"
                };
                this.show = false;
            });
        },
        copyOrder(id) {
            this.show = true;
            this.detailData = {
                id: id,
                status: "copy"
            };
            this.$nextTick(() => {
                this.show = false;
            });
        },
        editOpen(row, status) {
            this.detailData = {
                id: row.id,
                status: status
            };
            this.show = false;
        },
        //点击搜索按钮触发
        searchChange(params, done) {
            if (params.businesDate) {
                params.businesStartDate = params.businesDate[0];
                params.businesEndDate = params.businesDate[1];
            }
            if (params.requiredDeliveryDate) {
                params.requiredDeliveryStartDate = params.requiredDeliveryDate[0];
                params.requiredDeliveryEndDate = params.requiredDeliveryDate[1];
            }
            delete params.businesDate;
            delete params.requiredDeliveryDate;
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        currentChange(val) {
            this.page.currentPage = val;
        },
        sizeChange(val) {
            this.page.currentPage = 1;
            this.page.pageSize = val;
        },
        // 标签页切换
        tabHandle(data) {
            if (data.name == 'searchList') {
                this.dialogData = this.goodsListShow;
                this.dialogPage.total = this.totalTwo
            } else if (data.name == 'importStaging') {
                this.goodsListShow = this.dialogData;
                this.dialogData = this.goodsListSave;
                this.totalTwo = this.dialogPage.total
                this.dialogPage.total = 0
            }
        },
        importStagList(row, index) {
            this.goodsListSave.push(row);
        },
        refreshChangeTwo() {
            this.dialogOnLoad(this.page);
        },
        searchChangeTwo(params, done) {
            done()
            if (!this.params.pid && !this.params.billNo) {
                return this.$message.error("请选择左边单号或输入销售单号")
            } else {
                this.dialogOnLoad(this.page);
            }
        },
        searchReset() {
            this.avueTree = !this.avueTree
            this.params.showAll = 0
            this.$refs.singleTable.setCurrentRow([]);
            this.dialogData = []
        },
        //自定义列保存
        async saveColumnTwo(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;
            }
        },
//自定义列重置
        async resetColumnTwo(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;
            }
        },
        confirmImport() {
            let ids = this.goodsListSave.map(item => {
                return item.id
            })
            const loading = this.$loading({
                lock: true,
                text: '加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(255,255,255,0.7)'
            });
            generatePurchaseBill(this.goodsListSave).then(res => {
                this.$message.success("导入成功")
                this.detailData = {
                    form: res.data.data
                };
                loading.close()
                this.dialogVisible = false
                setTimeout(() => {
                    this.show = false;
                }, 200);
            }).catch(() => {
                loading.close()
            })
        },
        dialogOnLoad(page, params) {
            this.dialogLoading = true;
            params = {
                ...params,
                size: page.pageSize,
                current: page.currentPage,
                ...this.params
            }
            if (this.params.pid || this.params.billNo) {
                listXS(params).then(res => {
                    this.dialogLoading = false
                    this.dialogData = res.data.data
                    // this.dialogPage.total = res.data.data.total
                })
            }
        },
        onLoad(page, params) {
            if (this.search.businesDate && this.search.businesDate.length > 0) {
                params = {
                    ...params,
                    orderStartDate: this.search.businesDate[0],
                    orderEndDate: this.search.businesDate[1]
                };
                delete params.businesDate;
            }

            if (this.search.requiredDeliveryDate && this.search.requiredDeliveryDate.length > 0) {
                params = {
                    ...params,
                    requiredDeliveryStartDate: this.search.requiredDeliveryDate[0],
                    requiredDeliveryEndDate: this.search.requiredDeliveryDate[1]
                };
                delete params.requiredDeliveryDate
            }
            this.loading = true;
            getList(page.currentPage, page.pageSize, params)
                .then(res => {
                    this.dataList = res.data.data.records ? res.data.data.records : [];
                    this.page.total = res.data.data.total;
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        refreshChange() {
            this.onLoad(this.page, this.search);
        },
        newAdd(type) {
            this.detailData = {
                pageType: type
            };
            this.show = false;
        },
        goBack() {
            this.detailData = this.$options.data().detailData;
            this.show = true;
            this.onLoad(this.page, this.search);
        },
        async saveColumn() {
            const inSave = await this.saveColumnData(
                this.getColumnName(2),
                this.option
            );
            if (inSave) {
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                });
                this.$message.success("保存成功");
                //关闭窗口
                this.$refs.crud.$refs.dialogColumn.columnBox = false;
            }
        },
        async resetColumn() {
            this.option = option;
            const inSave = await this.delColumnData(this.getColumnName(2), option);
            if (inSave) {
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                });
                this.$message.success("重置成功");
                this.$refs.crud.$refs.dialogColumn.columnBox = false;
            }
        },
        handleCurrentChange(val) {
            // this.currentRow = val;
            this.params.pid = val.id
            this.dialogPage.currentPage = 1;
            this.dialogOnLoad(this.dialogPage);
        }
    },
    watch: {
        option: function () {
            this.search.businesDate = defaultDate();
        },
        dialogVisible: function () {
            this.goodsListShow = []
            this.goodsListSave = []
            this.totalTwo = 0
            listBYStatus({}).then(res => {
                this.treeData = res.data.data
            });
        }
    }
};
</script>

<style scoped>
::v-deep .select-component {
    display: flex;
}

.page-crad ::v-deep .basic-container__card {
    height: 94.2vh;
}
</style>