文档章节

change事件传值方式 data-set 以及复杂数据类型 可以动态创建对象push到数组里面

o
 osc_isezqdgg
发布于 2019/09/18 15:58
字数 1560
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

<template>
  <div>
    <!-- <div class="banner">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/business/index">业务中心</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <router-link to="/business/index">内部事务</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <router-link to="/business/listmanagement">事项清单管理</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>事项清单变更</a-breadcrumb-item>
      </a-breadcrumb>
    </div>-->

    <div class="content">
      <div class="view">
        <div class="form-item-title" id="anchor-one">
          <span class="bar"></span>
          <span class="text">基本信息</span>
        </div>
        <p class="basicInfo">
          <span>发起单位 :{{infoobj.departmentname}}</span>
          <span>发起人 :{{infoobj.username}}</span>
          <span>发起时间 : {{infoobj.starttime}}</span>
          <span>当前节点 : {{infoobj.currentnode}}</span>
        </p>
        <div class="form-item-title" id="anchor-one">
          <span class="bar"></span>
          <span class="text">当前办件信息</span>
        </div>
        <a-alert :message="tyeText" type="info" showIcon />
        <div class="list">
          <ul>
            <li>
              <div class="row header">
                <span class="index">序号</span>
                <span class="name">当前事项名称</span>
                <span class="latername">调整后事项名称</span>
                <!-- <span class="operation">操作</span> -->
              </div>
            </li>
            <!-- <li class="loading" v-if="spinning">
              <a-spin :spinning="spinning"/>
            </li>-->
            <template>
              <li class="item" v-for="(item, index) in currentDoThingList" :key="index">
                <div class="row">
                  <span class="index">{{item.index}}</span>
                  <span class="name">
                    <p>主项 :{{item.currentBusiness.mainBusiness.name}}</p>
                    <p
                      v-if="item.currentBusiness.childBusiness.name==''?false:true"
                    >子项 :{{item.currentBusiness.childBusiness.name}}</p>
                    <p>事项编码 :3</p>
                  </span>
                  <span class="latername">
                    <!-- //调整后事项名称 -->
                    主项 :
                    <!-- {{item.afterBusiness.mainBusiness.name}} -->
                    <a-input
                      v-if="item.afterBusiness.mainBusiness.name==''?true:false"
                      @change="changeList"
                      style="margin-bottom: 5px;width: 60%;"
                      :data-suoyin="item.index"
                      :placeholder="item.afterBusiness.mainBusiness.name"
                    />
                    <!-- <a-input-group compact> -->
                    <!-- <a-select
                      @change="changeList3"
                      :data-suoyin="item.index"
                      v-if="item.afterBusiness.mainBusiness.name==''?false:true"
                      style="margin-bottom: 5px;width: 60%;"
                    >
                      <a-select-option
                        v-for="(item, index) in dataSource"
                        :key="index"
                        :value="item"
                      >{{item}}</a-select-option>
                      <a-select-option value="Jiangsu">Jiangsu</a-select-option>
                    </a-select>-->

                    <a-select
                      style="margin-bottom: 5px;width: 60%;"
                      @change="changeList3(item.index)"
                      v-model="selectVal[index]"
                      :data-suoyin="item.index"
                      :placeholder="item.afterBusiness.mainBusiness.name"
                      v-if="item.afterBusiness.mainBusiness.name==''?false:true"
                    >
                      <a-select-option
                        v-for="(item, index) in dataSource"
                        :key="index"
                        :value="item"
                      >{{item}}</a-select-option>
                    </a-select>

                    <!-- </a-input-group> -->
                    <br />
                    <br />
                    <span v-if="item.afterBusiness.mainBusiness.name==''?false:true">
                      子项 :
                      <a-input
                        @change="changeList1"
                        style="width: 60%;"
                        :data-suoyin="item.index"
                        :placeholder="item.afterBusiness.childBusiness.name"
                      />
                    </span>
                  </span>
                  <!-- <span class="operation">删除</span> -->
                </div>
              </li>
            </template>
          </ul>
        </div>
        <!-- //审批记录 -->
        <div v-if="HaveToDealWith==1?false:true" class="form-item-title" id="anchor-one">
          <span class="bar"></span>
          <span class="text">审批记录</span>
        </div>
        <div v-if="HaveToDealWith==1?false:true">
          <a-steps :current="1">
            <a-popover slot="progressDot" slot-scope="{index, status, prefixCls}">
              <template slot="content">
                <span>
                  经办人 : {{index}}
                  <br />
                  经办时间: {{status}}
                  <br />
                  返回理由:{{prefixCls}}
                </span>
              </template>
              <span :class="`${prefixCls}-icon-dot`"></span>
            </a-popover>
            <a-step title="提交申请" description />
            <a-step title="退回" description />
            <a-step title="提交申请" description />
            <a-step title="审核通过" description />
          </a-steps>
        </div>
        <!-- //按钮 -->
        <div v-if="aaa==1" class="button" style="marginTop:20px;">
          <a-button @click="auditPass" type="primary" style="margin-right: 15px;">提交申请</a-button>
          <a-button @click="sendBack">取消</a-button>
        </div>
      </div>
    </div>
    <!-- //对话框 -->
    <div>
      <!-- <a-button type="primary" @click="showModal">Open Modal with async logic</a-button> -->
      <a-modal
        title="审核信息确认"
        :visible="visible"
        @ok="handleOk"
        :confirmLoading="confirmLoading"
        @cancel="handleCancel"
      >
        <p>{{ModalText}}</p>
      </a-modal>
      <!-- //取消框输入信息 -->
      <a-modal
        title="取消申请提交"
        :visible="visible1"
        @ok="handleOk1"
        :confirmLoading="confirmLoading"
        @cancel="handleCancel1"
      >
        <p>
          <a-input placeholder="请填写取消建议" v-model="backinfo" />
        </p>
      </a-modal>
    </div>
  </div>
