vue表格数据联动

<template>
  <div class="title">
    <div class="oneRow">
      <Select
        v-model="defaultYear"
        style="width: 98px; height: 32px; background: #ffffff"
        @on-change="changeSelect"
      >
        <Option
          v-for="item in cityList"
          :value="item.flow_year + ''"
          :key="item.flow_year"
          >{{ item.flow_year }}</Option
        >
      </Select>

      <div class="oneRowTitle">{{ getChildYear }}年全产品销售额情况</div>

      <!-- <Space wrap style="margin-left: 1%;">
            <Button type="primary">筛选产品</Button>
      </Space>-->
      <div style="width: 98px; height: 32px; background: #ffffff"></div>
    </div>
    <div class="line"></div>
    <div class="oneRowData">
      <div style="width: 113px"></div>
      <div class="oneRowDataText">
        <div class="oneRowOne">年销售额:</div>
        &nbsp;
        <div class="oneRowTwo">{{ yearSale }}</div>
        &nbsp; &nbsp;
        <div class="oneRowOne">年同比:</div>
        &nbsp;
        <div class="oneRowTwo">{{ yearRate }}％</div>
        <img  v-if="isShowDown" class="redDownPic" :src="redDown" key="redDown"/>
        <img  v-if="!isShowDown" class="redDownPic" :src="greenUp" key="greenUp"/>

      </div>
      <div class="oneRowButton">
        <img
          @click="modal3 = true"
          class="downPic"
          :src="ic_arrow_down"
          key="ic_arrow_down"
        />
        &nbsp;
        <div class="oneRowText" @click="showModal">筛选产品</div>

        <div class="test">
          <Modal
            v-model="modal3"
            title="筛选产品"
            width="820px"
            footer-hide
            ok-text="OK"
            cancel-text="Cancel"
          >
            <template>
              <div>
                <Row>
                  <Col span="24">
                    <Card :bordered="false" dis-hover>
                      <Breadcrumb>
                        <!-- <BreadcrumbItem>学术平台明细</BreadcrumbItem> -->
                        <!-- <BreadcrumbItem to="/newMedical/newMedicalListForYxb">学术平台明细</BreadcrumbItem> -->
                      </Breadcrumb>
                      <Row style="margin-left: 1px">
                        <Form ref="parameter" :label-width="60" inline>
                          <FormItem label="产品名称">
                            <Input
                              v-model="product"
                              placeholder="请输入产品名称"
                              search
                              @on-search="searchProductList"
                            ></Input>
                            <input type="text" style="display: none" />
                          </FormItem>
                          <Button
                            style="margin-left: 2px"
                            @click="searchProductList"
                            >查询</Button
                          >
                          <Button
                            @click="showTag"
                            type="primary"
                            style="margin-left: 10px"
                            >确定</Button
                          >
                        </Form>
                      </Row>

                      <Row>
                        <!-- <Table border :columns="columns" :data="list" stripe :loading="loading" disabled-hover></Table> -->

                        <Table
                          class="table"
                          height="252"
                          :columns="columns1"
                          border
                          :data="data1"
                          ref="selection"
                          @on-select="selectTable"
                          @on-select-cancel="selectTableCancle"
                        ></Table>
                        <div>
                          <Tag
                            v-for="item in items"
                            :key="item.medicineno"
                            :name="item.medicineno"
                            closable
                            @on-close="handleClose2"
                            >{{ item.medicinename }}</Tag
                          >
                        </div>
                      </Row>
                    </Card>
                  </Col>
                </Row>
                <!--
                          <Row style="margin-top:0px">
                            <Col span="24">
                              <Card :bordered="false" dis-hover>
                                <Row>


                                  <Table height="200" stripe :columns="columns1" border :data="data1" ref="selection" @on-selection-change="selectChange"></Table>
                                  <div> <Tag v-for="item in items" :key="item.id" :name="item.id" closable @on-close="handleClose2">{{item.name}}</Tag></div>
                                </Row>


                              </Card>
                            </Col>
                </Row>-->
              </div>
            </template>
          </Modal>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ic_arrow_down from "@/assets/images/home/ic_arrow_down.png";
