tire-platform-ui/src/views/tirePartsMall/salesManagement/saleOrder/detailsPage.vue

<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="backToList(0)">返回列表
        </el-button>
      </div>
      <div class="add-customer-btn">
        <!--        <el-button class="el-button&#45;&#45;small-yh" style="margin-right: 10px" type="primary" size="small" v-if="!editButton"-->
        <!--                   @click="confirmEditing">编辑-->
        <!--        </el-button>-->
        <el-button
            class="el-button--small-yh"
            type="primary"
            size="small"
            @click="editCustomer">保存数据
        </el-button>
        <el-button
            class="el-button--small-yh"
            type="primary"
            size="small"
            @click="generateOutbound">生成出库任务
        </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="明细信息">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="销售明细" name="sale_detail">
            <avue-crud :option="optionContacts"
                       v-model="formContacts"
                       ref="formContacts"
                       :data="form.orderItemsList"
                       :key="key"
                       @row-save="rowSave"
                       @row-update="rowUpdate"
                       @resetColumn="resetColumnTwo('formContacts','optionContacts','optionContactsBack',269.1)"
                       @saveColumn="saveColumnTwo('formContacts','optionContacts','optionContactsBack',269.1)">
              <template slot-scope="{type,size,row,index,disabled}" slot="menu">
                <el-button
                    :size="size" :disabled="disabled" :type="type"
                    :icon="row.$cellEdit?'el-icon-plus':'el-icon-edit'"
                    @click="$refs.formContacts.rowEdit(row,index)"
                >编辑
                </el-button>
                <el-button icon="el-icon-delete" :size="size" :disabled="disabled" :type="type"
                           @click="rowDelBox(row,index,'orderItemsList')">删除
                </el-button>
              </template>
            </avue-crud>
          </el-tab-pane>
          <el-tab-pane label="支付明细" name="payment_details">
            <avue-crud :option="optionPaymentDetails" v-model="formContacts" ref="payment_details"
                       :data="form.paymentRecordsList"
                       @row-save="rowSave"
                       @row-update="rowUpdate"
                       @resetColumn="resetColumnTwo('payment_details','optionPaymentDetails','optionPaymentDetailsBack',269.2)"
                       @saveColumn="saveColumnTwo('payment_details','optionPaymentDetails','optionPaymentDetailsBack',269.2)">
              <template slot-scope="{type,size,row,index,disabled}" slot="menu">
                <el-button
                    :size="size" :disabled="disabled" :type="type"
                    :icon="row.$cellEdit?'el-icon-plus':'el-icon-edit'"
                    @click="$refs.formContacts.rowCell(row,index)"
                >{{ row.$cellEdit ? '确认' : '修改' }}
                </el-button>
                <el-button icon="el-icon-delete" :size="size" :disabled="disabled" :type="type"
                           @click="rowDelBox(row,index,'paymentRecordsList')">删除
                </el-button>
              </template>
            </avue-crud>
          </el-tab-pane>
          <el-tab-pane label="出库记录" name="outbound_records">
            <avue-crud :option="optionOutboundRecords" v-model="formContacts" ref="outbound_records"
                       :data="form.outboundRecordsList"
                       @row-save="rowSave"
                       @row-update="rowUpdate"
                       @resetColumn="resetColumnTwo('outbound_records','optionOutboundRecords','optionOutboundRecordsBack',269.3)"
                       @saveColumn="saveColumnTwo('outbound_records','optionOutboundRecords','optionOutboundRecordsBack',269.3)">
              <template slot-scope="{type,size,row,index,disabled}" slot="menu">
                <el-button
                    :size="size" :disabled="disabled" :type="type"
                    :icon="row.$cellEdit?'el-icon-plus':'el-icon-edit'"
                    @click="$refs.formContacts.rowCell(row,index)"
                >{{ row.$cellEdit ? '确认' : '修改' }}
                </el-button>
                <el-button icon="el-icon-delete" :size="size" :disabled="disabled" :type="type"
                           @click="rowDelBox(row,index)">删除
                </el-button>
              </template>
            </avue-crud>
          </el-tab-pane>
        </el-tabs>
      </trade-card>
    </div>
  </div>
</template>

<script>
import {getDetails, submit, generateShipTask, tradingBox} from "@/api/tirePartsMall/salesManagement/saleOrder";

