123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637 |
- <template>
- <div class="app-container">
- <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="margin-bottom:40px">
- <div class="bj-divider">
- <div class="left">
- <span class="default-text">三方订单基本信息</span>
- <div class="button"></div>
- <span class="tips"></span>
- </div>
- </div>
- <el-row>
- <el-col :span="9">
- <el-form-item label-width="100px" label="三方订单号" prop="outerOrderNo" style="margin-right:20px">
- <el-input v-model="form.outerOrderNo" placeholder="请输入三方订单号" />
- </el-form-item>
- </el-col>
- <el-col :span="9">
- <el-form-item label-width="140px" label="三方订单下单时间" prop="orderTime" >
- <el-date-picker clearable size="small" style="width:100%"
- v-model="form.orderTime"
- type="date"
- value-format="yyyy-MM-dd"
- placeholder="请选择">
- </el-date-picker>
- </el-form-item>
- </el-col>
- <el-col :span="9">
- <el-form-item label-width="100px" label="销售渠道" prop="channelType" style="margin-right:20px">
- <el-select style="width:100%" @change="channelChange" v-model="form.channelType" :placeholder="storePlaceholder" clearable size="small">
- <el-option
- v-for="item in channelTypeOptions"
- :key="'channelType'+item.dictValue"
- :label="item.dictLabel"
- :value="item.dictValue"/>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="9">
- <el-form-item label-width="140px" label="选择销售店铺" prop="storeId">
- <el-select style="width:100%" :disabled="storeAvailable" ref="storeId" v-model="form.storeId" placeholder="请选择销售店铺" clearable size="small">
- <el-option
- v-for="item in stores"
- :key="'omsStore'+item.storeId"
- :label="item.storeName"
- :value="item.storeId"/>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="18">
- <el-form-item label-width="100px" label="商家备注" prop="channelType">
- <el-input type="textarea" v-model="form.orderRemark" show-word-limit maxlength="200"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <div class="bj-divider"><div class="left"><span class="default-text">买家以及收货信息</span><div class="button"></div><span class="tips"></span></div></div>
- <el-row>
- <el-col :span="9">
- <el-form-item label-width="100px" label="买家昵称" prop="buyerNick" style="margin-right:20px">
- <el-input v-model="form.outerOrderNo" placeholder="请输入买家昵称" />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="9">
- <el-form-item label-width="100px" label="收货人" prop="logisticsUserName" style="margin-right:20px">
- <el-input v-model="form.logisticsUserName" placeholder="请输入" />
- </el-form-item>
- </el-col>
- <el-col :span="9">
- <el-form-item label-width="100px" label="收货人手机" prop="logisticsUserPhone">
- <el-input v-model="form.logisticsUserPhone" placeholder="请输入" />
- </el-form-item>
- </el-col>
- <el-col :span="9">
- <el-form-item label-width="95px" label="所属省市区" prop="cityIds">
- <el-cascader style="width:100%"
- ref="citySelect"
- v-model="cityIds"
- :options="citys"
- @change="handleCityChange"></el-cascader>
- </el-form-item>
- </el-col>
- <el-col :span="9">
- <el-form-item label-width="10px" prop="cityIds">
- <el-input v-model="form.userAddress" placeholder="详情地址" />
- </el-form-item>
- </el-col>
- <el-col :span="18">
- <el-form-item label-width="100px" label="买家备注" prop="buyerRemark" >
- <el-input type="textarea" v-model="form.buyerRemark" show-word-limit maxlength="200"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <div class="bj-divider"><div class="left"><span class="default-text">支付信息</span><div class="button"></div><span class="tips"></span></div></div>
- <el-row>
- <el-col :span="8">
- <el-form-item label="支付方式" prop="payType">
- <el-select style="width:100%" v-model="form.payType" placeholder="请选择支付方式" clearable size="small">
- <el-option
- v-for="item in payTypeOptions"
- :key="'payType'+item.dictValue"
- :label="item.dictLabel"
- :value="item.dictValue"/>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label-width="100px" label="支付金额" prop="buyerPayAmount" style="margin-right:20px">
- <el-input v-model="form.buyerPayAmount" type="number" placeholder="请输入" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label-width="140px" label="支付金额是否含运费" prop="shippingType">
- <el-radio-group v-model="form.shippingType">
- <el-radio :key="'shippingType'+item.dictValue" :label="item.dictValue" v-for="item in shippingTypeOptions" >{{item.dictLabel}}</el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="8">
- <el-form-item label="支付状态" prop="payStatus">
- <el-select style="width:100%" v-model="form.payStatus" placeholder="请选择" clearable size="small">
- <el-option
- v-for="item in payStatusOptions"
- :key="'payStatus'+item.dictValue"
- :label="item.dictLabel"
- :value="item.dictValue"/>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label-width="100px" label="支付时间" prop="payTime" style="margin-right:20px">
- <el-date-picker clearable size="small" style="width:100%"
- v-model="form.payTime"
- type="date"
- value-format="yyyy-MM-dd"
- placeholder="请选择">
- </el-date-picker>
- </el-form-item>
- </el-col>
- </el-row>
- <div class="bj-divider"><div class="left"><span class="default-text">优惠信息</span><div class="button"></div><span class="tips"></span></div></div>
- <el-row>
- <el-col :span="9">
- <el-form-item label-width="100px" label="三方平台优惠" prop="isThirdDiscount" style="margin-right:10px">
- <el-radio-group v-model="form.isThirdDiscount">
- <el-radio :key="'isThirdDiscount'+item.dictValue" :label="item.dictValue" v-for="item in isThirdDiscountOptions" >{{item.dictLabel}}</el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col>
- <el-col :span="9" v-if="form.isThirdDiscount!='0'">
- <el-form-item label-width="10" label="" prop="thirdDiscount">
- <el-input v-model="form.thirdDiscount" placeholder="三方平台优惠金额" />
- </el-form-item>
- </el-col>
- <el-col :span="9" v-if="form.isThirdDiscount!='0'">
- <el-form-item label-width="100px" label="优惠承担" prop="thirdDiscountAmount" style="margin-right:10px">
- <el-input v-model="form.thirdDiscountAmount" placeholder="三方平台承担优惠金额" />
- </el-form-item>
- </el-col>
- <el-col :span="9" v-if="form.isThirdDiscount!='0'">
- <el-form-item label-width="10" label="" prop="businessDiscountAmount">
- <el-input v-model="form.businessDiscountAmount" placeholder="商家承担优惠金额" />
- </el-form-item>
- </el-col>
- </el-row>
- <div class="bj-divider" style="margin-bottom:10px">
- <div class="left"><span class="default-text">商品信息</span>
- <el-button plain type="primary" size="mini" @click="handleAddProduct">添加商品</el-button>
- <span class="tips"></span>
- </div>
- </div>
- <el-row>
- <el-col :span="24">
- <el-form-item label="" label-width="0" prop="productList" style="margin-left:0" >
- <el-table border width="100%" style="margin-top:5px;" :data="products">
- <el-table-column label="商品编号" align="center" prop="barCode" />
- <el-table-column label="商品图片" align="center" width="100">
- <template slot-scope="scope">
- <el-popover
- placement="right"
- title=""
- trigger="hover">
- <img slot="reference" :src="scope.row.image" width="50">
- <img :src="scope.row.image" style="max-width: 50px;">
- </el-popover>
- </template>
- </el-table-column>
- <el-table-column label="商品名称" show-overflow-tooltip align="center" prop="productName" />
- <el-table-column label="商品规格" align="center" prop="sku" />
- <!-- <el-table-column label="库存" align="center" prop="stock" /> -->
- <el-table-column label="售价" align="center" prop="price" >
- <template slot-scope="scope">
- <div v-if="scope.row.price!=null">
- {{scope.row.price.toFixed(2)}}
- </div>
- </template>
- </el-table-column>
- <!-- <el-table-column label="代理价" align="center" prop="agentPrice" /> -->
- <el-table-column label="数量" align="center" prop="count" width="200px" >
- <template slot-scope="scope">
- <div>
- <el-input-number v-model="scope.row.count" @change="handleProductCountChange(scope.row)" size="mini" :min="1" :max="scope.row.stock" ></el-input-number>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="小计" align="center" prop="money" >
- <template slot-scope="scope">
- <div v-if="scope.row.money!=null">
- {{scope.row.money.toFixed(2)}}
- </div>
- </template>
- </el-table-column>
- <el-table-column label="操作" align="center" width="100px" >
- <template slot-scope="scope">
- <el-button
- size="mini"
- type="text"
- icon="el-icon-delete"
- @click="handleProductDelete(scope.row)"
- >删除</el-button>
- </template>
- </el-table-column>
- </el-table>
- <!-- <el-row >
- <el-col >
- <span style="margin-left:10px;" v-if="totalMoney!=null">商品总价:{{totalMoney}}</span>
- </el-col>
- </el-row> -->
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <div slot="footer" class="dialog-footer">
- <el-button type="primary" @click="submitForm">确 定</el-button>
- <el-button @click="cancel">取 消</el-button>
- </div>
- </div>
- </template>
- <script>
- import { listOrder, getOrder, delOrder, addOrder, updateOrder, exportOrder } from "@/api/oms/orderInternal";
- import { listStore } from "@/api/oms/store";
- import { getCitys } from "@/api/store/city";
- export default {
- name: "Store",
- data() {
- return {
- // 遮罩层
- loading: true,
- // 弹出层标题
- title: "",
- // 是否显示弹出层
- open: false,
- // 表单参数
- form: { },
- // 表单校验
- rules: {
- outerOrderNo: [
- { required: true, message: "请输入三方订单号", trigger: "blur" }
- ],
- orderTime: [
- { required: true, message: "请选择三方下单时间", trigger: "blur" }
- ],
- channelType: [
- { required: true, message: "请选择销售渠道", trigger: "blur" }
- ],
- storeId: [
- { required: true, message: "请选择销售店铺", trigger: "blur" }
- ],
- buyerNick: [
- { required: true, message: "请输入买家昵称", trigger: "blur" }
- ],
- logisticsUserName: [
- { required: true, message: "请输入收货人", trigger: "blur" }
- ],
- logisticsUserPhone: [
- { required: true, message: "请输入收货人手机号", trigger: "blur" }
- ],
- cityIds: [
- { required: true, message: "请选择收货地址", trigger: "blur" }
- ],
- payType: [
- { required: true, message: "请选择支付方式", trigger: "blur" }
- ],
- payStatus: [
- { required: true, message: "请选择支付状态", trigger: "blur" }
- ],
- buyerPayAmount: [
- { required: true, message: "请输入支付金额", trigger: "blur" }
- ],
- payTime: [
- { required: true, message: "请选择支付时间", trigger: "blur" }
- ],
- },
- channelTypeOptions:[],
- stores:[],
- payTypeOptions:[],
- shippingTypeOptions:[],
- payStatusOptions:[],
- isThirdDiscountOptions:[],
- cityIds:[],
- citys:[],
- storeAvailable:true,
- storePlaceholder:"请先选择销售渠道",
- isFreeShipping:false,
- products:[],
- product:{
- open:false,
- title:"商品选择"
- },
- };
- },
- created() {
- this.getDicts("oms_channel_type").then((response) => {
- this.channelTypeOptions = response.data;
- });
- this.getDicts("oms_pay_type").then((response) => {
- this.payTypeOptions = response.data;
- });
- this.getDicts("oms_shipping_type").then((response) => {
- this.shippingTypeOptions = response.data;
- });
- this.getDicts("oms_pay_status").then((response) => {
- this.payStatusOptions = response.data;
- });
- this.getDicts("oms_is_third_discount").then((response) => {
- this.isThirdDiscountOptions = response.data;
- });
- this.getCitys();
- this.reset();
- },
- methods: {
- // 取消按钮
- cancel() {
- this.open = false;
- this.reset();
- },
- // 表单重置
- // 表单重置
- reset() {
- this.form = {
- id: null,
- storeId: null,
- outerOrderNo: null,
- innerOrderNo: null,
- preemptCode: null,
- orderType: null,
- orderSource: null,
- innerOrderSource: null,
- orderStatus: 0,
- refundStatus: 0,
- payType: null,
- payStatus: "0",
- auditType: null,
- auditStatus: 0,
- orderStage: null,
- isGift: null,
- isThirdDiscount:"0",
- goodsNum: null,
- skuNum: null,
- thirdDiscountAmount: null,
- businessDiscountAmount: null,
- totalDiscount: null,
- totalAmount: null,
- amountReceivable: null,
- buyerPayAmount: null,
- buyerRealPrice: null,
- shippingType: "0",
- costAmount: null,
- postage: null,
- tags: null,
- buyerNick: null,
- buyerRemark: null,
- orderRemark: null,
- serviceRemark: null,
- payNo: null,
- orderTime: null,
- payTime: null,
- userAddress:null,
- cityIds:[],
- citys:[],
- };
- this.cityIds=[];
- this.resetForm("form");
- },
- /** 修改按钮操作 */
- handleUpdate(row) {
- this.reset();
- const storeId = row.storeId || this.ids
- getStore(storeId).then(response => {
- this.form = response.data;
- this.form.channelWarehouseName=row.channelWarehouseName;
- if(this.form.channelType!=null){
- this.form.channelType = this.form.channelType.toString();
- }
- if(this.form.storeType!=null){
- this.form.storeType = this.form.storeType.toString();
- }
- if(this.form.status!=null){
- this.form.status = this.form.status.toString();
- }
- this.open = true;
- this.title = "修改网店";
- });
- },
- /** 提交按钮 */
- submitForm() {
- this.$refs["form"].validate(valid => {
- if (valid) {
- if (this.form.storeId != null) {
- updateStore(this.form).then(response => {
- if (response.code === 200) {
- this.msgSuccess("修改成功");
- this.open = false;
- this.getList();
- }
- });
- } else {
- addStore(this.form).then(response => {
- if (response.code === 200) {
- this.msgSuccess("新增成功");
- this.open = false;
- this.getList();
- }
- });
- }
- }
- });
- },
- /** 删除按钮操作 */
- handleDelete(row) {
- const storeIds = row.storeId || this.ids;
- this.$confirm('是否确认删除网店编号为"' + storeIds + '"的数据项?', "警告", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- }).then(function() {
- return delStore(storeIds);
- }).then(() => {
- this.getList();
- this.msgSuccess("删除成功");
- }).catch(function() {});
- },
- /** 导出按钮操作 */
- handleExport() {
- const queryParams = this.queryParams;
- this.$confirm('是否确认导出所有网店数据项?', "警告", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- }).then(function() {
- return exportStore(queryParams);
- }).then(response => {
- this.download(response.msg);
- }).catch(function() {});
- },
- getChanelType(type){
- var chanelTypeName="";
- const chanelType = this.channelTypeOptions.filter((obj) => {
- return obj[dictValue] === type
- });
- if(chanelType!=null){
- chanelTypeName=chanelType.dictLable;
- }
- return chanelTypeName;
- },
- channelChange(e){
- var item=this.channelTypeOptions.find(val => val.dictValue === e);
- var channelType=item.dictValue;
- this.form.channelType=channelType;
- listStore({"channelType":channelType}).then(response => {
- this.stores = response.rows;
- });
- this.storeAvailable=false;
- this.storePlaceholder="请选择";
- },
- handleCityChange(value) {
- console.log(value);
- var nodes=this.$refs.citySelect.getCheckedNodes();
- this.form.cityIds=nodes[0].pathLabels[0]+"-"+nodes[0].pathLabels[1]+"-"+nodes[0].pathLabels[2];
- this.form.cityIdsStr=value.toString();
- console.log(this.form.cityIdsStr);
- },
- getCitys(){
- getCitys().then(res => {
- this.loading = false;
- this.citys=res.data;
- });
- },
- handleProductCountChange(row){
- row.money=row.count*row.price;
- this.$forceUpdate();
- this.compute();
- },
- handleProductDelete(row){
- this.products.splice(this.products.findIndex(item => item.id === row.id), 1)
- this.compute();
- },
- compute(){
- this.totalMoney=0;
- var that=this;
- this.products.forEach (function (value) {
- that.totalMoney += value.money;
- });
- that.totalMoney=that.totalMoney.toFixed(2);
- },
- selectProduct(row){
- console.log(row);
- for(var i=0;i<this.products.length;i++){
- if(this.products[i].id==row.id){
- return;
- }
- }
- row.count=1;
- row.money=row.count*row.price;
- this.products.push(row);
- this.compute();
- },
- handleAddProduct(){
- this.product.open=true;
- // setTimeout(() => {
- // this.$refs.product.getData(1);
- // }, 200);
- },
- }
- };
- </script>
- <style lang="scss" scoped>
- .app-main{
- background: #ffffff;
- }
- .app-container{
- margin: 0;
- }
- .bj-divider {
- padding: 10px 0;
- border-bottom: 1px solid #eee;
- margin-bottom: 16px;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- width: 100%
- }
- .bj-divider.small {
- font-size: 14px;
- padding: 8px 0;
- margin-bottom: 8px
- }
- .bj-divider.noPadding {
- padding: 0
- }
- .bj-divider .left {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center
- }
- .bj-divider .button {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex
- }
- .bj-divider .default-text {
- border-left: 4px #409eff solid;
- padding-left: 16px;
- font-size: 18px
- }
- .bj-divider.small .default-text {
- font-size: 14px
- }
- .bj-divider .xs {
- font-size: 12px;
- padding: 0 8px
- }
- .bj-divider .tips {
- line-height: 20px;
- margin-left: 16px
- }
- .bj-divider .right {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center
- }
- .bj-divider .el-button {
- margin-left: 16px
- }
- .bj-divider .fixed {
- position: fixed;
- top: 55px;
- z-index: 9;
- right: 20px
- }
- .bj-divider .right .el-form-item--small.el-form-item {
- margin-bottom: 0
- }
- .dialog-footer{
- text-align: right;
- position: fixed;
- right: 0px;
- bottom: 0px;
- width: 90%;
- margin-right: 0px;
- padding:10px 20px;
- z-index: 9;
- background: #ffffff;
- height: 65px;
- }
- </style>
|