工作275:表单验证层级添加

<template>
  <!--绑定了一个 控制是否为全屏fullscreen close-on-click-modal	是否通过点击model进行关闭 visible是否显示弹出框 close关闭按钮 -->
	<el-dialog :title="fullTitle" width="80%" :fullscreen="false" :close-on-click-modal="false" :visible.sync="dialogFormVisible"
	 @close="close">
    <!--关闭按钮 调用混用里面得close方法-->
    <!--通过绑定显示对应数值 model为表单数据对象 label-width表单数据大小 form绑定得表单信息-->
		<el-form ref="form" :rules="rules" :model="form" size="medium" :label-width="formLabelWidth" v-loading="loading">
			<!--定义订单信息-->
			<!--订单信息部分-->
      <!--shddow 设置阴影设置时机-->
			<el-card header="订单信息" shadow="hover">
				<el-col :span="12">
					<el-form-item prop="order.name" label="订单名称" >
						<el-input   v-model="form.order.name" :disabled="viewMode"/>
					</el-form-item>
				</el-col>
				<el-col  :span="12">
					<el-form-item prop="order.client" label="客户名称">
						<el-input v-model="form.order.client" :disabled="viewMode"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item  prop="order.order_number" label="订单编号">
						<el-input v-model="form.order.order_number" :disabled="viewMode"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
          <el-form-item  prop="order.column" label="业务单元" :label-width="formLabelWidth">
            <!--注意用户的返回值-->
            <el-select  v-model="form.order.business_module"  placeholder="请选择所属单元">
              <el-option @change="UploadUrl"  v-for="business_module in business_modules" :label="business_module" :value="business_module"></el-option>
            </el-select>
          </el-form-item>
			<!--		<el-form-item label="业务单元">
						<el-input v-model="form.order.business_module" :disabled="viewMode"/>
					</el-form-item>-->
				</el-col>
        <!--el-col来修饰布局-->
				<el-col :span="12">
					<el-form-item prop="order.money" label="订单金额">
						<el-input-number v-model="form.order.money" :disabled="viewMode"/>
					</el-form-item>
				</el-col>
			</el-card>
			<!--任务信息部分-->
			<el-card shadow="hover" header="任务信息" style="margin-top: 20px">
				<account-filter-select :viewMode="viewMode" @select="onSelectAccount" />
				<div class="department-container" v-if="form.departmentList.length > 0" v-for="(dep,index) in form.departmentList">
					<el-row class="department-info">
						<el-avatar src="../../assets/logo.png" class="department-avatar" />
						<span class="department-name">
							{{ dep.name }}
						</span>
					</el-row>
          <!--任务金额-->
					<el-form-item label="任务金额">
						<el-input-number v-model="dep.money" :disabled="viewMode"></el-input-number>
					</el-form-item>

					<template v-for="(acc,item) in dep.accounts">
						<el-divider />
						<el-row class="media-container">
							<span class="media-info">
								{{ acc.name }}
							</span>
              <el-button type="primary" @click="addFrom(index,item)" :disabled="viewMode">+</el-button>
						</el-row>

						<el-form-item label="刊例价" >
							{{ acc.price }}
						</el-form-item>
						<template v-for="(task, index) in acc.tasks">
							<el-form-item :label="index + 1 + '. 任务名称'">
								<el-input v-model="task.name" :disabled="viewMode"/>
							</el-form-item>
							<el-form-item :label="index + 1 + '.发布时间'">
								<el-date-picker v-model="task.start_time" :disabled="viewMode"/>
							</el-form-item>
						</template>
					</template>
				</div>
			</el-card>
		</el-form>
		<div slot="footer" class="dialog-footer">
      <template v-if="approveMode">
        <el-button @click="reject('order',{status:-1,remark:''})">审核退回</el-button>
        <!--审核完成变成待接收-->
        <el-button type="primary" @click="approve('order',{status:2,remark:''})">审核通过</el-button>
      </template>
      <template v-if="viewMode">
        <el-button @click="close">关 闭</el-button>
      </template>
      <template v-else>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </template>
    </div>
	</el-dialog>
</template>