export default {
  name: "detailsPage",
  data() {
    return {
      activeName: "sale_detail",
      disabled: false,
      key: 0,
      form: {
        orderItemsList: [],
        paymentRecordsList: [],
        outboundRecordsList: []
      },
      optionForm: {
        menuBtn: false,
        span: 8,
        column: [{
          label: '客户',
          prop: "customerId",
          type: 'select',
          props: {
            label: 'cname',
            value: 'id'
          },
          cascader: ['recAddress'],
          change:(data)=>{
            if (this.$refs.form.DIC.customerId || data.value){
              for (let item of this.$refs.form.DIC.customerId){
                if (item.id == data.value){
                  //   后端返回数据暂无联系人、地址等数据，无法下拉默认
                }
              }
            }
          },
          dicUrl: '/api/blade-sales-part/corpsDesc/listAll?corpType=KH',
          rules: [{
            required: true,
            message: " ",
            trigger: "blur"
          }]
        }, {
          label: '仓库',
          prop: "storageId",
          type: 'select',
          props: {
            label: 'cname',
            value: 'id'
          },
          dicUrl: '/api/blade-sales-part/storageDesc/listAll',
          rules: [{
            required: true,
            message: " ",
            trigger: "blur"
          }]
        }, {
          label: '单据编号',
          prop: "ordNo",
        }, {
          label: '来源单号',
          prop: "srcOrdNo",
          disabled: true
        }, {
          label: '业务来源',
          prop: "businessSource",
          disabled: true
        }, {
          label: '应收类别',
          prop: "receivableType",
          type: "select",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=receivableType",
          props: {
            label: "dictValue",
            value: "dictValue"
          }
        }, {
          label: '联系人',
          prop: "contacts",
        }, {
          label: '电话',
          prop: "phone",
        }, {
          label: '收货地址',
          prop: "recAddress",
          type: 'select',
          props: {
            label: 'address',
            value: 'id'
          },
          dicUrl: '/api/blade-sales-part/corpsAddr/corpIdByAddr?pid={{key}}',
          rules: [{
            required: true,
            message: " ",
            trigger: "blur"
          }]
        }, {
          label: '配送方式',
          prop: "shipType",
        }, {
          label: '物流公司',
          prop: "logisticsCorpName"
        }, {
          label: '成本',
          prop: "cost"
        }, {
          label: '毛利',
          prop: "grossProfit"
        }, {
          label: '销售金额',
          prop: "salesAmount"
        }, {
          label: '运费',
          prop: "freight"
        }, {
          label: '总金额',
          prop: "totalMoney"
        }, {
          label: '备注',
          prop: "remarks",
          type: 'textarea',
          span: 16,
          minRows: 1
        }]
      },
      formContacts: {},
      optionContacts: {},
      optionContactsBack: {
        border: true,
        align: 'center',
        index: true,
        addBtnText: "录入明细",
        refreshBtn: false,
        dialogDrag: true,
        addBtn: true,
        span: 8,
        height: 500,
        addRowBtn: false,
        editBtn: false,
        delBtn: false,
        menuWidth: 140,
        dialogTop: 25,
        dialogWidth: "80%",
        // summaryText: "合计",
        // showSummary: true,
        // sumColumnList:[{
        //   name: "goodsNum",
        //   type: "sum",
        //   decimals: 2
        // },{
        //   name: "sendNum",
        //   type: "sum",
        //   decimals: 2
        // },{
        //   name: "profit",
        //   type: "sum",
        //   decimals: 2
        // },{
        //   name: "subTotalMoney",
        //   type: "sum",
        //   decimals: 2
        // },{
        //   name: "thisAmount",
        //   type: "sum",
        //   decimals: 2
        // },{
        //   name: "costprie",
        //   type: "sum",
        //   decimals: 2
        // },{
        //   name: "grossProfit",
        //   type: "sum",
        //   decimals: 2
        // }],
        column: [{
          label: '物料编码',
          prop: 'goodsNo',
          overHidden: true,
          width: 100
        }, {
          label: '商品名称',
          prop: 'goodsId',
          width: 200,
          overHidden: true,
          type: 'select',
          props: {
            label: 'cname',
            value: 'id'
          },
          dicUrl: '/api/blade-sales-part/goodsDesc/goodsListAll'
        }, {
          label: '品牌',
          prop: 'brandId',
          width: 100,
          overHidden: true,
          type: 'select',
          props: {
            label: 'cname',
            value: 'id'
          },
          dicUrl: '/api/blade-sales-part/brandDesc/listAll'
        }, {
          label: '规格型号',
          prop: 'propertyName',
          overHidden: true,
          width: 100
        }, {
          label: '花纹',
          prop: 'pattern',
          overHidden: true,
          width: 100
        }, {
          label: '商品描述',
          prop: 'goodsDescription',
          overHidden: true,
          width: 100
        }, {
          label: '数量',
          prop: 'goodsNum',
          overHidden: true,
          width: 100
        }, {
          label: '单位',
          prop: 'units',
          type: "select",
          props: {
            label: "dictValue",
            value: "dictValue"
          },
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=unit",
          overHidden: true,
          width: 100
        }, {
          label: '批次号',
          prop: 'dot',
          overHidden: true,
          width: 100
        }, {
          label: '价格',
          prop: 'price',
          overHidden: true,
          width: 100
        }, {
          label: '发货数量',
          prop: 'sendNum',
          overHidden: true,
          width: 100
        }, {
          label: '毛利',
          prop: 'grossProfit',
          overHidden: true,
          width: 100
        }
        // , {
        //   label: '利润',
        //   prop: 'profit',
        //   overHidden: true,
        //   width: 100
        // }
        , {
          label: '小计',
          prop: 'subTotalMoney',
          overHidden: true,
          width: 100
        }, {
          label: '返利',
          prop: 'thisAmount',
          overHidden: true,
          width: 100
        }, {
          label: '成本',
          prop: 'costprie',
          overHidden: true,
          width: 100
        }]
      },
      optionPaymentDetails: {},
      optionPaymentDetailsBack: {
        align: 'center',
        index: true,
        addBtnText: "录入明细",
        refreshBtn: false,
        dialogDrag: true,
        addBtn: false,
        span: 8,
        height: 600,
        addRowBtn: false,
        editBtn: false,
        delBtn: false,
        menuWidth: 140,
        dialogTop: 25,
        dialogWidth: "80%",
        column: [{
          label: '支付编号',
          prop: 'paymentNumber'
        }, {
          label: '金额',
          prop: 'amount'
        }, {
          label: '类型',
          prop: 'paymentType'
        }, {
          label: '支付时间',
          prop: 'paymentTime'
        }]
      },
      optionOutboundRecords: {},
      optionOutboundRecordsBack: {
        align: 'center',
        index: true,
        addBtnText: "录入明细",
        refreshBtn: false,
        dialogDrag: true,
        addBtn: false,
        span: 8,
        height: 600,
        addRowBtn: false,
        editBtn: false,
        delBtn: false,
        menuWidth: 140,
        dialogTop: 25,
        dialogWidth: "80%",
        column: [{
          label: '出库单号',
          prop: 'billno'
        }, {
          label: '来源单号',
          prop: 'ordNo'
        }, {
          label: '数量',
          prop: 'goodsTotalNum'
        }, {
          label: '状态',
          prop: 'statusName'
        }, {
          label: '业务时间',
          prop: 'createTime'
        }]
      }
    }
  },
  props: {
    onLoad: Object,
    detailData: Object
  },
  async created() {
    this.optionContacts = await this.getColumnData(this.getColumnName(269.1), this.optionContactsBack);
    this.optionPaymentDetails = await this.getColumnData(this.getColumnName(269.2), this.optionPaymentDetailsBack);
    this.optionOutboundRecords = await this.getColumnData(this.getColumnName(269.3), this.optionOutboundRecordsBack);
    this.key++
    if (this.onLoad.id && this.detailData.id) {
      this.refresh(this.onLoad.id, true)
    } else if (this.onLoad.id) {
      this.refresh(this.onLoad.id, true)
    }
  },
  methods: {
    generateOutbound() {
      this.$refs["form"].validate((valid, done) => {
        done();
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '加载中',
            spinner: 'el-icon-loading',
            background: 'rgba(255,255,255,0.7)'
          });
          generateShipTask(this.form).then(res=>{
            this.$message.success("生成出库任务成功");
            loading.close();
          }).finally(() => {
            loading.close();
          });
        }
      })
    },
    //修改提交触发
    editCustomer() {
      this.$refs["form"].validate((valid, done) => {
        done();
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '加载中',
            spinner: 'el-icon-loading',
            background: 'rgba(255,255,255,0.7)'
          });
          submit({
            bsType: "XS",
            ...this.form
          }).then(res => {
            this.$message.success("保存成功");
            this.refresh(res.data.data.id)
            loading.close();
          }).finally(() => {
            loading.close();
          });
        } else {
          return false;
        }
      });
    },
    refresh(id, type) {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(255,255,255,0.7)'
      })
      getDetails({id: id}).then(res => {
        this.form = res.data.data
        loading.close();
      }).catch(() => {
        loading.close();
      })
    },
    rowDelBox(row, index, type) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
          if (row.id) {
            tradingBox(row.id).then(res => {
              this.form.contactsList.splice(index, 1);
              this.$message.success("操作成功!");
            });
          } else {
            this.form[type].splice(index, 1);
            this.$message.success("操作成功!");
          }
        }
      );
    },
    rowSave(form, done, loading) {
      done(form)
    },
    rowUpdate(form, index, done, loading) {
      done(form)
    },
    //自定义列保存
    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;
      }
    },
    backToList(type) {
      this.$emit("backToList", type);
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 8px !important;
}
</style>