|
@@ -0,0 +1,491 @@
|
|
|
+<template>
|
|
|
+ <div class="borderless">
|
|
|
+ <div class="customer-head">
|
|
|
+ <div class="customer-back">
|
|
|
+ <!-- <i class="back-icon el-icon-arrow-left"></i><i style="font-style:normal">返回管理列表</i>-->
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ style="border: none;background: none;color: red"
|
|
|
+ icon="el-icon-arrow-left"
|
|
|
+ @click="backToList"
|
|
|
+ >返回列表
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ class="el-button--small-yh add-customer-btn"
|
|
|
+ type="primary"
|
|
|
+ :disabled="disabled"
|
|
|
+ @click="editCustomer"
|
|
|
+ >{{ form.id ? "确认修改" : "确认新增" }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 60px;margin-bottom:35px">
|
|
|
+ <containerTitle title="基础信息"></containerTitle>
|
|
|
+ <basic-container style="margin-bottom: 10px">
|
|
|
+ <avue-form ref="form" v-model="form" :option="option"> </avue-form>
|
|
|
+ </basic-container>
|
|
|
+ <containerTitle title="商品信息"></containerTitle>
|
|
|
+ <basic-container>
|
|
|
+ <avue-crud
|
|
|
+ :ref="crud"
|
|
|
+ :data="data"
|
|
|
+ :option="tableOption"
|
|
|
+ @row-del="rowDel"
|
|
|
+ >
|
|
|
+ <template slot="menuLeft">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ size="small"
|
|
|
+ @click.stop="newDetails"
|
|
|
+ >新增明细</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="info"
|
|
|
+ icon="el-icon-printer"
|
|
|
+ size="small"
|
|
|
+ @click.stop="openReport()"
|
|
|
+ >打 印</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </avue-crud>
|
|
|
+ </basic-container>
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ title="导入商品"
|
|
|
+ append-to-body
|
|
|
+ class="el-dialogDeep"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="60%"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :destroy-on-close="true"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ @close="closeGoods"
|
|
|
+ top="10vh"
|
|
|
+ >
|
|
|
+ <span>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="5">
|
|
|
+ <div>
|
|
|
+ <el-scrollbar>
|
|
|
+ <basic-container style="margin-top:45px">
|
|
|
+ <avue-tree :option="treeOption" @node-click="nodeClick" />
|
|
|
+ </basic-container>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="19">
|
|
|
+ <avue-crud
|
|
|
+ :option="goodsOption"
|
|
|
+ :table-loading="loading"
|
|
|
+ :data="goodsList"
|
|
|
+ ref="crud"
|
|
|
+ @refresh-change="refreshChange"
|
|
|
+ @selection-change="selectionChange"
|
|
|
+ :page.sync="page"
|
|
|
+ @on-load="onLoad"
|
|
|
+ ></avue-crud>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="importGoods">导入</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <report-dialog
|
|
|
+ :switchDialog="switchDialog"
|
|
|
+ :reportId="form.id"
|
|
|
+ reportName="客户询价"
|
|
|
+ @onClose="onClose()"
|
|
|
+ ></report-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import tableOption from "./config/customerContact.json";
|
|
|
+import goodsOption from "./config/commodity.json";
|
|
|
+import {
|
|
|
+ detail,
|
|
|
+ submit,
|
|
|
+ delItem,
|
|
|
+ getDeptLazyTree,
|
|
|
+ getGoods
|
|
|
+} from "@/api/basicData/customerInquiry";
|
|
|
+import { orderStates } from "@/enums/order-stauts";
|
|
|
+import reportDialog from "@/components/report-dialog/main";
|
|
|
+export default {
|
|
|
+ name: "detailsPageEdit",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ switchDialog: false,
|
|
|
+ form: {},
|
|
|
+ disabled: false,
|
|
|
+ dialogVisible: false,
|
|
|
+ tableOption: tableOption,
|
|
|
+ option: {
|
|
|
+ menuBtn: false,
|
|
|
+ labelWidth: 100,
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: "系统号",
|
|
|
+ prop: "sysNo",
|
|
|
+ span: 8
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "订单状态",
|
|
|
+ prop: "status",
|
|
|
+ span: 8,
|
|
|
+ type: "select",
|
|
|
+ props: {
|
|
|
+ label: "name",
|
|
|
+ value: "code"
|
|
|
+ },
|
|
|
+ dicData: orderStates
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "发票号(PI)",
|
|
|
+ prop: "proformInvoice",
|
|
|
+ span: 8
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "客户名称",
|
|
|
+ prop: "corpId",
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "",
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ span: 8
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "联系人",
|
|
|
+ prop: "corpAttn",
|
|
|
+ span: 8
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "电话",
|
|
|
+ prop: "corpTel",
|
|
|
+ span: 8
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "起运港",
|
|
|
+ prop: "portOfLoad",
|
|
|
+ span: 8
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "目的港",
|
|
|
+ prop: "portOfDestination",
|
|
|
+ span: 8
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "运输方式",
|
|
|
+ prop: "transport",
|
|
|
+ span: 8,
|
|
|
+ type: "select",
|
|
|
+ dicUrl: "/api/blade-system/dict-biz/dictionary?code=mode_transport",
|
|
|
+ props: {
|
|
|
+ label: "dictValue",
|
|
|
+ value: "dictValue"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "价格条款",
|
|
|
+ prop: "priceTerms",
|
|
|
+ span: 8,
|
|
|
+ type: "select",
|
|
|
+ dicUrl: "/api/blade-system/dict-biz/dictionary?code=pricing_terms",
|
|
|
+ props: {
|
|
|
+ label: "dictValue",
|
|
|
+ value: "dictValue"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "条款说明",
|
|
|
+ prop: "priceTermsDescription",
|
|
|
+ span: 8
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "贸易条款",
|
|
|
+ prop: "tradeTerms",
|
|
|
+ span: 8,
|
|
|
+ type: "select",
|
|
|
+ dicUrl: "/api/blade-system/dict-biz/dictionary?code=trade_terms",
|
|
|
+ props: {
|
|
|
+ label: "dictValue",
|
|
|
+ value: "dictValue"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "贸易条款说明",
|
|
|
+ prop: "tradeTermsDescription",
|
|
|
+ span: 8
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "订单日期",
|
|
|
+ prop: "businesDate",
|
|
|
+ span: 8,
|
|
|
+ type: "date",
|
|
|
+ format: "yyyy-MM-dd",
|
|
|
+ valueFormat: "yyyy-MM-dd 00:00:00"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "有效日期",
|
|
|
+ prop: "dateValidity",
|
|
|
+ span: 8,
|
|
|
+ type: "date",
|
|
|
+ format: "yyyy-MM-dd",
|
|
|
+ valueFormat: "yyyy-MM-dd 00:00:00"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "收款方式",
|
|
|
+ prop: "paymentType",
|
|
|
+ span: 8,
|
|
|
+ type: "select",
|
|
|
+ dicUrl: "/api/blade-system/dict-biz/dictionary?code=payment_term",
|
|
|
+ props: {
|
|
|
+ label: "dictValue",
|
|
|
+ value: "dictValue"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "收款说明",
|
|
|
+ prop: "paymentTypeDescription",
|
|
|
+ span: 8
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "币别",
|
|
|
+ prop: "currency",
|
|
|
+ span: 8
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "汇率",
|
|
|
+ prop: "exchangeRate",
|
|
|
+ span: 8
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "信用证编号",
|
|
|
+ prop: "creditNumber",
|
|
|
+ span: 8
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "信用证到期日",
|
|
|
+ prop: "creditDate",
|
|
|
+ span: 8,
|
|
|
+ type: "date",
|
|
|
+ format: "yyyy-MM-dd",
|
|
|
+ valueFormat: "yyyy-MM-dd 00:00:00"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "信用证金额",
|
|
|
+ prop: "creditAmount",
|
|
|
+ span: 8
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "备注",
|
|
|
+ prop: "orderRemark",
|
|
|
+ type: "textarea",
|
|
|
+ minRows: 2,
|
|
|
+ span: 16
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ treeOption: {
|
|
|
+ nodeKey: "id",
|
|
|
+ lazy: true,
|
|
|
+ treeLoad: function(node, resolve) {
|
|
|
+ const parentId = node.level === 0 ? 0 : node.data.id;
|
|
|
+ getDeptLazyTree(parentId).then(res => {
|
|
|
+ resolve(
|
|
|
+ res.data.data.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ leaf: !item.hasChildren
|
|
|
+ };
|
|
|
+ })
|
|
|
+ );
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addBtn: false,
|
|
|
+ menu: false,
|
|
|
+ size: "small",
|
|
|
+ props: {
|
|
|
+ label: "title",
|
|
|
+ value: "value",
|
|
|
+ children: "children"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ page: {
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ goodsOption: goodsOption,
|
|
|
+ data: [],
|
|
|
+ goodsList: [],
|
|
|
+ selectionList: [],
|
|
|
+ treeDeptId: null
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ reportDialog
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ if (this.$route.query.id) {
|
|
|
+ this.getDetail(JSON.parse(this.$route.query.id));
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ rowDel(row, index) {
|
|
|
+ if (row.id) {
|
|
|
+ delItem(row.id).then(res => {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "操作成功!"
|
|
|
+ });
|
|
|
+ this.data.splice(index, 1);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "操作成功!"
|
|
|
+ });
|
|
|
+ this.data.splice(index, 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ importGoods() {
|
|
|
+ this.data = this.data.concat(this.selectionList);
|
|
|
+ this.dialogVisible = false;
|
|
|
+ },
|
|
|
+ closeGoods() {
|
|
|
+ this.selectionList = [];
|
|
|
+ this.treeDeptId = "";
|
|
|
+ },
|
|
|
+ selectionChange(list) {
|
|
|
+ console.log(list);
|
|
|
+ list.map(e => {
|
|
|
+ e.itemId = e.code;
|
|
|
+ e.priceCategory = e.goodsTypeName;
|
|
|
+ e.itemUrl = e.url;
|
|
|
+ e.itemProp = null;
|
|
|
+ e.itemDescription = null;
|
|
|
+ e.itemDescription = null;
|
|
|
+ e.itemType = null;
|
|
|
+ e.orderQuantity = 1;
|
|
|
+ e.tradeTerms = null;
|
|
|
+ e.price = 0;
|
|
|
+ e.amount = 0;
|
|
|
+ e.taxRate = 0;
|
|
|
+ e.remarks = null;
|
|
|
+ e.$cellEdit = true;
|
|
|
+ delete e.id;
|
|
|
+ });
|
|
|
+ this.selectionList = list;
|
|
|
+ console.log(this.selectionList);
|
|
|
+ },
|
|
|
+ nodeClick(data) {
|
|
|
+ this.treeDeptId = data.id;
|
|
|
+ this.page.currentPage = 1;
|
|
|
+ this.onLoad(this.page);
|
|
|
+ },
|
|
|
+ //费用查询
|
|
|
+ onLoad(page, params = {}) {
|
|
|
+ this.loading = true;
|
|
|
+ getGoods(page.currentPage, page.pageSize, this.treeDeptId).then(res => {
|
|
|
+ const data = res.data.data;
|
|
|
+ this.page.total = data.total;
|
|
|
+ this.goodsList = data.records;
|
|
|
+ this.loading = false;
|
|
|
+ if (this.page.total) {
|
|
|
+ this.goodsOption.height = window.innerHeight - 470;
|
|
|
+ } else {
|
|
|
+ this.goodsOption.height = window.innerHeight - 395;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //商品明细导入
|
|
|
+ newDetails() {
|
|
|
+ this.dialogVisible = !this.dialogVisible;
|
|
|
+ },
|
|
|
+ getDetail(id) {
|
|
|
+ detail(id).then(res => {
|
|
|
+ this.form = res.data.data;
|
|
|
+ this.data = res.data.data.orderItemsList;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //修改提交触发
|
|
|
+ editCustomer() {
|
|
|
+ this.$refs["form"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ submit({
|
|
|
+ ...this.form,
|
|
|
+ orderItemsList: this.data
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res);
|
|
|
+ this.backToList();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //返回列表
|
|
|
+ backToList() {
|
|
|
+ this.$router.$avueRouter.closeTag();
|
|
|
+ this.$router.push({
|
|
|
+ path: "/exportTrade/customerInquiry/index",
|
|
|
+ query: {}
|
|
|
+ });
|
|
|
+ },
|
|
|
+ openReport() {
|
|
|
+ this.switchDialog = !this.switchDialog;
|
|
|
+ },
|
|
|
+ onClose(val) {
|
|
|
+ this.switchDialog = val;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.customer-head {
|
|
|
+ position: fixed;
|
|
|
+ top: 105px;
|
|
|
+ width: 100%;
|
|
|
+ margin-left: -10px;
|
|
|
+ height: 62px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0 4px 12px 0px rgba(232, 232, 235, 1);
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
+
|
|
|
+.customer-back {
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 62px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #323233;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+
|
|
|
+.back-icon {
|
|
|
+ line-height: 64px;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-right: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.add-customer-btn {
|
|
|
+ position: fixed;
|
|
|
+ right: 36px;
|
|
|
+ top: 115px;
|
|
|
+}
|
|
|
+::v-deep .el-form-item {
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+::v-deep .el-form-item__error {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+</style>
|