import redDown from "@/assets/images/home/redDown.png";
import greenUp from "@/assets/images/home/greenUp.png";
import { getAllProductSaleAnalysis, getSelectProducts } from "@/api/home";
export default {
  name: "developStatus",
  components: {},
  // props: ['yearSales','yearPercentage'],
  data() {
    return {
      isShowDown:false,
      deptNos: localStorage.getItem("deptNoSons"),
      selectProduct:'',
      defaultYear: "2022",
      yearSale: "0",
      yearRate: "0",
      product: "",
      params: null,
      getChildYear: "2022",
      selectList: [],
      isshow: false,
      ic_arrow_down,
      redDown,
      greenUp,
      cityList: [],
      model777: "12",
      modal3: false,
      columns1: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "产品名称",
          key: "medicinename",
          align: "center",
          width: 678,
        },
      ],
      count: [],
      data1: [
        {
          name: "John Brown",
          id: 1,
        },
        {
          name: "Jim Green",
          id: 2,
        },
        {
          name: "Joe Black",
          id: 3,
        },
        {
          name: "Jon Snow",
          id: 4,
        },
        {
          name: "John Brown",
          id: 5,
        },
        {
          name: "Jim Green",
          id: 6,
        },
        {
          name: "Joe Black",
          id: 7,
        },
        {
          name: "Jon Snow",
          id: 8,
        },
        {
          name: "John Brown",
          id: 9,
        },
        {
          name: "Jim Green",
          id: 10,
        },
        {
          name: "Joe Black",
          id: 11,
        },
      ],
      items: [],
      newList: [],
    };
  },

  mounted() {
    this.getParams();
    //获取当前的年份
    var date = new Date();
    var year = date.getFullYear();
    //获取type
    var param = this.params;
    //获取部门
     var deptNos = localStorage.getItem("deptNoSons");
      if (this.$store.state.user.currentItem!="") {
        let item = JSON.parse(this.$store.state.user.currentItem)
        if(item.type =='3'){
          deptNos="'"+this.$route.query.no+"'"
        }
      }

    getAllProductSaleAnalysis(year, param, deptNos,this.selectProduct).then((res) => {
      if (res.data.code === "0000" ) {
        if (res.data.data.yearSale!="-") {
          var num = Number(res.data.data.yearSale);
          if (num == 0) {
            this.yearSale = num + "";
          } else if (num > 1 && num < 10000) {
            this.yearSale = num.toFixed(2)+'元';
          } else {
            this.yearSale = (num / 10000).toFixed(2) + "万元";
          }
        }else{
          this.yearSale=res.data.data.yearSale
        }

        // this.yearSale = res.data.data.yearSale;
        this.yearRate = res.data.data.yearRate;
        if (res.data.data.yearRate<0) {
            this.isShowDown=true
        }else{
            this.isShowDown=false
        }
        this.cityList = res.data.data.selectYears;
        }

    });

    //获取产品
    var searchProduct = this.product;
    getSelectProducts(searchProduct, deptNos, param).then((res) => {
      if (res.data.code === "0000" ) {
        //获取产品的时候所有的产品为false
        var obj = [];
        var b = res.data.data.dataList; //新数组
        for (var j = 0; j < b.length; j++) {
          //拿到匹配到的对象，给他们添加选中状态
          b[j]._checked = false;
          obj.push(b[j]);
        }

        this.data1 = obj;
        this.data1_copy = obj;
       }
    });
  },

  activated() {},

  methods: {
    searchProductList() {
    //获取部门
     var deptNos = localStorage.getItem("deptNoSons");
      if (this.$store.state.user.currentItem!="") {
        let item = JSON.parse(this.$store.state.user.currentItem)
        if(item.type =='3'){
          deptNos="'"+this.$route.query.no+"'"
        }
      }

      //获取type
      var param = this.params;
      //搜索产品
      var searchProduct = this.product;

      getSelectProducts(searchProduct,deptNos, param).then((res) => {

        //找出相同的内容
        var obj = [];
        var a = this.items; //原数组
        var b = res.data.data.dataList; //新数组
        for (var i = 0; i < a.length; i++) {
          for (var j = 0; j < b.length; j++) {
            if (a[i].medicinename == b[j].medicinename) {
              //拿到匹配到的对象，给他们添加选中状态
              a[i]._checked = true;
              obj.push(a[i]);
            }
            // else {
            //   a[i]._checked = false;
            //   obj.push(a[i]);
            // }
          }
        }

        //如果搜索的是所有，再把所有中匹配到的保持勾选
        for (var x = 0; x < a.length; x++) {
          for (var y = 0; y < b.length; y++) {
            if (a[x].medicinename == b[y].medicinename) {
              //拿到匹配到的对象，给他们添加选中状态
              b[y]._checked = true;
              // obj.push(a[i]);
            }
          }
        }

        this.data1 = b;
      });
    },
    getParams() {
      this.params = this.$route.query;
    },
    // 控制显示隐藏
    showModal() {
      this.modal3 = true;
    },

    // 控制显示隐藏
    showTag() {
      this.$emit("message", this.items);
      this.modal3 = false;
      var year =this.getChildYear;
      //获取type
      var param = this.params;
      //获取部门
     var deptNos = localStorage.getItem("deptNoSons");
      if (this.$store.state.user.currentItem!="") {
        let item = JSON.parse(this.$store.state.user.currentItem)
        if(item.type =='3'){
          deptNos="'"+this.$route.query.no+"'"
        }
      }
      var selectProduct="";
      for(var i=0;i<this.items.length;i++){
        selectProduct+="'"+this.items[i].medicineno+"'"+","
      }
      //去掉最后一个逗号(如果不需要去掉，就不用写)
      if (selectProduct.length > 0) {
          selectProduct = selectProduct.substr(0, selectProduct.length - 1);
      }

      getAllProductSaleAnalysis(year, param, deptNos,selectProduct).then((res) => {
        if (res.data.code === "0000" ) {
          if (res.data.data.yearSale!="-") {
            var num = Number(res.data.data.yearSale);
            if (num == 0) {
              this.yearSale = num + "";
            } else if (num > 1 && num < 10000) {
              this.yearSale = num.toFixed(2)+'元';
            } else {
              this.yearSale = (num / 10000).toFixed(2) + "万元";
            }
          }else{
            this.yearSale=res.data.data.yearSale
          }
          if (res.data.data.yearRate<0) {
              this.isShowDown=true
          }else{
              this.isShowDown=false
          }
          // this.yearSale = res.data.data.yearSale;
          this.yearRate = res.data.data.yearRate;
          this.cityList = res.data.data.selectYears;
          }
      });

    },

    selectTable(selection, row) {
      var dataList = this.newList;
      //把选中行的check制成true
      var allData = this.data1;
      //先把当前选中的表格中的check设置成true
      for (var y = 0; y < allData.length; y++) {
        if (row.medicinename == allData[y].medicinename) {
          //拿到匹配到的对象，给他们添加选中状态
          allData[y]._checked = true;
        }
      }
      this.items.push(row);
    },

    selectTableCancle(selection, row) {
      //把选中行的check制成false
      var allData = this.data1;
      //先把当前选中的表格中的check设置成true
      for (var y = 0; y < allData.length; y++) {
        if (row.medicinename == allData[y].medicinename) {
          //拿到匹配到的对象，给他们添加选中状态
          allData[y]._checked = false;
        }
      }
      var list = this.items;
      for (var i = 0; i < list.length; i++) {
        if (list[i].medicinename == row.medicinename) {
          list.splice(i, 1);
          // i--; //不减减不行，list元素在减少
        }
      }

      // this.items = selection;
    },


    removalDuplicate(dataList, byName) {
      var result = [];
      var tem = {};
      for (var i = 0; i < dataList.length; i++) {
        if (!tem[dataList[i][byName]]) {
          result.push(dataList[i]);
          tem[dataList[i][byName]] = 1;
        }
      }
      return result;
    },

    handleClose2(event, name) {
      //先拿到目前列表上存在的产品删除
      var b = this.data1; //新数组
      for (var i = 0; i < b.length; i++) {
        //把匹配到的在列表中删除
        if (name == b[i].medicineno) {
          b[i]._checked = false;
        }
      }
      this.data1 = JSON.parse(JSON.stringify(b));
      // this.data1 = b;
      //在拿到已经勾选存在的产品删除
      var arr = this.items;
      arr.splice(
        arr.findIndex((item) => item.medicineno === name),
        1
      );

    },

    // 年份下拉框
    changeSelect(e) {
      this.getChildYear = e;
      this.$emit("success", e);

      for (var j = 0; j < this.data1.length; j++) {
          this.data1[j]._checked = false;
      }
      this.items=[]

      var year = e;
      //获取type
      var param = this.params;
      //获取部门
     var deptNos = localStorage.getItem("deptNoSons");
      if (this.$store.state.user.currentItem!="") {
        let item = JSON.parse(this.$store.state.user.currentItem)
        if(item.type =='3'){
          deptNos="'"+this.$route.query.no+"'"
        }
      }
      //切换年份产品清空
      var selectProduct="";
      getAllProductSaleAnalysis(year, param, deptNos,selectProduct).then((res) => {
        if (res.data.code === "0000" ) {
          if (res.data.data.yearSale!="-") {
            var num = Number(res.data.data.yearSale);
            if (num == 0) {
              this.yearSale = num + "";
            } else if (num > 1 && num < 10000) {
              this.yearSale = num.toFixed(2)+'元';
            } else {
              this.yearSale = (num / 10000).toFixed(2) + "万元";
            }
          }else{
            this.yearSale=res.data.data.yearSale
          }
          if (res.data.data.yearRate<0) {
              this.isShowDown=true
          }else{
              this.isShowDown=false
          }
          // this.yearSale = res.data.data.yearSale;
          this.yearRate = res.data.data.yearRate;
          this.cityList = res.data.data.selectYears;
          }
      });
    },
  },
};
</script>
<style lang="less">
.title {
}
.oneRow {
  display: flex;
  height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  .oneRowTitle {
    height: 26px;
    font-family: MicrosoftYaHei-Bold;
    font-weight: Bold;
    font-size: 20px;
    color: #262626;
    letter-spacing: 0;
    text-align: center;
    line-height: 26px;
  }
}
.line {
  // width: 1660px;
  height: 1px;
  background: #e5e5e5;
}
.oneRowData {
  display: flex;
  height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  .oneRowDataText {
    display: flex;
    height: 72px;
    align-items: center;
    justify-content: center;
  }
  .oneRowOne {
    // width: 69px;
    height: 16px;
    opacity: 0.6;
    font-family: MicrosoftYaHei-Bold;
    font-weight: Bold;
    font-size: 16px;
    color: #262626;
    letter-spacing: 0;
    line-height: 16px;
  }
  .oneRowTwo {
    // width: 96px;
    height: 16px;
    font-family: MicrosoftYaHei-Bold;
    font-weight: Bold;
    font-size: 16px;
    color: #262626;
    letter-spacing: 0;
    line-height: 16px;
  }
}

