Source/plt-web/plt-web-ui/src/components/PLT-basic-component/transfer.vue

@@ -2,7 +2,6 @@
  <el-dialog
    v-dialogDrag
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :title="title"
    :visible.sync="visible"
    append-to-body="true"
@@ -10,6 +9,18 @@
    style="text-align: center"
    width="50%"
    @close="dialogClose">
    <div style="margin-bottom: 20px;" v-if="topMethodsObj !== {} && topMethodsObj">
      <div>
        <span>导出方式：</span>
        <el-radio-group v-model="radio">
          <el-radio :label="0" v-if="topMethodsObj.select">选择</el-radio>
          <el-radio :label="1" v-if="topMethodsObj.all">全部</el-radio>
          <el-radio :label="2" v-if="topMethodsObj.page">页码</el-radio>
        </el-radio-group>
        <span v-if="radio === 2" style="margin-left: 20px;color: #F56C6C; ">
          <el-input v-model="pageExport" style="width: 150px"></el-input> （输入页码或者页面范围，如：1-10）</span>
      </div>
    </div>
    <el-transfer
      v-model="rightRoleData"
      v-loading="loading"
@@ -22,19 +33,32 @@
      style="text-align: left; display: inline-block;">
    </el-transfer>
    <div slot="footer" class="dialog-footer">
      <div class="valueInfo" v-if="bottomValue">已设置的值为：[{{bottomValue}}]</div>
      <el-button @click="visible = false" size="small">取 消</el-button>
      <el-button type="primary" @click="sendHandler" size="small">确 定</el-button>
      <div v-if="bottomValue" class="valueInfo">已设置的值为：[{{ bottomValue }}]</div>
      <el-button size="small" @click="visible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="sendHandler">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import func from "@/util/func";

export default {
  name: "transfer",
  props: ['title', 'leftRoleData', 'rightRoleData', 'transferTitle' , 'bottomValue'],
  props: ['title', 'leftRoleData', 'rightRoleData', 'transferTitle', 'bottomValue', 'topMethodsObj', 'selectList'],
  /**
   * topMethodsObj:{
        select:true,
        all:true,
        page:false
      },
   控制顶层选择项是否展示，需要配合selectList使用
   * @returns {object}
   */
  data() {
    return {
      radio: 0,
      pageExport: "",
      visible: false, // 通过 this.$refs.transfer.visible = true; 开启子组件对话框
      data: [],
      loading: false,
@@ -49,14 +73,15 @@
  watch: {
    //渲染穿梭框
    leftRoleData: {
      // 需要在打开穿梭框组件的时候对leftRoleData进行赋值（可以参考action管理-action列表 导出功能） 如果在data里面定义的数据，组件内watch会监听不到newVal
      handler(newval) {
        if (newval) {
          // 清空data数组
          this.data = [];
          newval.forEach((city) => {
          newval.forEach((item) => {
            this.data.push({
              label: city.name,
              key: city.oid,
              label: item.name,
              key: item.oid,
            });
          });
          this.loading = false;
@@ -74,7 +99,20 @@
      this.leftRoleData = [];
    },
    sendHandler() {
      this.$emit('transferSend', this.rightRoleData);
      if (func.isEmptyObject(this.topMethodsObj)) {
        this.$emit('transferSend', this.rightRoleData);
      } else {
        if (this.radio === 0) {
          if (this.selectList.length <= 0) {
            this.$message.warning('请选择要导出的模板')
            return
          }
          this.$emit('transferSend', this.rightRoleData, 0);
        } else if (this.radio === 1) {
          this.$emit('transferSend', this.rightRoleData, 1);
        }
      }

      this.visible = false;
    },
  }
@@ -90,7 +128,8 @@
/deep/ .el-transfer-panel__list.is-filterable {
  height: 323px; /* 穿梭框列表高度 */
}
.valueInfo{

.valueInfo {
  float: left;
  border: 1px solid #E9E7E7;
  display: inline-block;