<template><!--綁定了一個(gè) 控制是否為全屏fullscreen close-on-click-modal 是否通過點(diǎn)擊model進(jìn)行關(guān)閉 visible是否顯示彈出框 close關(guān)閉按鈕 --><el-dialog @open="open" :title="fullTitle" width="80%" :fullscreen="false" :close-on-click-modal="false" :visible.sync="dialogFormVisible"@close="close"><!--關(guān)閉按鈕 調(diào)用混用里面得close方法--><!--通過綁定顯示對(duì)應(yīng)數(shù)值 model為表單數(shù)據(jù)對(duì)象 label-width表單數(shù)據(jù)大小 form綁定得表單信息--><el-form ref="form" :rules="rules" :model="form" size="medium" :label-width="formLabelWidth" v-loading="loading"><!--定義訂單信息--><!--訂單信息部分--><!--shddow 設(shè)置陰影設(shè)置時(shí)機(jī)--><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="訂單編號(hào)">{{form.order.order_number}}</el-form-item></el-col><el-col :span="12"><el-form-item prop="order.business_module" label="業(yè)務(wù)單元" :label-width="formLabelWidth"><!--注意用戶的返回值-->{{form.order.business_module}}</el-form-item><!-- <el-form-item label="業(yè)務(wù)單元"><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><!--任務(wù)信息部分--><el-card shadow="hover" header="任務(wù)信息" 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><!--任務(wù)金額--><el-form-item label="任務(wù)金額">{{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="刊例價(jià)" >{{ acc.price }}</el-form-item><template v-for="(task, index) in acc.tasks"><el-form-item :label="index + 1 + '. 任務(wù)名稱'">{{task.name}}</el-form-item><el-form-item :label="index + 1 + '.發(fā)布時(shí)間'">{{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">關(guān) 閉</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";/*定義一個(gè)對(duì)象*/ 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'是鼠標(biāo)失去焦點(diǎn)的時(shí)候會(huì)觸發(fā)驗(yàn)證],client: [{ required: true, message: '客戶名稱不能為空',trigger: 'blur'}, // 'blur'是鼠標(biāo)失去焦點(diǎn)的時(shí)候會(huì)觸發(fā)驗(yàn)證],money: [{ required: true, message: '刊例價(jià)不能為空',trigger: 'blur'}, // 'blur'是鼠標(biāo)失去焦點(diǎn)的時(shí)候會(huì)觸發(fā)驗(yàn)證],order_number: [{ required: true, message: '訂單編號(hào)不能為空',trigger: 'blur'}, // 'blur'是鼠標(biāo)失去焦點(diǎn)的時(shí)候會(huì)觸發(fā)驗(yàn)證],business_module: [{ required: true, message: '業(yè)務(wù)單元不能為空',trigger: 'blur'}, // 'blur'是鼠標(biāo)失去焦點(diǎn)的時(shí)候會(huì)觸發(fā)驗(yàn)證],},},//控住按鈕狀態(tài)form: defaultForm,defaultForm: defaultForm,formLabelWidth: "160px",url: {add: "/order",edit: "/order",query: "/order"},/*存儲(chǔ)業(yè)務(wù)單元*/business_modules:[]};},/*用一個(gè)計(jì)算屬性*/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})},/*控制任務(wù)的添加功能*/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++) {/*定義一個(gè)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;}}},//判斷是否存在部門(三個(gè)參數(shù) 第一個(gè)是部門id 第二個(gè)是賬號(hào)id 第三個(gè)是傳入對(duì)象)/*判斷對(duì)象 如果里面有傳入對(duì)象 就開始遍歷 如果遍歷有對(duì)象 返回1 department_id 返回2 有accout 返回2*/isShowDepartment(department_id, account_id, list) {/*如果這個(gè)list得長度對(duì)象大于0*/if (list.length > 0) {/*循環(huán)遍歷*/for (var i = 0; i < list.length; i++) {/*如果循環(huán)遍歷得id等同于當(dāng)前得department_id*/if (list[i].id == department_id) {/*遍歷循環(huán)得到當(dāng)前得長度*/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>

?

總結(jié)

以上是生活随笔為你收集整理的工作283:抽离出新页面优化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。