.oneRowOne {
  display: flex;
  height: 72px;
  align-items: center;
  justify-content: space-between;
  .oneRowOneTitle {
    height: 26px;
    font-family: MicrosoftYaHei-Bold;
    font-weight: Bold;
    font-size: 20px;
    color: #262626;
    letter-spacing: 0;
    text-align: center;
    line-height: 26px;
  }
}
.count-style {
  font-size: 50px;
}

.redDownPic{
  width: 16px;
  height: 16px;
}
.oneRowButton {
  display: flex;
  width: 96px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  .downPic {
    cursor: pointer;
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0);
  }
  .oneRowText {
    cursor: pointer;
    width: 56px;
    height: 20px;
    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: #386fff;
    letter-spacing: 0;
    line-height: 20px;
  }
}

.remarks {
  // width: 1600px;
  height: 96px;
  background: #f5f6f7;
  border-radius: 4px;
  .remarks-content {
    display: flex;
    flex-direction: column;
    padding: 1%;
    .remarks-content-one {
      display: flex;
    }
    .remarks-content-two {
      // width: 1564px;
      // height: 38px;
      font-family: MicrosoftYaHei-Bold;
      font-weight: Bold;
      font-size: 12px;
      color: #8c8c8c;
      letter-spacing: 0;
      line-height: 18px;
    }
  }
}
.test {
}
// 弹窗样式自定义，自定义后全局会都变化
// .ivu-modal-content {
//   position: relative;
//   background-color: #fff;
//   border: 0;
//   border-radius: 6px;
//   background-clip: padding-box;
//   // -webkit-box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
//   // box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
//   border-radius: 8px 8px 8px 8px;
// }

