123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353 |
- <template>
- <div class="bg-in-stock" ref="printId">
- <div class="numOrder">
- <barcode :value="barcodeValue"></barcode>
- </div>
- <el-form ref="orderFormRef" :rules="rules" :model="OrderForm" label-width="120px" inline :disabled="isDetail">
- <h3>基本信息</h3>
- <el-row>
- <el-col :span="10">
- <el-form-item label="订单类型:" prop="type" :rules="rules.type">
- {{ getTypeName(OrderForm.type) }}
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="下单客户:" prop="member_id">
- {{ getMemberName(OrderForm.member_id) }}
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="客户名称:" prop="customer_name">
- {{ OrderForm.customer_name }}
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="客户联系方式:">
- {{ OrderForm.customer_phone }}
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="起始时间:" prop="time" :rules="rules.start_time" v-if="OrderForm.type == 'TO_C'">
- {{ OrderForm.start_time }}
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="付款方式:" prop="pay_type" :rules="rules.pay_type">
- {{ getPayType(OrderForm.pay_type) }}
- </el-form-item>
- </el-col>
- <!-- <el-col :span="10">
- <el-form-item label="应付金额:" prop="pay_price" :rules="rules.pay_price">
- <span>{{ "¥" + price }}</span>
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="折扣:" prop="">
- <el-input placeholder="请输入" v-model="discount" @blur="handleBlur"
- :disabled="type == 'pone'"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="实付金额:" prop="real_price" :rules="rules.pay_price">
- {{ "¥" + OrderForm.real_price }}
- </el-form-item>
- </el-col>-->
- <el-col :span="10">
- <el-form-item label="销售人员:" prop="marketing_id" :rules="rules.marketing_id">
- {{ getMarketingName(OrderForm.marketing_id) }}
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="配送方式:" prop="send_type" :rules="rules.send_type">
- {{ getSendType(OrderForm.send_type) }}
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="配送仓库:" prop="warehouse_id" :rules="rules.warehouse_id">
- {{ warehouseNames(OrderForm.warehouse_id) }}
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="返回仓库:" prop="return_warehouse_id" :rules="rules.return_warehouse_id">
- {{ warehouseName(OrderForm.return_warehouse_id) }}
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="配送地址:" prop="province_city_area_address">
- {{ OrderForm.province_city_area_address }}
- </el-form-item>
- </el-col>
- <!-- <el-col :span="10">
- <el-form-item label="允许负库存:">
- <el-radio-group v-model="OrderForm.subtract_stock" :disabled="type == 'pone'">
- <el-radio :label="false">禁止</el-radio>
- <el-radio :label="true">允许</el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col> -->
- <el-col :span="24">
- <div class="redClass">
- <el-form-item label="备注:" prop="remark">
- {{ OrderForm.remark }}
- </el-form-item>
- </div>
- </el-col>
- </el-row>
- <div style="margin-bottom: 10px">
- <h3>商品明细</h3>
- <div v-if="!isDetail">
- <el-button class="button" size="mini" type="primary" @click="handleSelectGoods">手动选择</el-button>
- <el-button class="button" size="mini" type="primary" @click="handleSelectGrou">选择分组商品</el-button>
- </div>
- </div>
- <div style="display: block">
- <el-table :data="OrderForm.product_list" border :cell-style="{ textAlign: 'center' }"
- @selection-change="handleSelectionChange" :header-cell-style="{ textAlign: 'center' }"
- style="width: 95%">
- <el-table-column type="selection" width="40" align="center" />
- <el-table-column label="图标">
- <template slot-scope="scope">
- <img :src="cleanUrl(scope.row.goods_vo.image_small_list)" alt="" width="50px">
- </template>
- </el-table-column>
- <el-table-column label="仓库名称">
- <template slot-scope="scope">
- {{ warehouseName(scope.row.warehouse_id) }}
- </template>
- </el-table-column>
- <el-table-column label="商品编号">
- <template slot-scope="scope">
- {{ scope.row.goods_vo.sn }}
- </template>
- </el-table-column>
- <el-table-column label="商品名称">
- <template slot-scope="scope">
- {{ scope.row.goods_vo.name }}
- </template>
- </el-table-column>
- <el-table-column label="sku">
- <template slot-scope="scope">
- <span v-if="!id"> {{ scope.row.product_vo.sku }}</span>
- <span v-else> {{ scope.row.product_vo.sku }}</span>
- </template>
- </el-table-column>
- <el-table-column label="序列号">
- <template slot-scope="scope">
- <span v-if="!id"> {{ scope.row.product_vo.sn_code }}</span>
- <span v-else> {{ scope.row.product_vo.sn_code }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="product_vo.spec_name" label="规格型号">
- <!-- <template slot-scope="scope">
- <span v-if="!id">{{ scope.row.product_vo.spec_name }}</span>
- <span v-else>{{ scope.row.product_vo.spec_name }}</span>
- </template> -->
- </el-table-column>
- <el-table-column label="单位">
- <template slot-scope="scope">
- <span v-if="!id"> {{ scope.row.product_vo.unit }}</span>
- <span v-else> {{ scope.row.product_vo.unit }}</span>
- </template>
- </el-table-column>
- <el-table-column label="订单数量">
- <template slot-scope="scope">
- {{ scope.row.num }}
- </template>
- </el-table-column>
- <el-table-column label="库存数量">
- <template slot-scope="scope">
- {{ scope.row.usable_stock }}
- </template>
- </el-table-column>
- <el-table-column label="售后数量">
- <template slot-scope="scope">
- {{ scope.row.return_num }}
- </template>
- </el-table-column>
- <el-table-column label="租赁天数" v-if="OrderForm.type == 'TO_C'">
- <template slot-scope="scope">
- {{ scope.row.day_num }}
- </template>
- </el-table-column>
- <!-- <el-table-column label="结束时间" width="200" v-if="OrderForm.type == 'TO_C'">
- <template slot-scope="scope">
- <el-date-picker style="width: 170px;" v-model="scope.row.end_time" type="datetime"
- placeholder="选择日期时间" :picker-options="pickerOptionsEnd"
- value-format="yyyy-MM-dd HH:mm:ss">
- </el-date-picker>
- </template>
- </el-table-column> -->
- <el-table-column label="操作" v-if="!isDetail && type !== 'pone'">
- <template slot-scope="scope">
- <el-button size="mini" type="danger"
- @click="OrderForm.product_list.splice(scope.$index, 1)">删除
- </el-button>
- </template>
- </el-table-column>
- </el-table>
- </div>
- <el-row style="margin-top: 15px;margin-bottom: 20px;">
- <el-col :span="8">
- <el-form-item label="应付金额:" prop="pay_price" :rules="rules.pay_price">
- <span>{{ "¥" + price }}</span>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="实付金额:" prop="real_price" :rules="rules.pay_price">
- {{ OrderForm.real_price }}
- <!-- <el-input v-model="OrderForm.real_price" placeholder="请输入"
- :disabled="type == 'pone'"></el-input> style="display: flex;justify-content: center;" -->
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="扫码支付:" prop="real_price" :rules="rules.pay_price">
- <div id="qrCode" ref="qrCodeDiv"></div>
- </el-form-item>
- </el-col>
- </el-row>
- <div class="footer">
- <el-button type="primary" @click="submit" v-if="!isDetail && type == 'pone'"
- :loading="formLoading">确认</el-button>
- <el-button type="primary" @click="submitOrderForm" v-if="!isDetail && type !== 'pone'"
- :loading="formLoading">保存</el-button>
- <el-button type="primary" @click="saveSubmitOrderForm" v-if="!isDetail && type !== 'pone'"
- :loading="formLoading">确认并保存</el-button>
- <el-button @click="printIng" :disabled="false" v-if="isDetail">打印</el-button>
- <el-button @click="roBack()" :disabled="false">返回</el-button>
- </div>
- </el-form>
- <el-dialog title="添加客户信息" :visible.sync="customer.dialogVisible" width="1100px" @open="handleDialogOpen"
- :modal-append-to-body="false" :close-on-click-modal="false" :close-on-press-escape="false">
- <el-form :model="customer.supplierForm" :rules="customer.supplierRules" ref="supplierForm"
- label-width="120px" inline>
- <el-form-item label="公司名称" prop="name">
- <el-input v-model="customer.supplierForm.name" :minlength="2" :maxlength="20" clearable
- placeholder="请输入公司名称"></el-input>
- </el-form-item>
- <el-form-item label="客户联系人" prop="contact ">
- <el-input v-model="customer.supplierForm.contact" :minlength="2" :maxlength="20" clearable
- placeholder="请输入客户联系人"></el-input>
- </el-form-item>
- <el-form-item label="性别" prop="gender">
- <el-radio v-model="customer.supplierForm.gender" label="男">男</el-radio>
- <el-radio v-model="customer.supplierForm.gender" label="女">女</el-radio>
- </el-form-item>
- <el-form-item label="手机号码" prop="mobile">
- <el-input v-model="customer.supplierForm.mobile" :minlength="2" :maxlength="20" clearable
- placeholder="请输入手机号码"></el-input>
- </el-form-item>
- <el-form-item label="邮件" prop="email">
- <el-input v-model="customer.supplierForm.email" :minlength="2" :maxlength="20" clearable
- placeholder="请输入电子邮件"></el-input>
- </el-form-item>
- <el-form-item label="客户类别" prop="type">
- <el-select v-model="customer.supplierForm.type" placeholder="请选择客户类别">
- <el-option v-for="item in customer.options" :key="item.value" :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </el-form-item>
- <!-- <el-form-item label="状态" prop="status">
- <el-input v-model="customer.supplierForm.status" :minlength="2" :maxlength="20" clearable
- placeholder="请输入客户状态"></el-input>
- </el-form-item> -->
- </el-form>
- <span slot="footer" class="dialog-footer">
- <el-button @click="customer.dialogVisible = false">取 消</el-button>
- <el-button type="primary" @click="submitSupplierForm">确 定</el-button>
- </span>
- </el-dialog>
- <el-dialog title="商品列表" :visible.sync="goodsVisible" width="1000px" @close="closeGoosData">
- <el-table ref="table" :data="goodsData.records" border style="width: 100%"
- @selection-change="handleSelChange">
- <el-table-column type="selection" width="55" />
- <el-table-column prop="name" label="分组名称"> </el-table-column>
- <el-table-column prop="remark" label="描述"> </el-table-column>
- </el-table>
- <el-pagination @size-change="handlePageSizeChange" @current-change="handlePageCurrentChange"
- :current-page="goodsData.page" :page-sizes="[10, 20, 50, 100]" :page-size="goodsData.size"
- layout="total, sizes, prev, pager, next, jumper" :total="goodsData.total"></el-pagination>
- <span slot="footer" class="dialog-footer">
- <el-button @click="closeGoosData">取 消</el-button>
- <el-button type="primary" @click="submitGoosData()">确 定</el-button>
- </span>
- </el-dialog>
- </div>
- </template>
- <script>
- import { mapGetters } from "vuex";
- import * as API_Order from "@/api/order";
- import * as API_BasicSetting from "@/api/basicSetting";
- import * as API_Member from "@/api/member";
- import * as API_Setting from "@/api/setting";
- import * as API_CollectingAccount from "@/api/collectingAccount";
- import * as API_productClass from "@/api/productClass.js"
- import { RegExp } from "~/ui-utils";
- import {
- provinceAndCityData,
- pcTextArr,
- regionData,
- pcaTextArr,
- codeToText,
- } from "element-china-area-data";
- import Print from "print-js";
- import html2canvas from "html2canvas";
- import QRCode from 'qrcodejs2'
- const initOrderForm = {
- product_list: [],
- payment_list: [],
- tax_price: 0,
- total_price: 0,
- discount_price: 0,
- pay_price: 0,
- deposit_price: 0,
- send_type: "express",
- subtract_stock: false,
- payment_status: "NOT_PAY",
- start_time: null,
- real_price: 0
- };
- export default {
- name: "orderAdd",
- data() {
- return {
- brcode: false,
- options: regionData,
- selectedOptions: [],
- warehouseList: [], // 仓库列表
- memberList: [], // 会员列表
- marketingList: [], // 销售经理列表
- storeList: [], // 门店列表
- collectingAccountList: [], // 支付方式列表
- fileList: [],
- deliveryTypeList: [
- {
- code: "express",
- name: "快递配送",
- },
- {
- code: "self_pick",
- name: "门店自提",
- },
- ],
- id: "",
- /** 订单表单*/
- OrderForm: {
- //省市区地址
- province_city_area: "",
- //详细信息
- address: "",
- real_price: '',
- province_city_area_address: "",
- subtract_stock: false,
- warehouse_id: [],
- return_warehouse_id: '',
- start_time: null,
- customer_name: "",
- customer_phone: '',
- },
- formLoading: false,
- isDetail: undefined,
- multipleSelection: [], // 勾选的商品
- batchUpdateNum: 0, // 批量设置的数量
- showUpdateNum: false, // 是否显示数量设置
- batchDiscountType: 0, // 批量设置的类型 0按比例 1按金额
- batchDiscountPrice: 0, // 批量设置的优惠比例或金额
- showDiscountPrice: false, // 是否显示优惠金额设置
- batchTaxRate: 0, // 批量设置的税率
- showTaxRate: false, // 是否显示税率设置
- rules: {
- customer_name: [this.MixinRequired("请输入客户名称", "blur")],
- type: [this.MixinRequired("请选择订单类型", "change")],
- pay_type: [this.MixinRequired("请选择付款方式", "change")],
- pay_price: [this.MixinRequired("请输入付款金额", "blur")],
- marketing_id: [this.MixinRequired("请选择销售人员", "change")],
- send_type: [this.MixinRequired("请选择配送方式", "change")],
- warehouse_id: [this.MixinRequired("请选择仓库", "change")],
- return_warehouse_id: [this.MixinRequired("请选择返回仓库", "change")],
- order_time: [this.MixinRequired("下单时间不能为空", "change")],
- payment_status: [this.MixinRequired("支付状态不能为空", "change")],
- payment_time: [this.MixinRequired("支付时间不能为空", "change")],
- real_price: [this.MixinRequired("请输入实付金额", "blur")],
- // delivery_type: [this.MixinRequired("请选择配送方式", "change")],
- product_list: {
- num: [
- this.MixinRequired("数量不能为空", "change"),
- {
- validator: (rule, value, callback) => {
- if (value && !RegExp.integer.test(value)) {
- callback(new Error("请输入正整数"));
- } else {
- callback();
- }
- },
- },
- ],
- tax_rate: [
- this.MixinRequired("税率不能为空", "change"),
- {
- validator: (rule, value, callback) => {
- if (value && !RegExp.money.test(value)) {
- callback(new Error("请输入正确的税率"));
- } else {
- callback();
- }
- },
- trigger: "blur",
- },
- ],
- price: [
- this.MixinRequired("单价不能为空", "change"),
- {
- validator: (rule, value, callback) => {
- if (value && !RegExp.money.test(value)) {
- callback(new Error("请输入正确的价格"));
- } else {
- callback();
- }
- },
- trigger: "blur",
- },
- ],
- discount_price: [
- this.MixinRequired("优惠金额不能为空", "change"),
- {
- validator: (rule, value, callback) => {
- if (value && !RegExp.money.test(value)) {
- callback(new Error("请输入正确的金额"));
- } else {
- callback();
- }
- },
- trigger: "blur",
- },
- ],
- },
- payment_list: {
- collecting_account_id: [
- this.MixinRequired("请选择支付方式", "change"),
- ],
- price: [
- this.MixinRequired("支付金额不能为空", "change"),
- {
- validator: (rule, value, callback) => {
- if (value && !RegExp.money.test(value)) {
- callback(new Error("请输入正确的金额"));
- } else {
- callback();
- }
- },
- trigger: "blur",
- },
- {
- validator: (rule, value, callback) => {
- if (value && value * 1 <= 0) {
- callback(new Error("支付金额必须大于0"));
- } else {
- callback();
- }
- },
- trigger: "blur",
- },
- ],
- },
- customer_phone: [
- this.MixinRequired("请输入手机号码!"),
- {
- validator: (rule, value, callback) => {
- if (!RegExp.mobile.test(value)) {
- callback(new Error("手机号码格式有误!"));
- } else {
- callback();
- }
- },
- trigger: ["change", "blur"],
- },
- ],
- },
- deptList: [],
- // 客户列表
- customerList: [],
- //
- orderTypeList: [],
- // 条形码
- barcodeValue: "",
- time: [],
- //新增客户
- customer: {
- dialogVisible: false,
- supplierRules: {
- custom_sn: [
- this.MixinRequired("请输入客户编号!"),
- { min: 2, max: 20, message: "长度在 2 到 20 个字符" },
- {
- validator: (rule, value, callback) => {
- if (value && !RegExp.userName.test(value)) {
- callback(
- new Error("只支持汉字、字母、数字、“-”、“_”的组合!")
- );
- } else {
- callback();
- }
- },
- },
- ],
- postal_address: [this.MixinRequired("请输入通讯地址!")],
- telephone: [
- this.MixinRequired("请输入联系电话!"),
- {
- validator: (rule, value, callback) => {
- if (!RegExp.mobile.test(value)) {
- callback(new Error("联系电话格式有误!"));
- } else {
- callback();
- }
- },
- trigger: ["change", "blur"],
- },
- ],
- name: [this.MixinRequired("请输入联系人!")],
- mobile: [
- this.MixinRequired("请输入手机号码!"),
- {
- validator: (rule, value, callback) => {
- if (!RegExp.mobile.test(value)) {
- callback(new Error("手机号码格式有误!"));
- } else {
- callback();
- }
- },
- trigger: ["change", "blur"],
- },
- ],
- gender: [
- { required: true, message: "请选择性别", trigger: "change" },
- ],
- type: [
- { required: true, message: "请选择客户类别", trigger: "change" },
- ],
- contact: [
- { required: true, message: "请输入客户联系人", trigger: "blur" },
- ],
- },
- supplierForm: {},
- options: [],
- },
- //折扣
- discount: '',
- pickerOptions: {
- disabledDate(v) {
- return v.getTime() < new Date().getTime() - 86400000;// - 86400000是否包括当天
- }
- },
- pickerOptionsEnd: {
- disabledDate(time) {
- // 禁用所有在 start_time 之前的时间
- return time.getTime() < new Date().getTime();
- }
- },
- type: '',
- goodsData: [],
- goodsVisible: false,
- goodsList: [],//暂存勾选的分类
- params: {
- pages: 1,
- size: 10
- },//商品分页
- orderType: '',//条形码查看类型
- payurl:"",
- };
- },
- computed: {
- ...mapGetters(["user"])
- },
- mounted() {
- this.payurl = window.location.href.split('#')[0]
- this.type = this.$route.params.type
- this.orderType = this.$route.params.type
- this.GET_WarehouseList();
- this.GET_MemberList();
- this.GET_MarketingList();
- this.GET_StoreList();
- this.GET_CollectingAccountList();
- // 获取客户列表
- this.GET_CustomerList();
-
- },
- methods: {
- // 二维码生成
- creatQrCode() {
- this.$nextTick(() => {
- this.$refs.qrCodeDiv.innerHTML = "";
- new QRCode(this.$refs.qrCodeDiv, {
- text: this.payurl + '#/payType?id=' + this.id + '&sn=' + this.barcodeValue + '&price=' + this.OrderForm.real_price,
- width: 200,
- height: 200,
- colorDark: "#333333", //二维码颜色
- colorLight: "#ffffff", //二维码背景色
- correctLevel: QRCode.CorrectLevel.L//容错率,L/M/H
- })
- }, 500);
- },
- cleanUrl(url) {
- // 检查URL是否以.png结尾
- if (url.endsWith('.png')) {
- // 找到.png后第一个下划线的位置
- const index = url.indexOf('.png') + 4;
- // 返回从开始到.png后的字符串
- return url.substring(0, index);
- }
- // 如果不是.png,可以选择去除最后一个下划线后的部分
- // 这部分根据实际情况调整,这里假设总是去除最后一个下划线后的内容
- const lastIndex = url.lastIndexOf('_');
- if (lastIndex !== -1) {
- return url.substring(0, lastIndex);
- }
- // 如果没有下划线,返回原URL
- return url;
- },
- //获取仓库名称
- warehouseNames(val) {
- let name = [];
- this.warehouseList.map((el) => {
- val.map((e) => {
- if (el.id == e) {
- return name.push(el.name)
- }
- });
- });
- return name.join('/');
- },
- //配送方式
- getSendType(value) {
- // Access orderTypeList directly from the component's data
- const type = this.deliveryTypeList.find(type => type.value === value);
- return type ? type.label : '未知类型';
- },
- //销售人员
- getMarketingName(value) {
- // Access orderTypeList directly from the component's data
- const type = this.marketingList.find(type => type.id === value);
- return type ? type.real_name : '未知类型';
- },
- //付款方式
- getPayType(value) {
- // Access orderTypeList directly from the component's data
- const type = this.collectingAccountList.find(type => type.id === value);
- return type ? type.name : '未知类型';
- },
- //下单客户
- getMemberName(value) {
- // Access orderTypeList directly from the component's data
- const type = this.customerList.find(type => type.id === value);
- return type ? type.name : '未知类型';
- },
- //订单类型
- getTypeName(value) {
- // Access orderTypeList directly from the component's data
- const type = this.orderTypeList.find(type => type.value === value);
- return type ? type.label : '未知类型';
- },
- selMember(val) {
- API_BasicSetting.getCustomer(val).then(res => {
- this.$set(this.OrderForm, 'customer_name', res.name);
- this.$set(this.OrderForm, 'customer_phone', res.mobile);
- })
- },
- //选择商品
- handleSelChange(val) {
- if (val.length > 1) {
- // 如果当前选中数量超过1,移除先前选中的,保留最后选中的
- const lastSelected = val[val.length - 1];
- this.$refs.table.clearSelection(); // 清除所有选中
- this.$refs.table.toggleRowSelection(lastSelected, true); // 重新选中最后一个
- }
- this.goodsList = val // 更新当前选中的行
- },
- // 保存已选商品
- submitGoosData() {
- if (this.goodsList.length >= 1) {
- API_productClass.getProductByGroup(this.OrderForm.warehouse_id, this.goodsList[0].id).then(res => {
- res.map(el => {
- this.OrderForm.product_list.push(el)
- })
- this.goodsVisible = false;
- })
- } else {
- this.$message.error("请选择商品信息");
- }
- },
- // 关闭商品明细
- closeGoosData() {
- this.goodsVisible = false;
- },
- handleBlur() {
- const value = this.discount;
- const regex = /^(10|([1-9](\.\d{0,1})?))$/;
- if (!regex.test(value)) {
- this.discount = ''; // 清空不符合条件的输入
- }
- },
- // 打印功能
- printIng() {
- const printContent = this.$refs.printId;
- // 获取dom 宽度 高度
- const width = printContent.clientWidth;
- const height = printContent.clientHeight;
- // 创建一个canvas节点
- const canvas = document.createElement("canvas");
- const scale = 1; // 定义任意放大倍数,支持小数;越大,图片清晰度越高,生成图片越慢。
- canvas.width = width * scale; // 定义canvas 宽度 * 缩放
- canvas.height = height * scale; // 定义canvas高度 *缩放
- canvas.style.width = width * scale + "px";
- canvas.style.height = height * scale + "px";
- canvas.getContext("2d").scale(scale, scale); // 获取context,设置scale
- const scrollTop =
- document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动轴滚动的长度
- const scrollLeft =
- document.documentElement.scrollLeft || document.body.scrollLeft; // 获取水平滚动轴的长度
- html2canvas(printContent, {
- canvas,
- backgroundColor: null,
- useCORS: true,
- windowHeight: document.body.scrollHeight,
- scrollX: -scrollLeft, // 解决水平偏移问题,防止打印的内容不全
- scrollY: -scrollTop,
- })
- .then((canvas) => {
- const url = canvas.toDataURL("image/png");
- printJS({
- printable: url,
- type: "image",
- documentTitle: "", // 标题
- style: "@page{size:auto;margin: 0cm 1cm 0cm 1cm;}", // 去除页眉页脚
- });
- })
- .catch((err) => {
- console.error(err);
- });
- },
- //获取仓库名称
- warehouseName(val) {
- let name = ''
- this.warehouseList.map(el => {
- if (el.id == val) {
- return name = el.name
- }
- })
- return name
- },
- /** dialog打开后重置form表单校验结果 */
- handleDialogOpen() {
- setTimeout(() => {
- this.$refs["supplierForm"].clearValidate();
- });
- this.customer.supplierForm = {};
- },
- submitSupplierForm() {
- this.$refs["supplierForm"].validate((valid) => {
- if (valid) {
- const { id } = this.customer.supplierForm;
- const params = this.MixinClone(this.customer.supplierForm);
- API_BasicSetting.addCustomer(params).then(() => {
- this.customer.dialogVisible = false;
- this.$message.success("添加成功!");
- this.GET_CustomerList();
- });
- } else {
- this.$message.error("表单填写有误,请核对!");
- return false;
- }
- });
- },
- // 添加客户
- addCust() {
- this.customer.dialogVisible = true;
- },
- handleChange(value) {
- this.OrderForm.province_city_area = value.join(",");
- //打印区域码所对应的属性值即中文地址
- },
- /** 初始化 */
- init() {
- const { id } = this.$route.params;
- if (id) {
- this.id = id;
- this.GET_OrderDetail();
- } else {
- this.OrderForm = this.MixinClone(initOrderForm);
- this.$set(this.OrderForm, "order_time", new Date().getTime());
- this.$nextTick(() => {
- this.$refs.orderFormRef.clearValidate();
- });
- }
- this.isDetail = this.$route.name === "orderDetail";
- },
- /** 清除已选商品明细 */
- cleanGoodsList() {
- // 切换仓库需要清除已选对应仓库下的商品数据
- this.$set(this.OrderForm, "product_list", []);
- },
- //获取客户列表
- GET_CustomerList() {
- API_BasicSetting.customer(this.params)
- .then((response) => {
- this.customerList = response.data;
- })
- .catch(() => { });
- API_Setting.getPage({ dictType: "order_type" }).then((res) => {
- this.orderTypeList = res.data;
- });
- API_Setting.getPage({ dictType: "order_send_type" }).then((res) => {
- this.deliveryTypeList = res.data;
- });
- },
- /** 获取会员列表 */
- GET_MemberList() {
- API_Member.getMemberList({
- page_no: 1,
- page_size: -1,
- disable_flag: false,
- }).then((response) => {
- this.memberList = response.data;
- });
- },
- /** 获取销售经理列表 */
- GET_MarketingList() {
- API_BasicSetting.getUserByDept().then((res) => {
- this.marketingList = res;
- });
- },
- /** 获取自提门店列表 */
- GET_StoreList() {
- API_BasicSetting.getBranches({
- page_no: 1,
- page_size: -1,
- }).then((response) => {
- this.storeList = response.data;
- });
- },
- /** 获取支付方式列表 */
- GET_CollectingAccountList() {
- API_CollectingAccount.getList({
- page_no: 1,
- page_size: -1,
- enable_flag: true,
- }).then((response) => {
- this.collectingAccountList = response.data;
- });
- },
- roBack() {
- const { callback } = this.$route.params;
- if (typeof callback === "function") callback();
- this.$store.dispatch("delCurrentViews", {
- view: this.$route,
- $router: this.$router,
- });
- this.$router.push({ name: "order" });
- },
- // 选择批次商品
- async handleSelectGoods() {
- if (!this.OrderForm.type) {
- this.$message.error("请选择订单类型!");
- return
- }
- if (this.OrderForm.warehouse_id.length == 0) {
- this.$message.error("请选择仓库!");
- return;
- }
- let warehouse_ids = this.OrderForm.warehouse_id.join(',')
- const goodsData = await this.$EnPickerGoods({
- goodsApi: `/admin/erp/warehouseOut/getGoodByWarehouse/warehouseIdAndOrderType/${this.OrderForm.type}/${warehouse_ids}`,
- selectedIds: this.OrderForm.product_list.map((item) => item.product_id),
- });
- goodsData.map(el => {
- el.end_time = ''
- })
- this.OrderForm.product_list = goodsData;
- },
- /** 分页大小发生改变 */
- handlePageSizeChange(size) {
- this.params.size = size;
- API_productClass.getProductList(this.params).then(res => {
- this.goodsData = res
- this.goodsVisible = true
- })
- },
- /** 分页页数发生改变 */
- handlePageCurrentChange(page) {
- this.params.page = page;
- API_productClass.getProductList(this.params).then(res => {
- this.goodsData = res
- this.goodsVisible = true
- })
- },
- /* 选择分组商品 */
- handleSelectGrou() {
- if (!this.OrderForm.type) {
- this.$message.error("请选择订单类型!");
- return
- }
- if (this.OrderForm.warehouse_id.length == 0) {
- this.$message.error("请选择仓库!");
- return;
- }
- this.params.order_choose_type = this.OrderForm.type
- API_productClass.getProductList(this.params).then(res => {
- this.goodsData = res
- this.goodsVisible = true
- })
- },
- /** 添加支付方式 */
- handleInsertPayment() {
- const defaultCollectingAccount = this.collectingAccountList.findLast(
- (item) => item.default_flag === true
- );
- },
- /** table单选框事件 */
- handleSelectionChange(val) {
- this.multipleSelection = val;
- },
- /** 显示数量设置 */
- handleShowUpdateNum() {
- if (this.multipleSelection.length === 0) {
- this.$message.error("请先勾选商品");
- return;
- }
- this.showUpdateNum = true;
- this.batchUpdateNum = 1;
- this.$nextTick(() => {
- this.$refs.batchSetNumRef.focus();
- });
- },
- /** 取消数量设置 */
- handleCancelUpdateNum() {
- this.showUpdateNum = false;
- },
- /** 确认设置数量 */
- handleConfirmUpdateNum() {
- this.showUpdateNum = false;
- for (let i = 0; i < this.multipleSelection.length; i++) {
- this.multipleSelection[i].num = this.batchUpdateNum;
- }
- },
- /** 显示优惠金额设置 */
- handleShowUpdateDiscountPrice() {
- if (this.multipleSelection.length === 0) {
- this.$message.error("请先勾选商品");
- return;
- }
- this.showDiscountPrice = true;
- this.batchDiscountPrice = 0;
- this.$nextTick(() => {
- this.$refs.batchSetDiscountRef.focus();
- });
- },
- /** 取消优惠金额设置 */
- handleCancelUpdateDiscountPrice() {
- this.showDiscountPrice = false;
- },
- /** 确认设置优惠金额 */
- handleConfirmUpdateDiscountPrice() {
- this.showDiscountPrice = false;
- for (let i = 0; i < this.multipleSelection.length; i++) {
- const item = this.multipleSelection[i];
- if (this.batchDiscountType === 0) {
- // 按比例
- item.discount_price =
- item.total_price * this.batchDiscountPrice * 0.01;
- } else {
- // 按金额
- item.discount_price = this.batchDiscountPrice;
- }
- }
- },
- /** 显示税率设置 */
- handleShowUpdateTaxRate() {
- if (this.multipleSelection.length === 0) {
- this.$message.error("请先勾选商品");
- return;
- }
- this.showTaxRate = true;
- this.batchTaxRate = 0;
- this.$nextTick(() => {
- this.$refs.batchSetTaxRateRef.focus();
- });
- },
- /** 取消税率设置 */
- handleCancelUpdateTaxRate() {
- this.showTaxRate = false;
- },
- /** 确认设置税率 */
- handleConfirmUpdateTaxRate() {
- this.showTaxRate = false;
- if (this.batchTaxRate != null) {
- for (let i = 0; i < this.multipleSelection.length; i++) {
- this.multipleSelection[i].tax_rate = this.batchTaxRate;
- }
- }
- },
- //保存订单
- async submitOrderForm() {
- // 校验商品明细数据
- const valid = await this.$refs.orderFormRef
- .validate()
- .catch((err) => err);
- if (valid !== true) {
- this.$message.error("表单数据输入有误,请检查!");
- return;
- }
- const { id } = this.OrderForm;
- var loc = "";
- for (let i = 0; i < this.selectedOptions.length; i++) {
- loc += codeToText[this.selectedOptions[i]] + ",";
- }
- this.OrderForm.province_city_area_address = loc + this.OrderForm.address;
- const params = this.MixinClone(this.OrderForm);
- params.pay_price = this.price;
- params.real_price = Number(params.real_price);
- params.item_list = params.product_list;
- params.order_time = Math.floor(params.order_time / 1000);
- params.payment_time = Math.floor(params.payment_time / 1000);
- this.formLoading = true;
- if (id) {
- API_Order.editOrder(id, params)
- .then((response) => {
- this.$message.success("修改成功!");
- this.backOrderList();
- })
- .finally(() => {
- this.formLoading = false;
- });
- } else {
- params.product_list = params.product_list.map((el) => {
- el.product_stock_id = el.id;
- el.id = "";
- return el;
- });
- API_Order.addOrder(params)
- .then(() => {
- this.$message.success("添加成功!");
- this.backOrderList();
- })
- .finally(() => {
- this.formLoading = false;
- });
- }
- },
- //确认并保存订单
- async saveSubmitOrderForm() {
- // 校验商品明细数据
- const valid = await this.$refs.orderFormRef
- .validate()
- .catch((err) => err);
- if (valid !== true) {
- this.$message.error("表单数据输入有误,请检查!");
- return;
- }
- const { id } = this.OrderForm;
- var loc = "";
- for (let i = 0; i < this.selectedOptions.length; i++) {
- loc += codeToText[this.selectedOptions[i]] + ",";
- }
- this.OrderForm.province_city_area_address = loc + this.OrderForm.address;
- const params = this.MixinClone(this.OrderForm);
- params.pay_price = this.price;
- params.real_price = Number(params.real_price);
- params.item_list = params.product_list;
- /* params.product_list.map((el) => {
- el.goods_id = el.id;
- el.id = "";
- });*/
- params.order_time = Math.floor(params.order_time / 1000);
- params.payment_time = Math.floor(params.payment_time / 1000);
- this.formLoading = true;
- if (id) {
- API_Order.editOrder(id, params)
- .then((response) => {
- this.$message.success("修改成功!");
- API_Order.submit(id).then((res) => {
- this.$message.success("订单已确认");
- this.backOrderList();
- });
- })
- .finally(() => {
- this.formLoading = false;
- });
- } else {
- params.product_list = params.product_list.map((el) => {
- el.product_stock_id = el.id;
- el.id = "";
- return el;
- });
- API_Order.addOrder(params)
- .then((res) => {
- this.$message.success("添加成功!");
- /**/ API_Order.submit(res).then((res) => {
- this.$message.success("订单已确认");
- this.backOrderList();
- });
- })
- .finally(() => {
- this.formLoading = false;
- });
- }
- },
- //延期确定
- async submit() {
- // 校验商品明细数据
- const valid = await this.$refs.orderFormRef
- .validate()
- .catch((err) => err);
- if (valid !== true) {
- this.$message.error("表单数据输入有误,请检查!");
- return;
- }
- const { id } = this.OrderForm;
- const params = this.MixinClone(this.OrderForm);
- params.item_list = params.product_list;
- this.formLoading = true;
- API_Order.extension(id, params)
- .then((response) => {
- this.$message.success("调整成功!");
- this.backOrderList();
- })
- .finally(() => {
- this.formLoading = false;
- });
- },
- /** 获取仓库 */
- GET_WarehouseList() {
- API_BasicSetting.getWarehouseListAll({}).then((response) => {
- this.warehouseList = response;
- });
- API_Setting.getPage({ dictType: "customer_type" }).then((res) => {
- this.customer.options = res.data;
- });
- },
- /** 审核 */
- async handleAudit(isPass, remark) {
- // 二次确认
- const text = isPass ? "审核通过" : "审核驳回";
- await this.$confirm(`确认要${text}吗?`, "提示");
- await API_Order.audit(
- this.id,
- isPass ? "WAIT_WAREHOUSE_OUT" : "AUDIT_REJECT",
- remark
- );
- this.$message.success("审核成功!");
- this.backOrderList();
- },
- /** 返回订单列表 */
- backOrderList() {
- const { callback } = this.$route.params;
- if (typeof callback === "function") callback();
- this.$store.dispatch("delCurrentViews", {
- view: this.$route,
- $router: this.$router,
- });
- this.$router.push({ name: "order" });
- },
- /** 获取订单详情 */
- GET_OrderDetail() {
- API_Order.getOrderDetail(this.id).then((response) => {
- /**/ this.price = response.pay_price;
- this.barcodeValue = response.sn
- response.product_list = response.item_list.map(el => {
- el.good_vo = el.goods_vo
- return el
- });
- this.selectedOptions = response.province_city_area.split(",");
- this.OrderForm = response;
- if (response.type == "TO_C") {
- this.time.push(response.start_time);
- this.time.push(response.end_time);
- }
- this.creatQrCode()
- });
- },
- },
- computed: {
- price: {
- get() {
- let total = 0;
- if (!this.OrderForm.product_list) return
- if (!this.id) {
- if (this.OrderForm.type == "TO_C") {
- /* var start = new Date(this.OrderForm.start_time); // 将起始日期字符串转换为Date对象
- this.OrderForm.product_list.map((item) => {
- var end = new Date(item.end_time); // 将结束日期字符串转换为Date对象
- var timeDiff = Math.abs(end.getTime() - start.getTime()); // 获取时间差(单位:毫秒)
- var monthDiff = Math.ceil(timeDiff / (24 * 60 * 60 * 1000)); // 根据每个月平均天数进行近似计算
- total += item.product_vo.day_price * item.num * monthDiff;
- }); */
- var start = new Date(this.time[1]); // 将起始日期字符串转换为Date对象
- var end = new Date(this.time[0]); // 将结束日期字符串转换为Date对象
- var timeDiff = Math.abs(end.getTime() - start.getTime()); // 获取时间差(单位:毫秒)
- var monthDiff = Math.ceil(timeDiff / (24 * 60 * 60 * 1000)); // 根据每个月平均天数进行近似计算
- this.OrderForm.product_list.map((item) => {
- total += item.product_vo.day_price * item.num * item.day_num;
- });
- return total;
- } else {
- this.OrderForm.product_list.map((item) => {
- total += item.product_vo.price * item.num;
- });
- return total;
- }
- } else {
- if (this.OrderForm.type == "TO_C") {
- var start = new Date(this.time[1]); // 将起始日期字符串转换为Date对象
- var end = new Date(this.time[0]); // 将结束日期字符串转换为Date对象
- var timeDiff = Math.abs(end.getTime() - start.getTime()); // 获取时间差(单位:毫秒)
- var monthDiff = Math.ceil(timeDiff / (24 * 60 * 60 * 1000)); // 根据每个月平均天数进行近似计算
- this.OrderForm.product_list.map((item) => {
- total += item.product_vo.day_price * item.num * item.day_num;
- });
- return total;
- } else {
- this.OrderForm.product_list.map((item) => {
- total += item.product_vo.price * item.num;
- });
- return total;
- }
- }
- },
- set(newValue) {
- this.OrderForm.real_price = newValue;
- }
- },
- },
- watch: {
- discount: {
- deep: true,
- handler(newVal) {
- this.OrderForm.real_price = this.price * newVal / 10;
- },
- },
- "OrderForm.product_list": {
- deep: true,
- handler(newVal) {
- newVal.forEach((item) => {
- });
- },
- },
- $route: {
- immediate: true,
- handler(newVal) {
- if (
- newVal.name === "orderAdd" ||
- newVal.name === "orderEdit" ||
- newVal.name === "orderDetail"
- ) {
- this.init();
- }
- },
- },
- "OrderForm.payment_status": {
- handler(newVal) {
- if (newVal === "PAY" && !this.OrderForm.payment_time) {
- this.OrderForm.payment_time = new Date().getTime();
- }
- },
- },
- },
- };
- </script>
- <style type="text/scss" lang="scss" scoped>
- /** 底部步骤 */
- .footer {
- width: 95%;
- padding: 10px;
- bottom: 0px;
- text-align: center;
- z-index: 999;
- }
- .mx {
- display: flex;
- align-items: center;
- .button {
- margin-left: 10px;
- }
- }
- .bg-in-stock {
- background-color: #fff;
- margin: 10px;
- padding: 25px;
- .numOrder {
- display: flex;
- justify-content: center;
- }
- }
- /deep/ {
- .el-input--suffix .el-input__inner {
- padding-right: 10px;
- }
- .error-input {
- .el-input__inner {
- border: 1px solid red;
- }
- }
- }
- /deep/ .el-form-item {
- // width: 350px;
- }
- /** 表格中输入框样式 */
- .tableFormItem {
- width: 100%;
- margin-bottom: 0;
- }
- /** 输入框错误提示样式 */
- /deep/ .el-form-item__error {
- // position: relative;
- }
- /** date-picker宽度和其他输入框保持一致 */
- /deep/ .el-date-editor {
- .el-input__inner {
- padding-inline-start: 15px;
- }
- .el-input__prefix {
- display: none;
- }
- }
- .redClass /deep/ .el-form-item__content {
- //color: red !important;
- font-weight: 700;
- width: 500px !important;
- }
- /deep/ .el-form-item {
- width: 100%;
- height: auto;
- .el-input {
- width: 200px;
- }
- }
- </style>
|