前端工作总结284-抽离出新页面优化

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