// .ivu-modal-header {
//   display: flex;
//   align-items: center;
//   border-bottom: 1px solid #e8eaec;
//   // padding: 14px 16px;
//   // line-height: 1;
//   width: 821px;
//   height: 72px;
//   background: #386fff;
//   border-radius: 8px 8px 0 0;
// }
// .ivu-modal-header-inner {
//   display: inline-block;
//   width: 100%;
//   height: 20px;
//   line-height: 20px;
//   font-size: 14px;
//   // color: #17233d;
//   // font-weight: bold;
//   overflow: hidden;
//   text-overflow: ellipsis;
//   white-space: nowrap;

//   font-family: MicrosoftYaHei-Bold;
//   font-weight: Bold;
//   font-size: 16px;
//   color: #ffffff;
//   letter-spacing: 0;
//   text-align: center;
//   line-height: 16px;
// }
// .ivu-modal-close .ivu-icon-ios-close {
//   font-size: 31px;
//   // color: #999;
//   color: #ffffff;
//   -webkit-transition: color 0.2s ease;
//   transition: color 0.2s ease;
//   position: relative;
//   top: 1px;
// }
// 此处样式隐藏全选按钮
.table {
  .ivu-modal-header {
    border-bottom: 1px solid #e8eaec;
    padding: 14px 16px;
    line-height: 1;
  }
  th .ivu-table-cell-with-selection {
    position: relative;
  }
  th .ivu-table-cell-with-selection::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #f8f8f9;
    z-index: 99;
  }
}
</style>