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

运行结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/414285.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python 黑帽子第二章运行截图

转载于:https://www.cnblogs.com/blankicefire/p/8796158.html

公司网页添加旺旺,状态不正确

这两天在给公司做的网站添加旺旺&#xff0c;在阿里巴巴官网生成代码之后复制到网页。想试试旺旺的状态是否正确&#xff0c;登录旺旺之后一直都是不在线状态&#xff0c;如下图&#xff1a; &#xff0c; 到官网问客服之后得到的答复如下&#xff1a; 如果您登录了阿里旺旺…

并发编程之多线程线程安全(下)

1、什么是 Volatile&#xff1f; volatile 是一个类型修饰符&#xff0c;具有可见性&#xff0c;也就是说一旦某个线程修改了该被 volatile 修饰的变量&#xff0c;它会保证修改的值会立即被更新到主存&#xff0c;当有其他线程需要读取时&#xff0c;可以立即获取修改之后的值…

工作265:v-model实现原理 自定义组件使用v-model

v-model只是一个语法糖&#xff0c;等于:valueinput&#xff0c;真正的实现靠的还是&#xff1a; &#xfeff;v-bind:绑定响应式数据&#xff0c;触发 input 事件并传递数据 (核心和重点) 1其实和下面一样的 <input :value“something” input“something $event.target…

关于CI框架引入CSS与JS文件

</pre>最近用了一下CI框架&#xff0c;使用到了bootstrap&#xff0c;引入CSS文件的时候一直不生效&#xff0c;琢磨这找到了原因。<p></p><p>首先&#xff0c;在根目录找到.htaccess文件&#xff0c;修改为如下内容</p><p></p><…

视图转为表

create table t as select * from view转载于:https://www.cnblogs.com/jycjy/p/8796841.html

idea中隐藏.iml文件

在创建父子工程或者聚合工程时产生的大量 .iml 文件&#xff0c;有时会对我们的操作产生干扰&#xff0c;所以&#xff0c;一般情况下&#xff0c;我们都将其隐藏掉&#xff0c;步骤如下&#xff1a; File——>settings——>Editor——>File Types——>Ignore fil…

YII2 服务器验证码不显示

<span style"font-size:18px;">最近做的一个项目上线了&#xff0c;我用YII2新搭建的后台&#xff0c;在本地以及内测地址都正常&#xff0c;上线之后验证码却没有显示&#xff0c;上网搜了一下&#xff0c;有网友说修改一下源文件就可以。</span> 查找源…

微信小程序视频弹幕效果

这次&#xff0c;和大家一起探讨下小程序视频弹幕一、按照老规矩&#xff0c;先附上gif效果图&#xff1a;二、接下来看下官方文档API对vide说明PS&#xff1a;相关属性解析&#xff1a;danmu-list:弹幕列表 enable-danmu:是否显示弹幕 danmu-btn:弹幕按钮 controls:是否显示视…

基于Docker搭建GitLab代码管理

关于Git、SVN的优缺点就不再重复了&#xff0c;本篇主要以实际搭建为主。 1、下载镜像文件 在命令行窗口执行如下指令&#xff0c;预计下载完成4分钟。 docker pull beginor/gitlab-ce:11.0.1-ce.0注意&#xff1a; 一定要配置镜像加速&#xff0c;不然会非常非常的慢&#x…

虚拟域名不能访问

早上遇到个问题&#xff0c;打开本地虚拟域名&#xff0c;访问报错。开始的时候报错是&#xff0c;地址不存在。后面发现是因为丢了.htaccess文件&#xff08;用的是TP框架&#xff09;&#xff0c;加上这个文件&#xff0c;内容如下 <IfModule mod_rewrite.c>Options Fo…

CentOS 7安装Hadoop 3.0.0

最近在学习大数据&#xff0c;需要安装Hadoop&#xff0c;自己弄了好久&#xff0c;最后终于弄好了。网上也有很多文章关于安装Hadoop的&#xff0c;但总会遇到一些问题&#xff0c;所以把在CentOS 7安装Hadoop 3.0.0的整个过程记录下来&#xff0c;有什么不对的地方大家可以留…

Docker中Maven私服的搭建

为何用到Maven私服&#xff1f; 在实际开发中&#xff0c;项目中可能会用到第三方的jar、内部通讯的服务接口都会打入到公司的私服中。 我们从项目实际开发来看&#xff1a; 一些无法从外部仓库下载的构件&#xff0c;例如内部的项目还能部署到私服上&#xff0c;以便供其他依赖…

博客作业03--栈和队列

1.学习总结 2.PTA实验作业 题目1&#xff1a;jmu-字符串是否对称 1设计思路 for i 1 to 字符串str结束if 栈顶元素 ! str[i] 字符串不对称输出noendfor字符串对称输出yes 2代码截图 3PTA提交列表说明 前面几处错误都是因为输入用的是getchar(),后来改用gets就对了好像是因为这…

关于微信支付报错

最近两周一直在做网站的微信支付&#xff0c;期间遇到好多个问题&#xff0c;而最坑的问题&#xff0c;应该就是一个exit引发的坑案。 其实上周微信支付就已经调通了&#xff0c;在测试环境测试&#xff0c;没有什么大的问题&#xff0c;完美。但是提交到内测环境之后&#xf…

apollo报:系统出错,请重试或联系系统负责人

说明&#xff1a;基于 docker 搭建的 apollo&#xff0c;创建项目后一直报系统出错&#xff0c;请重试或联系系统负责人错误。 项目人员列表一直空白&#xff1a; 经排查是数据库配置参数不匹配&#xff0c;由于自己的虚拟机 ip 为 192.168.10.130 注意&#xff1a;修改完需要重…