vue2 element 弹窗传值 小组件

<template>
  <div class="mpks-common-views">
      <div class="mpks-search-strategy-resultintervene-content">
          <div class="mpks-common-views-content-header mpks-search-strategy-resultintervene-header">
              <div>
                  <el-button
                      type="primary"
                      icon="el-icon-plus"
                      @click="showAddItemDialog"
                  >新建知识库</el-button>
                  <el-button
                      v-if="selectedList.length > 0"
                      type="danger"
                      plain
                      @click="batchDelete"
                  >删除</el-button>
              </div>
              <!-- <div>
                  <search
                      class="mpks-search-strategy-search-input"
                      placeholder="搜索已添加干预"
                      :init-value="wd"
                      @search="search"
                  />
              </div> -->
          </div>
          <el-table
              class="mpks-search-strategy-table"
              header-cell-class-name="mpks-search-strategy-table-header"
              :data="list"
              @selection-change="changeSelection"
          >
              <!-- <p slot="empty">暂无干预</p> -->
              <table-empty slot="empty">暂无数据</table-empty>
              <el-table-column
                  label="序号"
                  width="72"
              >
                  <template slot-scope="scope">
                      <span>{{ (pageNumber - 1) * pageSize + scope.$index + 1 }}</span>
                  </template>
              </el-table-column>
              <el-table-column
                  prop="query"
                  label="库名"
              />
              <el-table-column
                  prop="interveneType"
                  label="创建人"
              />
              <el-table-column
                  label="操作"
                  width="140"
              >
                  <template slot-scope="scope">
                      <div class="mpks-common-table-row-control">
                          <el-button type="text" @click="showModifyItemDialog(scope.row)">编辑</el-button>
                          <el-popover
                              v-model="visibleList[scope.row.id]"
                              placement="bottom"
                              width="277"
                              popper-class="mpks-common-delete-popper"
                          >
                              <p>您是否确认删除该干预？删除后将无法恢复</p>
                              <div class="mpks-common-delete-popper-control">
                                  <el-button
                                      type="primary"
                                      size="mini"  
                                      @click="deleteItem(scope.row.id)"
                                  >删除</el-button>
                                  <el-button
                                      plain 
                                      size="mini"
                                      @click="cancelDeleteItem(scope.row.id)"
                                  >取消</el-button>
                              </div>
                              <el-button
                                  slot="reference"
                                  class="mpks-common-gap-left mpks-common-delete-button"
                                  type="text"
                                  @click="visibleList[scope.row.id] = true"
                              >删除</el-button>
                          </el-popover>
                      </div>
                  </template>
              </el-table-column>
          </el-table>
          <el-pagination
              v-if="totalSize > 0"
              class="mpks-common-pagination mpks-search-strategy-pagination"
              layout="sizes, prev, pager, next, jumper"
              :page-sizes="[5, 10, 15, 20, 30]"
              :current-page="pageNumber"
              :page-size="pageSize"
              :total="totalSize"
              @current-change="changePageNumber"
              @size-change="changePageSize"
          />
          <channel-dialog
              :title="modifyItemDialog.title"
              :dialog-visible.sync="modifyItemDialog.visible"
              :data="currentItem"
              @close="closeDialog"
          />
      </div>
  </div>
  </template>
  
  <script>
  import Search from '@/components/Search.vue';
  
  import ChannelDialog from './component/ChannelDialog.vue';
  
  export default {
      name: 'SearchStrategyResultIntervene',
      components: {
          Search,
          ChannelDialog
      },
      data() {
          return {
              list: [],
              totalSize: 0,
              pageNumber: +this.$route.query.pn || 1,
              pageSize: +this.$route.query.ps || 20,
              wd: this.$route.query.wd || undefined,
              currentItem: {
                  query: '',
                  list: [],
                  totalSize: 0,
                  pageNumber: 1,
                  pageSize: 20
              },
              modifyItemDialog: {
                  type: 'modify',
                  title: '',
                  visible: false
              },
              visibleList: {},
              selectedList: []
          }
      },
      watch: {
          $route() {
              this.pageNumber = +this.$route.query.pn || 1;
              this.pageSize = +this.$route.query.ps || 20;
              this.wd = this.$route.query.wd || undefined;
              this.load();
          }
      },
      mounted () {
          this.load();
          // this.$store.commit('permission/setSecondaryMenu', '/search');
      },
      methods: {
          load() {
              // this.$store.dispatch('search/getInterfereList', {
              //     wd: this.wd,
              //     pageNumber: this.pageNumber,
              //     pageSize: this.pageSize
              // }).then(res => {
              //     if (+res.errno === 0) {
              //         this.list = res.data.list;
              //         this.totalSize = res.data.totalSize;
              //     }
              //     else {
              //         this.$message.error(res.msg || '出错啦，请稍候再试。');
              //     }
              // });
          },
          search(params) {
              this.$router.push({
                  query: {
                      pn: 1,
                      ps: this.ps,
                      wd: params.value,
                      _t: new Date().getTime()
                  }
              });
          },
          changePageNumber(pn) {
              let query = Object.assign({}, this.$route.query, {
                  pn: pn
              });
              this.$router.push({
                  query
              });
          },
          changePageSize(ps) {
              let query = Object.assign({}, this.$route.query, {
                  pn: 1,
                  ps: ps
              });
              this.$router.push({
                  query
              });
          },
          showAddItemDialog() {
              this.modifyItemDialog.title = '新建知识库';
              this.modifyItemDialog.visible = true;
              this.currentItem = {
                  query: '',
                  list: [],
                  totalSize: 0,
                  pageNumber: 1,
                  pageSize: 20
              };
          },
          showModifyItemDialog(data) {
              this.modifyItemDialog.title = '编辑干预';
              this.modifyItemDialog.visible = true;
              this.currentItem = {
                  id: data.id,
                  query: data.query,
                  list: [],
                  totalSize: 0,
                  pageNumber: 1,
                  pageSize: 20
              };
          },
          deleteItem(id) {
              this.$store.dispatch('search/deleteInterfere', {
                  ids: [id]
              }).then(res => {
                  if (+res.errno === 0) {
                      this.$message.success('删除成功');
                      this.load();
                  }
                  else {
                      this.$message.error(res.msg || '出错啦，请稍候再试。');
                  }
              });
              this.cancelDeleteItem(id);
          },
          batchDelete() {
              this.$confirm('是否批量删除，此操作不能恢复。').then(() => {
                  this.$store.dispatch('search/deleteInterfere', {
                      ids: this.selectedList.map(item => item.id)
                  }).then(res => {
                      if (+res.errno === 0) {
                          this.$message.success('删除成功');
                          this.load();
                      }
                      else {
                          this.$message.error(res.msg || '出错啦，请稍候再试。');
                      }
                  });
              }).catch(() => {});
          },
          cancelDeleteItem(id) {
              this.$set(this.visibleList, id, false);
          },
          toggleSelection(rows) {
              if (rows) {
                  rows.forEach(row => {
                      this.$refs.multipleTable.toggleRowSelection(row);
                  });
              }
              else {
                  this.$refs.multipleTable.clearSelection();
              }
          },
          changeSelection(val) {
              this.selectedList = val;
          },
          closeDialog() {
              this.modifyItemDialog.visible = false
              // this.load();
          }
      }
  }
  </script>
  
  <style lang="less">
  @import (reference) "~@/common/util.less";
  /deep/.mpks-search-strategy-pagination.el-pagination {
      .el-pagination__sizes {
          .el-input--mini .el-input__inner {
              height: 32px;
              line-height: 32px;
          }
      }
      .btn-prev, .btn-next {
          width: 32px;
          height: 32px;
          text-align: center;
      }
      .el-pager {
          .number {
              min-width: 32px;
              width: 32px;
              height: 32px;
              padding: 6px;
              font-family: PingFangSC-Regular;
              font-size: 12px !important;
              color: #151B26;
              text-align: center;
              line-height: 20px;
              font-weight: 400;
          }
          
          .active {
              color: #2468F2;
              background: #FFFFFF;
              border: 1px solid #2468F2 !important;
              border-radius: 4px;
          }
      }
  }
  .mpks-search-strategy-table {
    padding: 0 20px;
      border-radius: 6px;
      .cell {
          padding: 8px 12px;
          line-height: 24px;
      }
      &-header {
          position: relative;
          height: 40px;
          padding: 0 !important;
          color: #5c5f66;
          &::after {
              position: absolute;
              left: 0;
              content: '';
              height: 100%;
              width: 1px;
              background: #fff;
          }
      }
      .el-table__expanded-cell {
          padding: 0 !important;
      }
  }
  .mpks-search-strategy-search-input {
      display: inline-block;
      width: 240px;
      .mpks-search-input-wrapper {
          height: 32px;
      }
      .mpks-search-wrapper .mpks-search-button {
          top: -2px;
      }
      .el-input__inner{
          height: 30px !important;
          border-radius: 4px;
      }
      .el-input__icon { // 解决输入框高度改变时符号不居中
          height: 40px;
          position: relative;
          top: -2px;
      }
  }
  .mpks-search-strategy-resultintervene-content {
      // height: calc(~"100vh - 136px");
      border-radius: 6px;
      background-color: #fff;
      overflow: auto;
      padding: 0!important;
  }

  .mpks-common-views{
    background: #fff;
    padding-top: 8px;
  }

  .mpks-search-strategy-resultintervene-header{
    margin-left: 20px;
    margin-top: 20px;
  }
  </style>
  <style lang="less" scoped>
  </style>
  