</template>
<script>
import { passOrBack, namelike, detail, resubmit } from "@/api/approvalist";
export default {
  name: "IistIndex",
  data() {
    return {
      HaveToDealWith: this.$route.params.HaveToDealWith,
      buttonShow: this.$route.params.buttonShow, //备注已办都不需要按钮 所以隐藏
      dataSource: ["q", "w", "e", "r"],
      listChange: this.$route.params.listChange,
      id: this.$route.params.id,
      isadd: 1,
      selectVal: [],
      infoobj: {
        id: "", //当前变更ID
        currentnode: "", //当前节点
        starttime: "", //发起时间
        username: "", //发起人
        departmentname: "", //发起单位
        mainbusinessnumber: "", //主项
        childbusinessnumber: "", //子项
        businessnumber: "" //主项个数
      }, //信息对象
      examineList: [], //审批记录数组
      currentDoThingList: [], //当前办件信息数组
      condition: true, //控制dislogo
      ModalText: "请确认是否通过审核",
      visible: false,
      visible1: false, //控制退回
      confirmLoading: false,
      backinfo: "", //退回信息
      aaa: this.$route.params.aaa,
      businessListBeans: [
        {
          childBusiness: {
            businessid: 0,
            code: "string",
            id: 0,
            name: "string"
          },
          mainBusiness: {
            businessid: 0,
            code: "string",
            id: 0,
            name: "string"
          }
        },  {
          childBusiness: {
            businessid: 0,
            code: "string",
            id: 0,
            name: "string"
          },
          mainBusiness: {
            businessid: 0,
            code: "string",
            id: 0,
            name: "string"
          }
        }
      ]
    };
  },
  created() {
    this.detaily();
    setTimeout(() => {
      this.namelikey();
    }, 200);
  },
  watch: {},
  methods: {
    changeList(e) {
      //输入框的回调事件  主项 的 输入框
      console.log(e.target.value, "主项");
      // console.log(this.currentDoThingList)
      this.currentDoThingList.forEach((item, index) => {
        if (e.target.dataset.suoyin == item.index) {
          this.businessListBeans[index].mainBusiness.name = e.target.value; //输入框  主项变更后的名字
          this.businessListBeans[index].mainBusiness.id = item.currentBusiness.mainBusiness.id;
          this.businessListBeans[index].mainBusiness.code = item.currentBusiness.code;
        }
      });
    },
    changeList3(e) {                               //主要下拉框 这里后台数据和返回的数据不一所以  这里也可以动态创建一个对象businessListBeans//=》push数组里面
      //这里有问题 内部需要一个判断 拿不到id 或者 index  主项的下拉框
      this.currentDoThingList.forEach((item, index) => {
        if (e - 1 == index) {
          this.businessListBeans[index].mainBusiness.name = this.selectVal[index]; //下拉框  主项变更后的名字
           console.log(index)
          console.log(this.businessListBeans,"左边")
          console.log(this.currentDoThingList,"右边")
          this.businessListBeans[index].mainBusiness.id = item.currentBusiness.mainBusiness.id;
          this.businessListBeans[index].mainBusiness.code = item.currentBusiness.mainBusiness.code;
        }
      });
    },
    changeList1(e) {
      //输入框的回调事件  子项
      // console.log(e.target.value, "子项");
      this.currentDoThingList.forEach((item, index) => {
        if (e.target.dataset.suoyin == item.index) {
          this.businessListBeans[index].childBusiness.name = e.target.value; //子项变更后的名字
          this.businessListBeans[index].childBusiness.id = item.currentBusiness.childBusiness.id;
          this.businessListBeans[index].childBusiness.code = item.currentBusiness.childBusiness.code;
        }
      });
    },
    namelikey() {
      namelike().then(res => {
        console.log(res, "根据事项名称模糊查询");
        this.dataSource = res.result;
        //  如果=当前事项名称=只有主项没有子项的话 右边的 =调整后事项名称= 也只有主项 无子项 只能手动输入
        console.log(this.currentDoThingList);
        // this.currentDoThingList.forEach(item => {
        //   if (item.childBusiness.name == "") {
        //     this.dataSource = [];
        //     return;
        //   }
        // });
      });
    },
    tyeText() {                                                             //通过函数放置字符串
      if (this.isadd) {
        var tex = `新增 ${this.infoobj.businessnumber} 项`;
      } else {
        var tex = `新增1项`;
      }
      return tex;
    },
    detaily() {
      detail(this.id).then(res => {
        console.log(res, "获取变更的申请记录详细信息");
        this.infoobj.id = res.result.id;
        this.infoobj.currentnode = res.result.currentnode;
        this.infoobj.starttime = res.result.starttime;
        this.infoobj.username = res.result.username;
        this.infoobj.departmentname = res.result.departmentname;
        this.infoobj.mainbusinessnumber = res.result.mainbusinessnumber;
        this.infoobj.childbusinessnumber = res.result.childbusinessnumber;
        this.infoobj.businessnumber = res.result.businessnumber;
        //当前办件信息数组
        res.result.businessListUpdateBeans.forEach((item, index) => {
          item.index = index + 1;
        });
        this.currentDoThingList = res.result.businessListUpdateBeans;
        // let info = [{name:'',id:''}]
        //  this.currentDoThingList.forEach(item=>{
        //    itme.name = info
        //  })
        // 审批记录数组
        // this.examineList = res.result.approvalrecords;
        // console.log(this.examineList, "0909");
      });
    },
    auditPass() {
      //审核通过
      this.showModal();
    },
    sendBack() {
      //退回
      //   passOrBack(this.id, false, "").then(res => {
      //     console.log(res);
      //   });
      this.visible1 = true;
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      //弹框的ok
      // if (this.resubmitVo.length == 0) {
      //   this.$notification.open({
      //     message: "提交失败",
      //     description: "表单内容为空,请重新尝试",
      //     onClick: () => {
      //       console.log("提交失败");
      //     }
      //   });
      //   return;
      // }
      // if (this.isCL == 101) {
      //   this.XZadd = 1;
      // } else if (this.isCL == 102) {
      //   console.log("撤销");
      //   this.XZadd = 2;
      // }
      // resubmit(this.resubmitVo, this.XZadd, this.recordid).then(res => {
      //   if (res.code == "form_valid_failed") {
      //     this.$notification.open({
      //       message: "提交失败",
      //       description: "表单内容重复,请重新尝试",
      //       onClick: () => {
      //         console.log("提交失败");
      //       }
      //     });
      //   }
      //   console.log(
      //     this.resubmitVo,
      //     this.XZadd,
      //     this.recordid,
      //     "这里看完成后的数据"
      //   );
      //   console.log(res, "更改成功");
      // });
      // this.$router.push({ name: "listrecord" });
      resubmit(this.businessListBeans, 3, this.id).then(res => {
        console.log(res, "结果集");
      });
    },
    handleCancel(e) {
      //弹框的取消
      console.log("审核未通过");
      this.visible = false;
    },
    //退回
    handleOk1(e) {
      //弹框的退回
      passOrBack(this.id, true, this.backinfo).then(res => {
        // console.log(res);
        this.ModalText = "退回成功";
        this.confirmLoading = true;
        setTimeout(() => {
          this.visible1 = false;
          this.confirmLoading = false;
        }, 2000);
      });
      this.$router.push({ name: "listrecord" });
    },
    handleCancel1(e) {
      //弹框的取消
      //   console.log("退回未通过");
      this.visible1 = false;
    }
  }
};
</script>
<style lang="less" scoped>
.banner {
  width: 100%;
  padding: 24px;
  background: #fff;
}
.content {
  padding: 0px 12px;
  .view {
    margin-top: 12px;
    padding: 24px 24px;
    overflow: hidden;
    justify-content: left;
    background: #fff;
    .statistics {
      padding: 5px;
      display: flex;
      align-items: center;
      background-color: #e9f7fa;
      border-radius: 2px;
      border: solid 2px #0f6ddc;
      p {
        margin-bottom: 0;
      }
      span {
        color: #0f6ddc;
      }
    }
  }
}
.list {
  width: 100%;
  margin-top: 24px;
  ul {
    margin: 0px;
    padding: 0px;
    li {
      height: 42px;
      transition: ease-out 0.3s all;
      list-style: none;
      &.active {
        height: auto;
      }
      &.loading {
        text-align: center;
        padding: 30px;
      }
      .row {
        width: 100%;
        height: 42px;
        line-height: 42px;
        display: flex;
        // justify-content: space-between;
        color: #171717;
        border-bottom: 1px solid #f3f3f3;
        &:hover {
          background: #f3f3f3;
          cursor: pointer;
        }
        &.header {
          font-size: 15px;
          color: #595959;
          background: #f6f6f6;
          .release {
            color: #595959;
          }
        }
        span {
          &.name {
            width: 40%;
          }
          &.latername {
            width: 40%;
          }
          &.index {
            width: 10%;
            padding-left: 15px;
          }
          &.operation {
            width: 10%;
          }
        }
      }
    }
  }
}
.item {
  height: 90px !important;
  .row {
    height: 90px !important;
    line-height: 15px !important;
    display: flex;
    align-items: center;
  }
  p {
    margin-bottom: 8px;
  }
  .operation {
    padding-left: 15px;
    color: #0f6ddc;
  }
}
.plus {
  margin: 20px 0;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: dashed 1px #c6c6c6;
  &:hover {
    border: dashed 1px #0f6ddc;
    color: #0f6ddc;
    cursor: pointer;
  }
}
.form-item-title {
  margin-top: 20px;
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  span {
    &.bar {
      width: 3px;
      height: 15px;
      background: #1890ff;
    }
    &.text {
      font-size: 16px;
      color: #1890ff;
      margin-left: 10px;
    }
  }
}
// .basicInfo {
//   span:nth-of-type(1) {
//     margin-right: 150px;
//   }
//   span:nth-of-type(2) {
//     margin-right: 150px;
//   }
//   span:nth-of-type(3) {
//     margin-right: 150px;
//   }
// }
</style>
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
vue总结

