工作283:抽离出新页面优化

<template><!--绑定了一个 控制是否为全屏fullscreen close-on-click-modal	是否通过点击model进行关闭 visible是否显示弹出框 close关闭按钮 --><el-dialog @open="open" :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="订单名称" >{{form.order.name}}<!--  <el-input   v-model="" :disabled="viewMode"/>--></el-form-item></el-col><el-col  :span="12"><el-form-item prop="order.client" label="客户名称">{{form.order.client}}</el-form-item></el-col><el-col :span="12"><el-form-item  prop="order.order_number" label="订单编号">{{form.order.order_number}}</el-form-item></el-col><el-col :span="12"><el-form-item  prop="order.business_module" label="业务单元" :label-width="formLabelWidth"><!--注意用户的返回值-->{{form.order.business_module}}</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="订单金额">{{form.order.money}}<!-- <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="任务金额">{{dep.money}}</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-row><el-form-item label="刊例价" >{{ acc.price }}</el-form-item><template v-for="(task, index) in acc.tasks"><el-form-item :label="index + 1 + '. 任务名称'">{{task.name}}</el-form-item><el-form-item :label="index + 1 + '.发布时间'">{{task.start_time}}</el-form-item></template></template></div></el-card></el-form><div slot="footer" class="dialog-footer"><template v-if="approveMode"><!--   reject('order',{status:-1,remark:''})--><el-button @click="ResetReson()">审核退回</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><reset-reson ref="reson"></reset-reson></el-dialog></template><script>
import {AddEditDialogMixin
} from "@/component/dialog/AddEditDialogMixin";
import ResetReson from "@/views/order/accoutTask/ResetReson";
import {getAction} from "@/api";/*定义一个对象*/
const defaultForm = {order: {/*订单名称*/name: "",/*客户名称*/client: "",order_number: "",business_module: "",money: "",department_id: ''},departmentList: []
};
export default {name: "EditOrderDialog",mixins: [AddEditDialogMixin],components: {ResetReson},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'是鼠标失去焦点的时候会触发验证],business_module: [{ required: true, message: '业务单元不能为空',trigger: 'blur'}, // 'blur'是鼠标失去焦点的时候会触发验证],},},//控住按钮状态form: defaultForm,defaultForm: defaultForm,formLabelWidth: "160px",url: {add: "/order",edit: "/order",query: "/order"},/*存储业务单元*/business_modules:[]};},/*用一个计算属性*/computed: {fullTitle() {return this.title + "订单";},DepartmentId(){return this.$store.state.department.id}},created() {getAction("/department/attribute/"+this.DepartmentId).then(res=>{this.business_modules=res.data.business_module})},methods: {ResetReson(){this.$refs["reson"].show()},open(){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/414193.shtml

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

相关文章

RabbitMQ六种队列模式-路由模式

RabbitMQ六种队列模式-路由模式

前言 RabbitMQ六种队列模式-简单队列 RabbitMQ六种队列模式-工作队列 RabbitMQ六种队列模式-发布订阅 RabbitMQ六种队列模式-路由模式 [本文] RabbitMQ六种队列模式-主题模式 本文带大家了解 RabbitMQ 队列模式中的路由模式。 其实只要看过上篇发布模式后&#xff0c;相信路由…
阅读更多...
CAS Client 3.2.1 配置详解

CAS Client 3.2.1 配置详解

CAS Client 3.2.1 配置详解 http://www.pinhuba.com/casclient/101256.htm 摘要: CAS作为开源的单点登陆框架已经非常的流行了。由于它对已有系统的入侵性小&#xff0c;支持的语言多&#xff0c;备受广大开发者关注&#xff1b;CAS作为开源的单点登陆框架已经非常的流行了。由…
阅读更多...
已经改成UTF-8了，git提交properties还是乱码

已经改成UTF-8了，git提交properties还是乱码

原因idea的File Encoding勾选了Transparent native-to-ascii conversion 如果团队中都勾选了则无所谓、如果有的勾选、有的没勾选合并代码会出现乱码。
阅读更多...
RabbitMQ六种队列模式-发布订阅模式

RabbitMQ六种队列模式-发布订阅模式

前言 RabbitMQ六种队列模式-简单队列 RabbitMQ六种队列模式-工作队列 RabbitMQ六种队列模式-发布订阅 [本文] RabbitMQ六种队列模式-路由模式 RabbitMQ六种队列模式-主题模式 上文的工作队列模式是直接在生产者与消费者里声明好一个队列&#xff0c;这种情况下消息只会对应同类…
阅读更多...
工作288:跨组件传值

工作288:跨组件传值

putAction("/order/"this.$parent.$parent.ListId"/status",{status:-1,remark: this.remark}).then(res>{this.$message({message: 退回已提交,type: success});this.$emit("ok")this.dialogVisiblefalse跨组件传值
阅读更多...
javafx HBOX按钮右对齐

javafx HBOX按钮右对齐

<HBox spacing"20" alignment"CENTER_LEFT"> <!---关键在这里----><HBox HBox.hgrow"ALWAYS"></HBox><JFXButton prefWidth"100" fx:id"dialogCommitButton" prefHeight"40" textAlig…
阅读更多...
景山公园

景山公园

转载于:https://www.cnblogs.com/optor/p/8928938.html
阅读更多...
RabbitMQ六种队列模式-工作队列模式

RabbitMQ六种队列模式-工作队列模式

前言 RabbitMQ六种队列模式-简单队列 RabbitMQ六种队列模式-工作队列 [本文] RabbitMQ六种队列模式-发布订阅 RabbitMQ六种队列模式-路由模式 RabbitMQ六种队列模式-主题模式 上文我们了解了 RabbitMQ 六种队列模式中的简单队列&#xff0c;代码也是非常的简单&#xff0c;比较…
阅读更多...
工作289:父子组件传值控制弹窗关闭

工作289:父子组件传值控制弹窗关闭

resetreson <template><el-dialogtitle"审核退回":visible.sync"dialogVisible"width"30%"append-to-body><el-form ref"form"><el-form-item label"退回原因" ><el-input v-model"remark…
阅读更多...
Redhat Linux 7.3 虚拟机通过USB挂载NTFS格式的移动硬盘

Redhat Linux 7.3 虚拟机通过USB挂载NTFS格式的移动硬盘

分为如下几个步骤&#xff1a; 一、设置本地yum&#xff0c;安装gcc&#xff08;如果本机已经安装gcc&#xff0c;则跳过此步&#xff09; 在虚拟机连接linux iso安装盘查看光盘挂载情况mkdir /isomount /dev/cdrom /isocd /etc/yum.repos.d/vi local.repo[local] namelocal ba…
阅读更多...
RabbitMQ六种队列模式-简单队列模式

RabbitMQ六种队列模式-简单队列模式

前言 RabbitMQ六种队列模式-简单队列 [本文] RabbitMQ六种队列模式-工作队列 RabbitMQ六种队列模式-发布订阅 RabbitMQ六种队列模式-路由模式 RabbitMQ六种队列模式-主题模式 在官网的教程中&#xff0c;描述了如上六类工作队列模式&#xff1a; 简单队列模式&#xff1a;最简…
阅读更多...
工作290:重置新增的mode

工作290:重置新增的mode

/*4 GY定义 找到该组件下面的add方法*/add() {/* 5GY定义 给当前属性下面的title赋值*/this.title "新增";/*重置新增的mode*/this.mode[]this.show();this.IsShowtrue;this.attrthis.viewMode false;this.approveMode false/* 7GY定义 给当前的form赋值 并进行对…
阅读更多...
串口数据字节位的理解

串口数据字节位的理解

# STM32F4xx系列的MCU的UART数据字节组成如下图 # 发送数据做如下图示&#xff0c;data byte MSB 与 Parity 重合 # 先刨去 Parity bit&#xff0c;分析 LSB ~ MSB 的纯数据&#xff1a; > 假定数据中的 ‘1’ 个数为奇数&#xff0c;偶校验&#xff1a;Parity ‘1’&#…
阅读更多...
RabbitMQ消息确认机制

RabbitMQ消息确认机制

文章目录1. 事务机制2. Confirm模式2.1 生产者2.1.1 普通Confirm模式2.1.2 批量Confirm模式2.1.3 异步Confirm模式2.2 消费者3. 其他消费者如何确保消息一定能够消费成功呢&#xff1f;由于在前面工作队列模式里面我们了解了应答模式&#xff0c;所以我们可以很自信的回答如上题…
阅读更多...
工作292:数据绑定逻辑处理

工作292:数据绑定逻辑处理

},confirmAssociation() {if(this.selected!"") {putAction(this.url.put / this.task_id /bound, {content_id: this.selected}).then(res > {this.$message.success("绑定成功");this.$emit("ok")this.$refs["dialog"].close(…
阅读更多...
工作293:调节删除顺序删除

工作293:调节删除顺序删除

}this.$confirm(您确定删除吗?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(res>{this.loadingtruedeleteAction(path.join(this.url.delete, record.id))/* this.list()*/this.reload()this.$message.success("删除成功");th…
阅读更多...
RabbitMQ消息幂等性问题

RabbitMQ消息幂等性问题

文章目录1. 什么是幂等性&#xff1f;1.1 消息队列的幂等性1.2 模拟重试机制1.2.1 生产者代码1.2.2 消费者代码1.2.3 消费者 application.yml 配置2. 如何保证消息幂等性&#xff0c;不被重复消费&#xff1f;解决方法1. 什么是幂等性&#xff1f; 在编程中一个幂等操作的特点是…
阅读更多...
JAVA面向对象明星类

JAVA面向对象明星类

public class _01Celebrity{//属性public String name;public int age;public double height;public char gender;//构造器public _01Celebrity(String name,int age,double height,char gender){this.name name;this.age age;this.height height;this.gender gender;}//方…
阅读更多...
工作287:命名报错

工作287:命名报错

return:{data:{account_id: ,BindData: [],RomoteData:[],dialogVisible: false,ff_account_index: ,form:{},}},这种命名报错
阅读更多...
Centos安装JDK(java环境)

Centos安装JDK(java环境)

王小私下问我 centos 中 jdk 怎么安装呀&#xff0c;所以再次整理了这篇基础环境搭建的文章。 1、创建java目录2、下载上传jdk3、解压jdk4、配置环境变量 1、创建java目录 首先我们创建java的安装目录 cd /usrmkdir javacd java 2、下载上传jdk 我们如上在 usr 目录下创建了 ja…
阅读更多...
最新文章

Copyright @ 2022~2023