dialog：

<template>
  <el-dialog class="mpks-common-dialog mpks-search-strategy-resultintervene-dialog" width="650px" :title="innerTitle"
    :visible.sync="innerDialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" @opened="open"
    @close="close" @submit.native.prevent>
    <el-form ref="form" :model="currentItem" label-width="150px" :rules="formRule">
      <el-form-item label="知识库名称：" prop="query" class="mpks-common-dialog-form-item-qa">
        <el-col :span="22">
          <el-input v-model="currentItem.query" placeholder="请输入" :disabled="!!currentItem.id"
            @keyup.enter.native="search" show-word-limit clearable>
          </el-input>
        </el-col>
      </el-form-item>


    </el-form>
    <div slot="footer">
      <el-button type="primary" @click="modifyItem">确认</el-button>
      <el-button type="default" @click="innerDialogVisible = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import cloneDeep from "lodash/cloneDeep";
import { validate } from "@/common/util.js";


export default {
  name: "SearchStrategyResultInterveneDialog",
  props: {
    title: {
      type: String,
      default: "新建知识库"
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      innerTitle: this.title,
      innerDialogVisible: this.dialogVisible,
      currentItem: cloneDeep(this.data),
      formRule: {
        query: [
          {
            required: true,
            message: "问法不能为空",
            trigger: "blur"
          },
          {
            validator: validate.whitespace,
            message: "问法不能为空",
            trigger: "blur"
          },
          {
            validator: validate.length,
            max: 100,
            message: "最多100个字符",
            trigger: "change"
          }
        ]
      },
    };
  },
  watch: {
    dialogVisible: "sync"
  },
  methods: {
    modifyItem () { },
    open () {
      this.clearValidate("form");
    },
    close () {
      this.clearValidate("form");
      this.$emit("close");
    },
    clearValidate (formName) {
      this.$refs[formName] && this.$refs[formName].clearValidate();
    },
    sync (newVal) {
      console.log('newVal', newVal);

      this.innerDialogVisible = newVal;

    },
    // beforeClose(done) {
    //     this.$confirm("是否确认退出干预?", "提示", {
    //         confirmButtonText: "确定",
    //         cancelButtonText: "取消",
    //         type: "warning"
    //     }).then(() => {
    //         done();
    //     });
    // }
  }
};
</script>