<script>
	import {
		AddEditDialogMixin
	} from "@/component/dialog/AddEditDialogMixin";
	import AccountFilterSelect from "./accountSelect/AccountFilterSelect";
  import {getAction} from "@/api";

	/*定义一个对象*/
	const defaultForm = {
		order: {
			/*订单名称*/
			name: "",
			/*客户名称*/
			client: "",
			order_number: "",
			business_module: "",
			money: "",
			department_id: ''
		},
		departmentList: []
	};
	export default {
    name: "EditOrderDialog",
    mixins: [AddEditDialogMixin],
    components: {
      AccountFilterSelect
    },
    data() {
      return {

        rules:{
          order:{
          name: [
            { required: true, message: '名称不能为空',trigger: 'blur'}, // 'blur'是鼠标失去焦点的时候会触发验证
          ],
          client: [
            { required: true, message: '客户名称不能为空',trigger: 'blur'}, // 'blur'是鼠标失去焦点的时候会触发验证
          ],
          money: [
            { required: true, message: '刊例价不能为空',trigger: 'blur'}, // 'blur'是鼠标失去焦点的时候会触发验证
          ],
          order_number: [
            { required: true, message: '订单编号不能为空',trigger: 'blur'}, // 'blur'是鼠标失去焦点的时候会触发验证
          ],
          column: [
            { required: true, message: '业务单元不能为空',trigger: 'blur'}, // 'blur'是鼠标失去焦点的时候会触发验证
          ],
        },
        },
        //控住按钮状态
        form: defaultForm,
        defaultForm: defaultForm,
        formLabelWidth: "160px",
        url: {
          add: "/order",
          edit: "/order",
          query: "/order"
        },
        /*存储业务单元*/
        business_modules:[]
      };
    },
    created() {
      this.UploadUrl()
    },
    /*用一个计算属性*/
    computed: {
      fullTitle() {
        return this.title + "订单";
      },
      DepartmentId(){
        return this.$store.state.department.id
      }
    },
    methods: {
      UploadUrl(){
        getAction("/department/attribute/"+this.DepartmentId).then(res=>{
          console.log(res)
          this.business_modules=res.data.business_module
        })
      },
      /*控制任务的添加功能*/
      addFrom(index,item) {
        var tasks = {
          name: "",
          start_time: null
        }
        this.form.departmentList[index].accounts[item].tasks.push(tasks);
  },
			onSelectAccount(data) {
				for (var i = 0; i < data.length; i++) {
				  /*定义一个status */
					var status = this.isShowDepartment(data[i].department_id, data[i].id, this.form.departmentList);
					switch (status.code) {
						case 1:
							var info = {
								id: data[i].department_id,
								name: data[i].departmentName,
								money: data[i].price,
								accounts: [{
									id: data[i].id,
									name: data[i].name,
									price: data[i].price,
									tasks: [{
										name: "",
										start_time: null
									}]
								}]
							};
							this.form.departmentList.push(info);
							break;
						case 2:
							var info = {
								id: data[i].id,
								name: data[i].name,
								price: data[i].price,
								tasks: [{
									name: "",
									start_time: null
								}]
							}
							this.form.departmentList[status.i].money = parseFloat(this.form.departmentList[status.i].money) +
								parseFloat(data[i].price);
							this.form.departmentList[status.i].accounts.push(info);
							break;
						case 3:
							break;

					}
				}
			},
			//判断是否存在部门(三个参数 第一个是部门id  第二个是账号id 第三个是传入对象)
      /*判断对象 如果里面有传入对象 就开始遍历 如果遍历有对象 返回1 department_id 返回2 有accout 返回2*/
			isShowDepartment(department_id, account_id, list) {
			  /*如果这个list得长度对象大于0*/
				if (list.length > 0) {
				  /*循环遍历*/
					for (var i = 0; i < list.length; i++) {
					  /*如果循环遍历得id等同于当前得department_id*/
						if (list[i].id == department_id) {
						  /*遍历循环得到当前得长度*/
							for (var j = 0; j < list[i].accounts.length; j++) {
								if (list[i].accounts[j].id == account_id) {
									return {
										code: 3
									};
								}
							}
							return {
								code: 2,
								i: i
							};
						}
					}
					return {
						code: 1
					}
				}
				return {
					code: 1
				};
			},


		}
	};
</script>

<style lang="scss" scoped>
	.department-container {
		margin: 20px;
		padding: 20px;
		border: 1px dashed #dcdfe6;

		.department-info {
			padding: 20px 25px;

			.department-avatar {
				vertical-align: middle;
			}

			.department-name {
				vertical-align: middle;
				color: #707070;
				font-size: 18px;
				margin-left: 20px;
			}
		}

		.media-container {
			margin-bottom: 20px;

			.media-info {
				display: inline-block;
				margin: 10px 50px;
				padding: 20px 25px;
				border: 1px dashed #dcdfe6;
				border-radius: 4px;
			}
		}
	}
</style>

运行结果