|
@@ -0,0 +1,320 @@
|
|
|
+<template>
|
|
|
+ <div class="s-page">
|
|
|
+ <el-page-header @back="goBack" :content="title"></el-page-header>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>单据信息</span>
|
|
|
+ </div>
|
|
|
+ <div class="mymain-container">
|
|
|
+ <el-form ref="formData" :rules="rules" :model="formData" label-width="110px" size="small" label-position="left">
|
|
|
+ <el-row :gutter="20" justify="start">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="所属商户" :required="true" >
|
|
|
+ <el-input type="text" :value="companyName" disabled></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="网点名称" prop="websitId" :required="true">
|
|
|
+ <el-select v-model="formData.websitId" @change="changeWebsit" placeholder="请选择" style="width: 100%;">
|
|
|
+ <el-option
|
|
|
+ v-for="item in websitList"
|
|
|
+ :key="item.websitId"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.websitId">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="师傅姓名" prop="worker" :required="true">
|
|
|
+ <el-select v-model="formData.worker" @focus="()=>{
|
|
|
+ if(!this.formData.websitId){return this.$message.warning('请先选择网点名称!');}
|
|
|
+ }" filterable @change="changeWorker" @blur="workerBlur" placeholder="请选择" style="width: 100%;">
|
|
|
+ <el-option
|
|
|
+ v-for="item in workerList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.nickName"
|
|
|
+ :value="item.nickName">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="师傅身份证" prop="idcard" :required="true">
|
|
|
+ <el-input type="text" v-model="formData.idcard" placeholder="请输入"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="师傅联系电话" prop="phone" :required="true">
|
|
|
+ <el-input type="text" v-model="formData.phone" placeholder="请输入"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="订单来源" prop="source" :required="true">
|
|
|
+ <el-select v-model="formData.source" placeholder="请选择" style="width: 100%;">
|
|
|
+ <el-option
|
|
|
+ v-for="item in [{name: '在线订单',id: 'ONLINE'},{name: '自建订单',id: 'SELF'}]"
|
|
|
+ :key="item.workerId"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.workerId">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="9">
|
|
|
+ <el-form-item label="支付方式" prop="payType" :required="true">
|
|
|
+ <el-select v-model="formData.payType" placeholder="请选择" style="width: 100%;">
|
|
|
+ <el-option
|
|
|
+ v-for="item in [{name: '现金',id: 'CASH'},{name: '微信',id: 'WECHAT'}]"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" v-if="formData.payType == 'WECHAT'">
|
|
|
+ <div style="height: 32px;display: flex;align-items: center;cursor: pointer;">微信支付<i class="el-icon-full-screen"></i></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="备注">
|
|
|
+ <el-input type="textarea" :rows="4" v-model="formData.remark" placeholder="请输入"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>辅材信息</span>
|
|
|
+ </div>
|
|
|
+ <el-button size="small" type="primary" @click="add()">添加</el-button>
|
|
|
+ <div class="table">
|
|
|
+ <el-table :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
|
|
|
+ <el-table-column label="大类名称" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-select v-model="scope.row.productCategory" value-key="categoryId" @change="changeMain" :disabled="isEdit != scope.$index" placeholder="请选择" style="width: 100%;">
|
|
|
+ <el-option
|
|
|
+ v-for="item in mainList"
|
|
|
+ :key="item.categoryId"
|
|
|
+ :label="item.categoryName"
|
|
|
+ :value="item">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="小类名称" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-select v-model="scope.row.goodsCategory" @change="changeSmall" @focus="()=>{
|
|
|
+ if(!scope.row.productCategory){return this.$message.warning('请先选择大类!');}
|
|
|
+ }" :disabled="isEdit != scope.$index" value-key="categoryId" placeholder="请选择" style="width: 100%;">
|
|
|
+ <el-option
|
|
|
+ v-for="item in smallList"
|
|
|
+ :key="item.categoryId"
|
|
|
+ :label="item.categoryName"
|
|
|
+ :value="item">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="辅材名称" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-select v-model="scope.row.goodsId" :disabled="isEdit != scope.$index" placeholder="请选择" style="width: 100%;">
|
|
|
+ <el-option
|
|
|
+ v-for="item in materialsList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="goodsSalesUnit" align="center" label="单位" ></el-table-column>
|
|
|
+ <el-table-column prop="" align="center" label="数量" >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input type="number" v-model="scope.row.salesQty" :disabled="isEdit != scope.$index" placeholder="请输入"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="" align="center" label="商品代码"></el-table-column>
|
|
|
+ <el-table-column prop="" align="center" label="规格型号"></el-table-column>
|
|
|
+ <el-table-column prop="" align="center" label="销售价格"></el-table-column>
|
|
|
+ <el-table-column prop="" align="center" label="销售金额"></el-table-column>
|
|
|
+ <el-table-column prop="" align="center" label="库存数量"></el-table-column>
|
|
|
+ <el-table-column label="操作" align="right" width="140">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="mini" type="primary" v-if="scope.$index != isEdit" @click="isEdit = scope.$index">编辑</el-button>
|
|
|
+ <el-button size="mini" type="danger" @click="dataList.splice(scope.$index,1)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <div class="page-footer">
|
|
|
+ <div class="footer">
|
|
|
+ <el-button v-if="true" size="small" type="primary" @click="confirm()">提交</el-button>
|
|
|
+ <el-button v-if="true" size="small" type="danger">确认收货</el-button>
|
|
|
+ <el-button size="small" type="info" @click="goBack">返回</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { getWebsit } from "@/api/customerManagement";
|
|
|
+ import { getWorker, getCategory, getGoods } from "@/api/auxiliaryFittings/auxiliarySalesOrder";
|
|
|
+ export default {
|
|
|
+ props: ['id','title'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataList: [],
|
|
|
+ websitList: [],
|
|
|
+ workerList: [],
|
|
|
+ mainList: [],
|
|
|
+ smallList: [],
|
|
|
+ materialsList: [],
|
|
|
+ formData: {
|
|
|
+ websitId: '',
|
|
|
+ worker: '',
|
|
|
+ idcard: '',
|
|
|
+ phone: '',
|
|
|
+ source: ''
|
|
|
+ },
|
|
|
+ productCategory: {},
|
|
|
+ goodsCategory: {},
|
|
|
+ isEdit: 0,
|
|
|
+ companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
|
|
|
+ rules: {
|
|
|
+ websitId: [
|
|
|
+ { required: true, message: '请选择网点', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ worker: [
|
|
|
+ { required: true, message: '请选择师傅', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ source: [
|
|
|
+ { required: true, message: '请选择订单来源', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ payType: [
|
|
|
+ { required: true, message: '请选择订单来源', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ idcard: [
|
|
|
+ { required: true, message: '请输入师傅身份证', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ phone: [
|
|
|
+ { required: true, message: '请输入师傅联系电话', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ created() {
|
|
|
+ this.getWebsit()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 返回
|
|
|
+ goBack() {
|
|
|
+ this.$emit('back');
|
|
|
+ },
|
|
|
+ getWebsit(){
|
|
|
+ getWebsit().then(res => {
|
|
|
+ this.websitList = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changeWebsit(websitId){
|
|
|
+ this.getWorker()
|
|
|
+ getCategory({websitId}).then(res => {
|
|
|
+ this.mainList = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getWorker(name){
|
|
|
+ const that = this
|
|
|
+ getWorker({pageNum: 1,pageSize: -1,params: [{param: 'a.nick_name',compare: '=',value: name},{param: 'b.websit_id',compare: '=',value: this.formData.websitId}]}).then(res => {
|
|
|
+ if(name){
|
|
|
+ that.formData.idcard = res.data.records[0].idCard
|
|
|
+ that.formData.phone = res.data.records[0].mobile
|
|
|
+ }else{
|
|
|
+ this.workerList = res.data.records
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changeWorker(e){
|
|
|
+ this.getWorker(e)
|
|
|
+ },
|
|
|
+ workerBlur(e){
|
|
|
+ this.formData.worker = e.target.value
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ changeMain(e){
|
|
|
+ this.dataList[this.isEdit].goodsCategoryId = ''
|
|
|
+ this.dataList[this.isEdit].goodsCategoryName = ''
|
|
|
+ this.dataList[this.isEdit].goodsCategory = {}
|
|
|
+ this.dataList[this.isEdit].parentCategoryId = e.categoryId
|
|
|
+ this.dataList[this.isEdit].parentCategoryName = e.categoryName
|
|
|
+ this.smallList = e.items
|
|
|
+ },
|
|
|
+ changeSmall(e){
|
|
|
+ this.dataList[this.isEdit].goodsCategoryId = e.categoryId
|
|
|
+ this.dataList[this.isEdit].goodsCategoryName = e.categoryName
|
|
|
+ getGoods({websitId: this.formData.websitId,categoryId: e.categoryId,type: 'M',goodsName: e.categoryName}).then(res => {
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ add(){
|
|
|
+ this.dataList.push({
|
|
|
+ productCategory: {},
|
|
|
+ parentCategoryId: '',
|
|
|
+ parentCategoryName: '',
|
|
|
+ goodsCategory: {},
|
|
|
+ goodsCategoryName: '',
|
|
|
+ goodsCategoryId: '',
|
|
|
+ goodsSalesUnit: '',
|
|
|
+ salesQty: '',
|
|
|
+ goodsId: '',
|
|
|
+ goodsSpecification: '',
|
|
|
+ saleAmount: ''
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped="scoped" lang="scss">
|
|
|
+ .s-page {
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+ .page-footer {
|
|
|
+ height: 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ padding: 15px 40px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ transition: all 0.28s;
|
|
|
+ text-align: right;
|
|
|
+ box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%), 0 2px 5px 0 rgb(0 0 0 / 10%);
|
|
|
+
|
|
|
+ &.hideSidebar {
|
|
|
+ margin-left: 54px;
|
|
|
+ width: calc(100vw - 54px);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.openSidebar {
|
|
|
+ margin-left: 210px;
|
|
|
+ width: calc(100vw - 210px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ font-size: 12px;
|
|
|
+ color: red;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|