一、vue实例的基本结构 二、vue事件处理、绑定属性 三、vue指令、自定义指令 四、vue过滤器 五、vue数据监听 六、vue组件 七、vue-router 八、axios 一、Vue 实例的基本结构 Vue官网API 二、...

Hzzzzzzzzz
2019/08/07
0
0
2019前端基础面试秘籍

77777777777777777777777777777777777777777777777777777777777777777777777777 一、html和css部分 1、如何理解CSS的盒子模型? 2、BFC? 3、如何清除浮动? 4、用纯CSS创建一个三角形的原理...

A Loity
2019/04/26
0
0
Vue的使用总结(1)

1、将某个对象赋值给vue实例中的data属性时是浅拷贝 var obj= { a: 1 }var vm = new Vue({data: obj})obj.a = 2;console.log(vm.a) //2 2、vue上的字段:computed、method、watch 2.1、计算属...

osc_rhdix0z9
2019/02/26
2
0
2020 前端面试题上 vue篇

没有特别的幸运,那么就特别的努力!!! 2020 前端面试题上 vue篇 vue篇 vue 双向绑定原理 v-model 的原理 scoped样式穿透 组件之间的传值通信 axios拦截器怎么配 自定义指令 vuex compute...

osc_kpudfkjk
06/28
13
0
2020 前端面试题上 vue篇

