zfire-newmall-admin/src/views/engineeringMaintenance/basicData/detail.vue

<template>
	<div class="s-page">
		<el-page-header @back="goBack" :content="title"></el-page-header>
		<el-divider></el-divider>
		<div slot="moreSearch" v-if="formType != 0">
		  <el-radio-group v-model="tabIndex" size="small" @change="">
		  	<el-radio-button :label="1">基础资料</el-radio-button>
		  	<el-radio-button :label="2">修改记录</el-radio-button>
		  </el-radio-group>
		  <br><br>
		</div>
		<template v-if="tabIndex == 1">
			<el-card class="box-card">
				<div style="margin-bottom: 20px;font-weight: bold;">项目信息</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="projectName">
									<el-input type="text" v-model="formData.projectName" :disabled="formType==2" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="负责人" prop="manger">
									<el-input type="text" v-model="formData.manger" :disabled="formType==2" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="联系电话" prop="mobile">
									<el-input type="number" v-model="formData.mobile" :disabled="formType==2" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="维保时间" prop="dateList">
									<el-date-picker
									 :disabled="formType==2"
									  v-model="formData.dateList"
									  @change="selectDate"
									  value-format="yyyy-MM-dd"
									  type="daterange"
									  range-separator="至"
									  start-placeholder="开始日期"
									  end-placeholder="结束日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="工单类型" prop="orderSmallTypeText">
									<el-checkbox-group v-model="formData.checkTypeList">
									    <el-checkbox v-for="(item,index) in orderTypeList" :disabled="formType==2" :key="index" :label="item.id">{{item.orderSmallTypeText}}</el-checkbox>
									</el-checkbox-group>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="包含全部费用" prop="isAllFee">
									<el-radio-group v-model="formData.isAllFee" @change="(e)=>{
										if(e == 'YES'){
											formData.feePayMethod = ''
										}
									}">
									    <el-radio :disabled="formType==2" label="YES">是</el-radio>
									    <el-radio :disabled="formType==2" label="NO">否</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item v-if="formData.isAllFee == 'NO'" label="费用支付方式" prop="feePayMethod">
									<el-radio-group v-model="formData.feePayMethod">
										<el-radio :disabled="formType==2" label="EXAMINE">审批后结算</el-radio>
										<el-radio :disabled="formType==2" label="SITE">现场支付</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="项目地址" prop="province" :required="true">
									<el-row>
										<el-col :span="5" style="margin-right: 12px;">
											<el-input type="text" v-model="formData.province" disabled placeholder="请选择省"></el-input>
										</el-col>
										<el-col :span="5" style="margin-right: 12px;">
											<el-input type="text" v-model="formData.city" disabled placeholder="请选择市"></el-input>
										</el-col>
										<el-col :span="5" style="margin-right: 12px;">
											<el-input type="text" v-model="formData.area" disabled placeholder="请选择区"></el-input>
										</el-col>
										<el-col :span="8">
											<el-input type="text" v-model="formData.street" disabled placeholder="请选择街道"></el-input>
										</el-col>
									</el-row>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="" prop="address">
									<el-row :gutter="20">
										<el-col :span="22">
											<el-input type="text" v-model="formData.address" :disabled="formType==2" placeholder="详细地址"></el-input>
										</el-col>
										<el-col :span="2">
											<geographicalPosi :disabled="formType==2" :formData="this.formData" @selectPosi="selectAddress"/>
										</el-col>
									</el-row>
								</el-form-item>
							</el-col>
							
							<el-col :span="24">
								<el-form-item label="项目说明">
									<el-input type="textarea" :rows="4" :disabled="formType==2" v-model="formData.remark" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</el-card>
			<br/>
			<el-card class="box-card">
				<el-tabs v-model="typeIndex" @change="changeType">
				    <el-tab-pane label="项目设备" name="1"></el-tab-pane>
				    <el-tab-pane label="项目人员" name="2"></el-tab-pane>
				    <el-tab-pane label="服务网点" name="3"></el-tab-pane>
				</el-tabs>
				<el-button size="small" v-if="formType!=2" type="primary" @click="add()">新增</el-button>
				<div class="table">
					<!-- 项目设备 -->
					<el-form ref="formData1" :model="formData1">
						<el-table v-show="typeIndex == 1" :data="formData1.productList" element-loading-text="Loading" border fit highlight-current-row stripe>
							<el-table-column label="品牌" align="center">
								<template slot-scope="scope">
									<el-form-item :prop="'productList.' + scope.$index + '.brand'" :rules="[{ required: true, message: `请选择品牌`, trigger: 'change' }]">
										<el-select v-model="scope.row.brand" @change="(e)=>{
											scope.row.brandId = e.id
											scope.row.brandName = e.brandName
										}" value-key="id" :disabled="isEdit != scope.$index || formType == 2" placeholder="请选择" style="width: 100%;">
										    <el-option
										      v-for="item in brandList"
										      :key="item.id"
										      :label="item.brandName"
										      :value="item">
										    </el-option>
										</el-select>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column label="产品大类" align="center">
								<template slot-scope="scope">
									<el-form-item :prop="'productList.' + scope.$index + '.main'" :rules="[{ required: true, message: `请选择产品大类`, trigger: 'change' }]">
										<el-select v-model="scope.row.main" value-key="categoryId" @change="(e)=>{
											scope.row.mainId = e.categoryId
											scope.row.mainName = e.name
											if(e.categoryId == 0){
												scope.row.small = {categoryId: '0', name: '不限'}
												scope.row.smallName = '不限'
												scope.row.smallId = '0'
											}else{
												scope.row.small = null
												scope.row.smallName = ''
												scope.row.smallId = ''
											}
											
											scope.row.smallList = e.children?e.children:[]
										}" :disabled="isEdit != scope.$index || formType == 2" placeholder="请选择" style="width: 100%;">
										    <el-option
										      v-for="item in mainList"
										      :key="item.categoryId"
										      :label="item.name"
										      :value="item">
										    </el-option>
										  </el-select>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column label="产品小类" align="center">
								<template slot-scope="scope">
									<el-form-item :prop="'productList.' + scope.$index + '.small'" :rules="[{ required: true, message: `请选择产品小类`, trigger: 'change' }]">
										<el-select v-model="scope.row.small" @focus="()=>{
												if(!scope.row.main){return this.$message.warning('请先选择产品大类！');}
											}" @change="(e)=>{
												scope.row.smallName = e.name
												scope.row.smallId = e.categoryId
												scope.row.smallImg = e.imgUrl
											}" :disabled="isEdit != scope.$index || formType == 2" value-key="categoryId" placeholder="请选择" style="width: 100%;">
										    <el-option
										      v-for="item in scope.row.smallList"
										      :key="item.categoryId"
										      :label="item.name"
										      :value="item">
										    </el-option>
										  </el-select>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="" align="center" label="系列名称">
								<template slot-scope="scope">
									<el-form-item>
										<el-input type="text" v-model="scope.row.seriesName" :disabled="isEdit != scope.$index || formType == 2" placeholder="请输入"></el-input>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="" align="center" label="机型名称">
								<template slot-scope="scope">
									<el-form-item>
										<el-input type="text" v-model="scope.row.productName" :disabled="isEdit != scope.$index || formType == 2" placeholder="请输入"></el-input>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column align="center" label="设备套数">
								<template slot-scope="scope">
									<el-form-item :prop="'productList.' + scope.$index + '.num'" :rules="[{ required: true, message: `请输入设备套数`, trigger: 'blur' }]">
										<el-input type="number" v-model="scope.row.num" :disabled="isEdit != scope.$index || formType == 2" placeholder="请输入"></el-input>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="" align="center" label="内机数量" >
								<template slot-scope="scope">
									<el-form-item>
										<el-input type="number" v-model="scope.row.inNum" :disabled="isEdit != scope.$index || formType == 2" placeholder="请输入"></el-input>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column prop="" align="center" label="外机数量">
								<template slot-scope="scope">
									<el-form-item>
										<el-input type="number" v-model="scope.row.outNum" :disabled="isEdit != scope.$index || formType == 2" placeholder="请输入"></el-input>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column label="操作" align="right" width="140">
								<template slot-scope="scope" v-if="formType != 2">
									<el-button size="mini" type="primary" v-if="scope.$index != isEdit" @click="isEdit = scope.$index">编辑</el-button>
									<el-button size="mini" type="danger" @click="del(scope.$index)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-form>
					<!-- 项目人员 -->
					<el-form v-show="typeIndex == 2" ref="formData2" :rules="rules2" :model="formData2" label-width="0" size="small" label-position="left">
						<el-table :data="formData2.byList" element-loading-text="Loading" border fit highlight-current-row stripe>
							<el-table-column align="center" label="姓名">
								<template slot-scope="scope">
									<el-form-item :prop="'byList.' + scope.$index + '.name'" :rules="[{ required: true, message: `请输入姓名`, trigger: 'blur' }]">
										<el-input type="text" v-model="scope.row.name" :disabled="isEdit != scope.$index || formType == 2" placeholder="请输入"></el-input>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column align="center" label="联系电话" >
								<template slot-scope="scope">
									<el-form-item :prop="'byList.' + scope.$index + '.mobile'" :required="true"
										:rules="[{ required: true, message: `请输入联系电话`, trigger: 'blur' },{ pattern:/^((1[3456789]\d{9}))$/, message: '电话号码格式不正确', trigger: 'blur' }]">
										<el-input type="number" v-model="scope.row.mobile" :disabled="isEdit != scope.$index || formType == 2" placeholder="请输入"></el-input>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column label="费用审批">
								<template slot-scope="scope">
									<el-form-item :prop="'byList.' + scope.$index + '.feeExamine'" :rules="[{ required: true, message: `请选择费用审批`, trigger: 'change' }]">
										<el-select v-model="scope.row.feeExamine" :disabled="isEdit != scope.$index || formType == 2" placeholder="请选择" style="width: 100%;">
										    <el-option
										      v-for="item in [{id: 'YES',name: '是'},{id: 'NO',name: '否'}]"
										      :key="item.id"
										      :label="item.name"
										      :value="item.id">
										    </el-option>
										  </el-select>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column label="操作" align="right" width="140">
								<template slot-scope="scope" v-if="formType != 2">
									<el-button size="mini" type="primary" v-if="scope.$index != isEdit" @click="isEdit = scope.$index">编辑</el-button>
									<el-button size="mini" type="danger" @click="del(scope.$index)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-form>
					<!-- 服务网点 -->
					<el-form v-show="typeIndex == 3" ref="formData3" :model="formData3" label-width="0" size="small" label-position="left">
						<el-table :data="formData3.websitList" element-loading-text="Loading" border fit highlight-current-row stripe>
							<el-table-column align="center" label="网点名称">
								<template slot-scope="scope">
									<el-form-item :prop="'websitList.' + scope.$index + '.websit'" :rules="[{ required: true, message: `请选择网点名称`, trigger: 'change' }]" :required="true">
										<el-select v-model="scope.row.websit" @change="(e)=>{
											scope.row.websitId = e.websitId
											scope.row.websitName = e.name
											scope.row.linkName = e.linkName
											scope.row.mobile = e.websitPhone
											scope.row.address = e.address
										}" value-key="websitId" :disabled="isEdit != scope.$index || formType == 2" placeholder="请选择" style="width: 100%;">
										    <el-option
										      v-for="item in websitData"
										      :key="item.websitId"
										      :label="item.name"
										      :value="item">
										    </el-option>
										  </el-select>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column align="center" label="联系人">
								<template slot-scope="scope">
									<el-form-item>
										<el-input type="text" v-model="scope.row.linkName" disabled placeholder="请输入"></el-input>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column align="center" label="移动电话" >
								<template slot-scope="scope">
									<el-form-item>
										<el-input type="number" v-model="scope.row.mobile" disabled placeholder="请输入"></el-input>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column align="center" label="地址" >
								<template slot-scope="scope">
									<el-form-item>
										<el-input type="text" v-model="scope.row.address" disabled placeholder="请输入"></el-input>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column label="操作" align="right" width="140">
								<template slot-scope="scope" v-if="formType != 2">
									<el-button size="mini" type="primary" v-if="scope.$index != isEdit" @click="isEdit = scope.$index">编辑</el-button>
									<el-button size="mini" type="danger" @click="del(scope.$index)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-form>
				</div>
			</el-card>
			<div class="page-footer">
				<div class="footer">
					<el-button v-if="formType != 2" size="small" type="primary" @click="confirm()">保存</el-button>
					<el-button size="small" type="info" @click="goBack">返回</el-button>
				</div>
			</div>
		</template>
		<template v-else>
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>修改记录</span>
				</div>
				
				<div class="table">
					<el-table :data="historyList" element-loading-text="Loading" border fit highlight-current-row stripe>
						<el-table-column prop="typeText" align="center" label="操作类型" ></el-table-column>
						<el-table-column prop="content" align="left" label="操作内容"></el-table-column>
						<el-table-column prop="createBy" align="center" label="操作人"></el-table-column>
						<el-table-column prop="createTime" align="center" label="操作时间"></el-table-column>
					</el-table>
				</div>
			</el-card>
		</template>
	</div>
