zfire-newmall-admin/src/views/auxiliaryFittings/salesManagement/components/auxiliarySalesOrderDetail.vue

<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>