没有特别的幸运,那么就特别的努力!!! 2020 前端面试题上 vue篇 vue篇 vue 双向绑定原理 v-model 的原理 scoped样式穿透 组件之间的传值通信 axios拦截器怎么配 自定义指令 vuex compute...

hammer1010
06/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

智慧旅游背景下的景区新模式建设方案研讨

景区经营权管理方法实践、县域旅游基本模式以及智慧旅游一直是业内探究的关键。学术界对景区经营权出让探究比较多,如阎友兵探究了根据实物期权基础理论的景区经营权出让期限制度分配;郭淳凡...

osc_rezr8v4k
27分钟前
11
0
详解区块链是什么!KiBiEx加密货币交易所~

区块链是一个信息技术领域的术语。从本质上讲,它是一个共享数据库,存储于其中的数据或信息,具有“不可伪造”“全程留痕”“可以追溯”“公开透明”“集体维护”等特征。基于这些特征,区块...

osc_3361hjxk
28分钟前
11
0
详解区块链是什么!KiBiEx加密货币交易所~

区块链是一个信息技术领域的术语。从本质上讲,它是一个共享数据库,存储于其中的数据或信息,具有“不可伪造”“全程留痕”“可以追溯”“公开透明”“集体维护”等特征。基于这些特征,区块...

osc_3ytpwpyb
30分钟前
12
0
详解区块链是什么!KiBiEx加密货币交易所~

区块链是一个信息技术领域的术语。从本质上讲,它是一个共享数据库,存储于其中的数据或信息,具有“不可伪造”“全程留痕”“可以追溯”“公开透明”“集体维护”等特征。基于这些特征,区块...

osc_x4ot1joy
32分钟前
9
0
如何强制gradle重新下载依赖项? - How can I force gradle to redownload dependencies?

问题: 如何告诉gradle从存储库重新下载依赖项? 解决方案: 参考一: https://stackoom.com/question/uute/如何强制gradle重新下载依赖项 参考二: https://oldbug.net/q/uute/How-can-I-fo...

fyin1314
35分钟前
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部