</template>

<script>
	import { getWebsit } from "@/api/customerManagement";
	import { lbsAmapRegion } from '@/api/common.js'
	import geographicalPosi from '@/components/geographicalPosi/index.vue'
	import { getMainList } from "@/api/workOrder/settlementStandardInstall";
	import { getBrand } from '@/api/goods'
	import { getDetail, save } from "@/api/engineeringMaintenance/basicData";
	import request from '@/utils/request'
	export default {
		components: {geographicalPosi},
		props: ['id','title','formType'],
		data() {
			return {
				tabIndex: 1,
				typeIndex: '1',
				orderTypeList: [],
				websitData: [],
				brandList: [],
				historyList: [],
				provinceList: [],
				cityList: [],
				areaList: [],
				streetList: [],
				mainList: [],
				formData: {
					dateList: [],
					checkTypeList: [],
					projectName: '',
					manger: '',
					mobile: '',
					startTime: '',
					endTime: '',
					orderSmallTypeText: '安装',
					isAllFee: 'YES',
					feePayMethod: '',
					province: '',
					provinceId: '',
					city: '',
					cityId: '',
					area: '',
					areaId: '',
					street: '',
					streetId: '',
					address: '',
					lat: '',
					lng: '',
					remark: ''
				},
				formData1: {
					productList: [],
				},
				formData2: {
					byList: [],
				},
				formData3: {
					websitList: [],
				},
				isEdit: 0,
				companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
				rules: {
					projectName: [
						{ required: true, message: '请输入项目名称', trigger: 'blur' },
					],
					manger: [
						{ required: true, message: '请输入负责人名称', trigger: 'blur' },
					],
					mobile: [
						{ required: true, message: `请输入联系电话`, trigger: 'blur' },
						{ required: true, message: `请输入联系电话`, trigger: 'change' },
						{ pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, message: '电话号码格式不正确', trigger: 'blur' }
					],
					dateList: [
						{ required: true, message: '请选择维保时间', trigger: 'change' }
					],
					checkTypeList: [
						{ required: true, message: '请选择工单类型', trigger: 'change' }
					],
					address: [
						{ required: true, message: '请选择详细地址', trigger: 'change' }
					],
					feePayMethod: [
						{ required: true, message: '请选择费用支付方式', trigger: 'change' }
					],
					isAllFee: [
						{ required: true, message: '', trigger: '' }
					],
					orderSmallTypeText: [
						{ required: true, message: '', trigger: '' }
					]
				},
				rules1: {},
				rules2: {},
				rules3: {},
				isSave: true
			};
		},
		computed: {
			filterChildren(){
				return function(id){
					let data = []
					this.mainList.forEach(item=>{
						if(item.categoryId == id){
							data = item.children?item.children:[]
						}
					})
					return data
				}
			}
		},
		created() {
			if(this.id){
				this.getDetail()
			}
			this.initData()
		},
		methods: {
			// 返回
			goBack() {
				this.$emit('back');
			},
			async getDetail(){
				const that = this
				this.formData.checkTypeList = []
				getDetail({id: this.id}).then( async res => {
					Object.assign(this.formData, res.data, {
						websit: {websitId: res.data.websitId,name: res.data.websitName},
						
					})
					this.historyList = res.data.operatorLogList
					this.formData.dateList = [res.data.startTime,res.data.endTime]
					for(var item of res.data.productList){
						item.smallList = await this.filterChildren(item.mainId)
						item.brand = {id: item.brandId,brandName: item.brandName}
						item.main = {categoryId: item.mainId,name: item.mainName}
						item.small = {categoryId: item.smallId,name: item.smallName}
					}

					res.data.websitList.map(item=>{
						item.websit = {websitId: item.websitId,name: item.websitName}
					})
					res.data.typeList.forEach(item=>{
						this.formData.checkTypeList.push(item.id)
					})
					this.formData2.byList = res.data.byList
					this.formData1.productList = res.data.productList
					this.formData3.websitList = res.data.websitList
					
					console.log(this.formData.checkTypeList,'123123123')
				})
			},
			initData(){
				this.getOrderType()
				this.getBrandList()
				this.getWebsit()
				this.getMainList()
				this.getinitlbslist()
			},
			getOrderType(){
				request({
					url: `/order/smalltype/list`,
					method: 'post',
					data: {
						pageNum: 1,
						pageSize: -1,
						params: [{param: 'a.is_rp_project_repair',compare: '=', value: 'YES'}]
					}
				}).then(res => {
					this.orderTypeList = res.data.records
				})
			},
			getBrandList(){
				getBrand().then(res => {
					this.brandList = [...[{id: '0',brandName: '不限'}],...res.data]
				})
			},
			getMainList(){
				getMainList({type: 2}).then(res => {
					this.mainList = [...[{categoryId: '0',name: '不限',children: [{categoryId: '0',name: '不限'}]}],...res.data]
				})
			},
			getinitlbslist() {
			  // 初始化请求省市区街道下拉选项数据
			  lbsAmapRegion({ pid: 0 }).then(res => {
			    this.provinceList = res.data
			    // 创建工单时获取ip地址定位赋值
			    if (!this.id && this.$IpAdd.province) {
			      var item = this.provinceList.find(item => item.name === this.$IpAdd.province)
			      if (item) {
			        this.formData.provinceId = item.id
			        this.formData.province = item.name
			      }
			    }
			    if (this.formData.provinceId) {
			      lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
			        this.cityList = res.data
			        // 创建工单时获取ip地址定位赋值
			        if (!this.id && this.$IpAdd.city) {
			          var item2 = this.cityList.find(item => item.name === this.$IpAdd.city)
			          if (item2) {
			            this.formData.cityId = item2.id
			            this.formData.city = item2.name
			          }
			        }
			        if (this.formData.cityId) {
			          lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
			            this.areaList = res.data
			          })
			        }
			        if (this.formData.areaId) {
			          lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
			            this.streetList = res.data
			          })
			        }
			      })
			    }
			  })
			},
			selectAddress(data){
				this.formData.lng = data.center[0]
				this.formData.lat = data.center[1]
				// 获取定位的省市区街道
				var { province, city, district, township } = data.data.addressComponent
				// 获取选中省名称id
				var { id, name } = this.provinceList.find(item => item.name === province)
				this.formData.provinceId = id
				this.formData.province = name
				// 请求市选项
				lbsAmapRegion({ pid: this.formData.provinceId }).then(res => {
				  // 赋值市选项
				  this.cityList = res.data
				  // 获取选中市名称id
				  var { id, name } = res.data.find(item => item.name === city)
				  this.formData.cityId = id
				  this.formData.city = name
				  // 请求区选项
				  lbsAmapRegion({ pid: this.formData.cityId }).then(res => {
				    // 赋值区选项
				    this.areaList = res.data
				    // 获取选中区名称id
				    var { id, name } = res.data.find(item => item.name === district)
				    this.formData.areaId = id
				    this.formData.area = name
				    // 请求街道选项
				    lbsAmapRegion({ pid: this.formData.areaId }).then(res => {
				      // 赋值街道选项
				      this.streetList = res.data
				      // 获取选中街道名称id
				      var { id, name } = res.data.find(item => item.name === township)
				      this.formData.streetId = id
				      this.formData.street = name
				      // 赋值GPS详细地址
				      this.formData.address = data.name
				    })
				  })
				})
			},
			selectDate(e){
				this.formData.startTime = e[0] + ' 00:00:00'
				this.formData.endTime = e[1] + ' 23:59:59'
			},
			getWebsit(){
				getWebsit({type: 'C'}).then(res => {
					this.websitData = res.data
				})
			},
			getCategory(websitId){
				getCategory({websitId}).then(res => {
					this.mainList = res.data
				})
			},
			changeType(){
				this.isEdit = 0
			},
			preserveRuleForm(name) {
				let is_save = false
				this.$refs[name].validate((valid) => {
					if (valid) {
						is_save = true
					} else {
						is_save = false;
					}
				});
				return is_save
			},
			add(){
				if(!this.preserveRuleForm('formData' + this.typeIndex)){return false}
				let name = this.typeIndex == 1?'productList':this.typeIndex == 2?'byList':'websitList'
				if(this['formData' + this.typeIndex][name].length != 0){this.isEdit += 1}
				if(this.typeIndex == 1){
					this['formData' + this.typeIndex][name].push({
						brand: null,
						brandId: '',
						brandName: '',
						inNum: '',
						main: null,
						mainId: '',
						mainName: '',
						num: '',
						outNum: '',
						productName: '',
						seriesName: '',
						small: null,
						smallId: '',
						smallName: '',
						smallImg: ''
					})
				}else if(this.typeIndex == 2){
					this['formData' + this.typeIndex][name].push({
						name: '',
						mobile: '',
						feeExamine: ''
					})
				}else{
					this['formData' + this.typeIndex][name].push({
						websit: null,
						websitId: '',
						websitName: '',
						linkName: '',
						mobile: '',
						address: ''
					})
				}
			},
			del(index){
				let name = this.typeIndex == 1?'productList':this.typeIndex == 2?'byList':'websitList'
				this['formData' + this.typeIndex][name].splice(index,1)
			},
			confirm(){
				const that = this
				this.$refs.formData.validate((valid, invalidFields, errLabels) => {
					if (valid) {
						if(that.formData1.productList.length == 0){
							that.typeIndex = '1'
							return that.$message.error('请添加项目设备信息');
						}
						if(that.formData2.byList.length == 0){
							that.typeIndex = '2'
							return that.$message.error('请添加项目人员信息');
						}
						if(that.formData3.websitList.length == 0){
							that.typeIndex = '3'
							return that.$message.error('请添加服务网点信息');
						}
						if(!that.preserveRuleForm('formData1')){
							return that.typeIndex = '1'
						}
						if(!that.preserveRuleForm('formData2')){
							return that.typeIndex = '2'
						}
						if(!that.preserveRuleForm('formData3')){
							return that.typeIndex = '3'
						}
						this.save()
					}
				})
			},
			save(){
				if(!this.isSave){
					return false
				}
				this.isSave = false
				setTimeout(()=>{
					this.isSave = true
				})
				let data = this.orderTypeList.filter((it) => {
				   const index = this.formData.checkTypeList.findIndex((item) => item === it.id)
				   return index !== -1
				 })
				
				const that = this
				let params = {
					...this.formData,
					byList: this.formData2.byList,
					productList: this.formData1.productList,
					websitList: this.formData3.websitList,
					typeList: data
				}
				save(params).then(res => {
					that.$message.success('保存成功!')
					setTimeout(()=>{
						that.goBack()
					},1500)
				})
			}
		}
	};
</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>