级联-设置选中过的选项禁用+新增表格（行）

<template>
	<div class="app-container">
		<!-- <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :show-close="true" :close-on-click-modal="false"> -->
		<el-form class="small-space" :model="tempUser" ref="tempUser" :rules="rules" :show-message="false">
			<el-form-item label="模板名称" prop="name">
				<el-input type="text" v-model="tempUser.name" placeholder="请输入模板名称"></el-input>
			</el-form-item>
			<el-form-item>
				<template>
					<div class="good-list">
						<!-- <el-table :data="goodsList" border class="table-list-style"> -->
						<el-table :data="tempUser.freightTemplateInfoList" border class="table-list-style">
							<el-table-column label="可配送区域" align="center">
								<template slot-scope="scope">
									<!-- <el-form-item :prop="goodsList.cityIds" :rules="rules.cityIds"> -->
									<el-form-item :prop="'freightTemplateInfoList.'+[scope.$index]+'.cityIds'"
										:rules="rules.cityIds">
										<el-select v-model="scope.row.cityIds" multiple placeholder="请选择"
											@change="selectChange(scope.row.cityIds,scope.$index)">
											<el-option v-for="item in CityList" :key="item.id" :label="item.areaName"
												:value="item.id"
												:disabled="!CityList.includes(item.id) && selectedOptions.includes(item.id)">
											</el-option>
										</el-select>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column align="center" label="首重（kg）" prop="firstWeight">
								<template slot-scope="scope">
									<el-input-number v-model="scope.row.firstWeight" controls-position="right"
										@change="handleChange" :precision="2" size="mini" :step="0.1" :min='0'>
									</el-input-number>
								</template>
							</el-table-column>
							<el-table-column label="首重费用" align="center" prop="freight" :min='0'>
								<template slot-scope="scope">
									<el-input-number v-model="scope.row.freight" controls-position="right"
										:precision="2" size="mini" :step="0.1"></el-input-number>
								</template>
							</el-table-column>
							<el-table-column label="续重费用（/1kg）" align="center" prop="renew" :min='0'>
								<template slot-scope="scope">
									<el-input-number v-model="scope.row.renew" controls-position="right" :precision="2"
										size="mini" :step="0.1"></el-input-number>
								</template>
							</el-table-column>
							<el-table-column align="center" label="操作">
								<template slot-scope="scope">
									<el-button type="primary" @click="deleteUpdate(scope.$index)">删除
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</template>
			</el-form-item>
		</el-form>
		<div slot="footer" style="display: flex;justify-content: space-between;">
			<!-- <template slot-scope="scope"> -->
			<div class="">
				<el-button @click="TakeAdd()">添加</el-button>
			</div>
			<div class="" style="display: flex;">
				<el-button @click="TakeAway()">返 回</el-button>
				<el-button type="primary" @click="updateUser('tempUser')">确 定</el-button>
			</div>
			<!-- </template> -->

		</div>
		<!-- </el-dialog> -->
		<el-dialog :title="textMap[dialogStatus1]" :visible.sync="dialogFormVisibles" :show-close="true"
			:close-on-click-modal="false">
			<freightTemplatetDialog v-show="infoShows" :infoShows.sync="infoShows" ref="mychilds"
				:dialogFormVisibles.sync="dialogFormVisibles" :user="tempUser" :dialogStatus1="dialogStatus1" />
		</el-dialog>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import request from '@/utils/request'
	import {
		getToken
	} from '@/utils/auth'
	import {
		Delete,
		City,
		Edit,
		Add
	} from '@/api/freightTemplate'
	import freightTemplatetDialog from './dialog.vue'
	export default {
		name: 'freightTemplatetInfo',
		components: {
			// Pagination,
			freightTemplatetDialog,
		},
		props: ['dialogFormVisible', 'infoShow', 'dialogStatus', 'user'],
		inject: ['reload'],
		data() {
			return {
				num: 0,
				token: '',
				dialogFormVisibles: false, //弹出框
				infoShows: false, //组件
				dialogStatus1: 'cahngeCity', //区分备注或发货
				textMap: { //标题
					update: '编辑',
					create: '新建模板'
				},
				//参数
				tempUser: {
					id: '',
					state: '', //状态{0:,1:}
					updateUserName: '', //最后修改人
					updateTime: '', //修改时间
					freightTemplateInfoList: []
				},
				goodsList: [], //模板信息
				//校验
				rules: {
					name: [{
						required: true,
						message: '请输入模板名称',
						trigger: 'blur'
					}],
					cityIds: [{
						required: true,
						// transform: value => value ? value.trim() : '',
						message: '请输入',
						trigger: 'change'
					}],
				},
				//这里可以设置初始值
				obj: {
					cityIds: "", //城市ids
					firstWeight: "", //首重（kg）
					freight: '', //首重费用
					renew: '', //续重费用（/1kg）
					isDelete: '', //是否删除
					id: 0
				},
				CityList: [], //省份列表
				selectedOptions: [], //公共列表
			}
		},
		watch: {
			user(newUser, oldUser) {
				this.tempUser = newUser
				if (this.dialogStatus == "update") {
					this.goodsList = this.user.freightTemplateInfoList
				} else {
					this.tempUser = oldUser
				}
			},
		},
		created() {
			this.getCityList()
			/* 初始化下拉可选项 */
			for (let j = 0; j < this.CityList.length; j++) {
				this.CityList.push({
					id: this.CityList[i].id,
					disabled: false
				})
			}
			/* 初始化下拉表格数据，得到公共选项列表'selectedOptions' */
			if (this.goodsList.length > 0) {
				let publicArr = [];
				for (let m in this.goodsList) {
					publicArr = [...publicArr]
				}
				this.selectedOptions = publicArr;
			}
		},
		mounted() {
			this.tempUser = this.user
			if (this.dialogStatus == "update") {
				this.goodsList = this.user.freightTemplateInfoList
			} else {
				//解决新增添加后才实现动态禁用
				// this.goodsList = []
			}
			this.$set(this.tempUser, 'goodsList', this.goodsList)
			this.$set(this.tempUser, 'freightTemplateInfoList', this.freightTemplateInfoList)
		},
		methods: {
			/* 监听下拉框值的变化，实时更新公共选项列表（选项的添加与删除） */
			selectChange() {
				let arr = [];
				for (let i in this.goodsList) {
					arr = [...arr, ...this.goodsList[i].cityIds]
					// console.log('goodsList', this.goodsList[i].cityIds) //ok
				}
				this.selectedOptions = arr;
			},
			//添加新数据
			TakeAdd() {
				// console.log('push前',this.tempUser)
				this.goodsList.push(JSON.parse(JSON.stringify(this.obj)))
				this.tempUser.freightTemplateInfoList = this.goodsList
				//解决添加后选中某一值才实现动态禁用
				this.selectChange()
				// console.log('ppp后', this.tempUser)
			},
			//省份列表
			getCityList() {
				City({}).then((data) => {
					this.CityList = data.info
				})
			},
			//取消
			TakeAway() {
				//关闭弹框和隐藏组件
				this.$emit("update:infoShow", false);
				this.$emit("update:dialogFormVisible", false);
				//清除表单校验
				this.$refs.tempUser.resetFields();
				this.goodsList = []
			},
			//选择城市
			showDialog() {
				this.infoShows = true
				this.dialogFormVisibles = true
				this.dialogStatus1 = "cahngeCity"
			},
			//计步器
			handleChange(value) {
				console.log(value);
			},
			//删除
			deleteUpdate($index) {
				// console.log($index + 1)
				this.goodsList.splice($index, 1)
			},
			//修改用户信息
			updateUser(formData) {
				this.$refs[formData].validate((valid) => {
					if (!valid) {
						console.log('未填必填项', valid)
					} else {
						console.log('填了必填项', valid)
						let _vue = this;
						if (this.dialogStatus == 'create') {
							for (var i = 0; i < _vue.goodsList.length; i++) {
								_vue.goodsList[i].cityIds = _vue.goodsList[i].cityIds.toString()
							}
							// console.log('create.tempUser', _vue.tempUser) //ok
							// console.log('create.goodsList', _vue.goodsList) //ok
							Add({
								name: _vue.tempUser.name,
								freightTemplateInfoList: _vue.goodsList
							}).then((data) => {
								this.$emit("update:infoShow", false);
								this.$emit("update:dialogFormVisible", false);
								this.$emit('getList')
								if (data.code === 100) {
									this.$message({
										type: 'success',
										message: data.info
									})
								} else {
									this.$message({
										type: 'error',
										message: data.msg
									})
								}
							})
						} else if (this.dialogStatus == 'update') {
							for (var i = 0; i < _vue.tempUser.freightTemplateInfoList.length; i++) {
								_vue.tempUser.freightTemplateInfoList[i].cityIds = _vue.tempUser
									.freightTemplateInfoList[i].cityIds.toString()
							}
							// console.log('填了必填项........')
							// console.log('update.tempUser', _vue.tempUser) //ok
							Edit(_vue.tempUser).then((data) => {
								this.$emit("update:infoShow", false);
								this.$emit("update:dialogFormVisible", false);
								this.$emit('getList')
								if (data.code === 100) {
									this.$message({
										type: 'success',
										message: data.info
									})
								} else {
									this.$message({
										type: 'error',
										message: data.msg
									})
								}
							})
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	// @import "./src/styles/freightTemplatetInfo.scss";
</style>