<style lang="less" scoped>
.mpks-search-strategy-resultintervene-dialog {
  /deep/.el-dialog__footer {
    padding-top: 0;

    .el-button {
      width: 72px;
      margin-left: 12px;
    }
  }

  .mpks-search-strategy-resultintervene-search-button {
    margin: 0 0 0 16px;
    height: 32px;
    color: #fff;
    border-color: #2468f2;
    line-height: 10px;
    border: 1px solid #2468f2;
    border-radius: 4px;
    font-size: 14px;
    color: #2468f2;

    &:hover {
      border-color: #528eff;
      color: #528eff;
    }

    &:focus {
      border-color: #2468f2;
      color: #2468f2;
    }
  }

  .mpks-search-strategy-resultintervene-query-item-wrapper {
    border: 1px solid #f1f1f1;
    padding: 10px 0;
    margin-bottom: 20px;
    max-width: 880px;
  }

  .mpks-search-strategy-resultintervene-block {
    background: #fafafa;
    padding: 10px 15px;

    .mpks-search-strategy-resultintervene-block-title {
      font-size: 14px;
      font-weight: 600;
    }

    .mpks-search-strategy-resultintervene-block-item {
      margin: 10px 0;

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }

      .el-button {
        padding: 0;
      }
    }
  }
}

/deep/.mpks-common-dialog-form-item-qa {
  .el-input-group__append {
    padding: 0;
    height: 32px;
    background-color: #fff;
    line-height: 32px;
    border: none;
  }

  .el-input__inner {
    padding-right: 80px !important;
  }
}
</style>