hi-ucs/back/src/views/modules/ability/components/combine-ability.vue

<template>
    <div class="ability-box">
        <div class="top">
            <div class="type">{{ type }}</div>
            <el-button type="primary" size="small" @click="clickOpen">添加</el-button>
        </div>

        <el-dialog :visible.sync="showModal" title="请选择" @close="close" :close-on-click-modal="false"
            :close-on-press-escape="false" :key="showKey" append-to-body>
            <div class="relate-application-content" v-if="type==='组件服务'">
              <el-transfer v-model="selectedArray" filterable :filter-method="filterMethod" filter-placeholder="请输入名称"
                  :titles="nameArray" :props="{
                      key: 'id',
                      label: 'name',
                  }" :data="transferData">
              </el-transfer>
            </div>
            <div v-else-if="type==='数据资源'"  class="dataTransfer">
              <el-transfer v-model="selectedArray" filter-placeholder="请输入名称"
                    :titles="nameArray" :props="{
                        key: 'id',
                        label: 'name',
                    }" :data="transferData">
                </el-transfer>
                <el-input
                  v-model="searchValue"
                  placeholder="请输入名称"
                ></el-input>
                <el-button @click="rest" class="restClick">重置</el-button>
            </div>
            <el-pagination
              v-if="type==='数据资源'"
              :current-page="currentPage"
              :page-size="15"
              layout="total, prev, pager, next"
              :total="total"
              @current-change="pageCurrentChangeHandle"
            >
            </el-pagination>
            <template slot="footer">
                <el-button @click="showModal = false">{{ $t("cancel") }}</el-button>
                <el-button type="primary" @click="confirmSubmitHandle()">{{
                        $t("confirm")
                }}</el-button>
            </template>
        </el-dialog>

        <DisplayList :displayList="displayList" showKey="name"></DisplayList>
    </div>
</template>

<script>
import InfrastructureModal from '../assignedScene/components/infrastructure-modal.vue'
import DisplayList from '../assignedScene/components/display-list.vue'

const sjzyArray = [
  {
    zyname: '城阳区图书馆总分馆、社区图书室明细信息',
    sjcczl: 0.02,
    zycode: '307013110716000007',
    ygxjghjls: 0,
    jghxxjlzs: 0,
    neibukeshi: '',
    xgxt: '城阳区图书馆及总分馆、社区图书室明细信息',
    ygxdsjccl: 0,
    zygszl: 'et',
    ykfjghjls: 0,
    syqk: 0,
    zyformat: '电子表格',
    guid: '277c51e0-066b-441d-9262-6e53ce6fc99a',
    TGBM: '城阳区文化和旅游局',
    ykfdsjccl: 0
  },
  {
    zyname: '2021年度西海岸新区科技型中小企业名单信息',
    sjcczl: 0,
    zycode: '307013109000000010',
    ygxjghjls: 0,
    jghxxjlzs: 0,
    neibukeshi: '高新技术科',
    xgxt: '2021年度西海岸新区科技型中小企业名单信息，企业名称，入库编号。',
    ygxdsjccl: 0,
    zygszl: 'access',
    ykfjghjls: 0,
    syqk: 0,
    zyformat: '数据库',
    guid: '6ed1a478-443a-48ee-8af0-4c7ac2681a94',
    TGBM: '青岛西海岸新区工业和信息化局（区科技局、区大数据局）',
    ykfdsjccl: 0
  },
  {
    zyname: '西海岸新区高新技术企业名单信息',
    sjcczl: 0,
    zycode: '307013109000000012',
    ygxjghjls: 0,
    jghxxjlzs: 0,
    neibukeshi: '高新技术科',
    xgxt: '西海岸新区高新技术企业名单信息',
    ygxdsjccl: 0,
    zygszl: 'access',
    ykfjghjls: 0,
    syqk: 0,
    zyformat: '数据库',
    guid: '770a9127-e7fd-4a6b-ba17-c80cf06ab670',
    TGBM: '青岛西海岸新区工业和信息化局（区科技局、区大数据局）',
    ykfdsjccl: 0
  },
  {
    zyname: '西海岸新区高新技术企业认定补助名单信息',
    sjcczl: 0,
    zycode: '307013109000000011',
    ygxjghjls: 0,
    jghxxjlzs: 0,
    neibukeshi: '高新技术科',
    xgxt: '西海岸新区高新技术企业认定补助名单信息，企业名称、扶持项目。',
    ygxdsjccl: 0,
    zygszl: 'access',
    ykfjghjls: 0,
    syqk: 0,
    zyformat: '数据库',
    guid: 'ae52c5f8-ef6e-4ae9-a657-79dcb6f65643',
    TGBM: '青岛西海岸新区工业和信息化局（区科技局、区大数据局）',
    ykfdsjccl: 0
  },
  {
    zyname: '青岛西海岸新区第六批区级非物质文化遗产代表性项目名录',
    sjcczl: 0,
    zycode: '307013109026000037',
    ygxjghjls: 0,
    jghxxjlzs: 0,
    neibukeshi: '艺术科',
    xgxt: '青岛西海岸新区第六批区级非物质文化遗产代表性项目名录，如项目类别、序号、项目名称、申报单位',
    ygxdsjccl: 0,
    zygszl: 'et',
    ykfjghjls: 0,
    syqk: 0,
    zyformat: '电子表格',
    guid: '6d80a3b1-744e-4292-a904-0168d640b1fc',
    TGBM: '青岛西海岸新区文化和旅游局（区新闻出版广电局、区文物局）',
    ykfdsjccl: 0
  }
]

const res = {
  code: 0,
  msg: 'success',
  data: {
    PageCount: '2115',
    data: sjzyArray,
    rows: '10573'
  }
}

const keyObj = {
  "数据资源": {
    idKey: 'id',
    nameKey: 'name'
  },
  "组件服务": {
    idKey: 'id',
    nameKey: 'name'
  }
}

export default {
  props: {
    type: {
      type: String,
      default: ''
    },
    nameArray: {
      type: Array,
      default: () => ['未选择名称', '已选择名称']
    },
    // 最多选择的数据个数
    maxNum: {
      type: Number,
      default: 10
    },
    getDataParams: {
      type: Object,
      default: () => {
        return {
          methods: 'get',
          url: '',
          postData: {}
        }
      }
    }
  },
  data () {
    return {
      showKey: 0,
      showModal: false,
      transferData: [],
      selectedArray: [],
      allData: [],
      displayList: [], // 用于展示的list
      total: 0,
      currentPage: 1,
      newNum: 1,
      searchValue: ''
    }
  },
  watch: {
    showModal (newVal) {
      if (newVal) {
        this.getData()
      }
    },
    newNum (newVal) {
      if (newVal) {
        this.getDataParams.postData.pageNum = newVal
        this.getData()
      }
    },
    searchValue (newVal) {
      if (newVal) {
        this.getDataParams.postData.serviceName = newVal
        this.getData()
      }
    }
  },
  methods: {
    async getDataInfo (dataForm) {
      await this.getData()
      const arr = []
      const attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type)
      if (attrValue.length > 0) {
        attrValue.map(val => {
          const _obj = {
            type: val.type,
            id: val.resourceId,
            name: val.resource && val.resource.name
          }
          arr.push(_obj)
        })
      }

      // 展示
      this.displayList = JSON.parse(JSON.stringify(arr))
      // 已选中
      this.selectedArray = arr.map(v => v.id)
      this.$nextTick(() => {
        console.log(999, this.displayList)
      })
    },
    // 获取列表
    getData () {
      if (this.getDataParams.url === '') {
        return
      }
      if (this.type === '组件服务') {
        this.$http[this.getDataParams.methods](this.getDataParams.url, {
          params: this.getDataParams.postData
        }).then(res => {
          console.log('res.data----获取列表-------->', res.data)
          if (res.data.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.transferData = []
          this.allData = [];
          (res.data.data || []).map(v => {
            this.transferData.push({
              type: this.type,
              id: v[keyObj[this.type].idKey],
              name: v[keyObj[this.type].nameKey] || '--'
            })
          })
          this.allData = JSON.parse(JSON.stringify(this.transferData))
          console.log(this.allData, 'this.transferData')
        }).catch(err => {
          this.$message.error(err)
        })
      } else if (this.type === '数据资源') {
        this.getDataParams.postData.pageNum = this.newNum
        this.$http[this.getDataParams.methods](this.getDataParams.url,
          this.getDataParams.postData
        ).then(res => {
          console.log('res.data----获取列表-------->', res.data)
          this.total = Number(res.data.data.rows)
          if (res.data.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.transferData = []
          this.allData = [];
          (res.data.data.data || []).map(v => {
            this.transferData.push({
              type: this.type,
              id: v.guid,
              name: v.zyname || '--'
            })
          })
          this.allData = JSON.parse(JSON.stringify(this.transferData))
        }).catch(err => {
          this.$message.error(err)
        })
      }
    },
    filterMethod (query, item) {
      console.log('1111111111111111111111111')
      return item.name && item.name.indexOf(query) > -1
    },
    confirmSubmitHandle () {
      if (this.selectedArray.length > this.maxNum) {
        return this.$message.error('最多选择十条数据！')
      }
      this.showModal = false
      this.displayList = []
      this.allData.map(v => {
        if (this.selectedArray.includes(v.id)) {
          this.displayList.push(v)
        }
      })
      this.$emit('update', {
        title: this.type,
        list: this.selectedArray
      })
    },
    getDisplay (displayList) {
      this.displayList = []
      this.displayList = displayList
    },
    close () {
      this.showModal = false
      // this.selectedArray = []
      this.allData = []
      this.transferData = []
    },
    pageCurrentChangeHandle (val) {
      console.log(this.newNum, val, 'wowowo')
      this.newNum = val
    },
    clickOpen () {
      this.searchValue = ''
      this.getDataParams.postData.serviceName = ''
      this.currentPage = 1
      this.showModal = true
      this.getData()
    },
    rest () {
      this.currentPage = 1
      this.searchValue = ''
      this.getDataParams.postData.serviceName = ''
      this.getData()
    }
  },
  components: { InfrastructureModal, DisplayList },
  mounted () {
    console.log(this.type, 'this.type')
  }
}
</script>
<style lang="scss" scoped>
.ability-box {
  margin-bottom: 10px;

  .show-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .type {
    padding-right: 12px;
    font-size: 14px;
    color: #606266;
    width: 100px;
    box-sizing: border-box;
    text-align: right;
    line-height: 40px;
    height: 40px;
  }

  .list-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: 100px;
  }

  .list-item {
    font-size: 14px;
    color: #606266;
    width: 380px;
    text-align: left;
    margin-right: 10px;
    line-height: 40px;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>

<style lang="scss" scoped>
.icon-input ::v-deep .el-input__inner {
  cursor: pointer;
}

::v-deep .el-dialog__body {
  height: 580px;
  overflow: auto;
}

::v-deep .el-checkbox-button__inner {
  width: 130px;
  margin: 0 10px 5px;
  border-left: unset !important;
  border-radius: unset !important;
  border: 1px solid #dcdfe6 !important;
}

.relate-application-content {
  height: 100%;

  ::v-deep .el-transfer {
    height: 100%;
  }

  ::v-deep .el-transfer-panel {
    width: 39.5%;
    height: 100%;
  }

  ::v-deep .el-transfer-panel__body {
    height: 100%;
  }

  ::v-deep .el-transfer-panel__list.is-filterable {
    height: calc(100% - 102px);
  }
}
.dataTransfer {
  position: relative;
  height: 100%;
  ::v-deep .el-transfer {
    height: 100%;
  }

  ::v-deep .el-transfer-panel {
    width: 39.5%;
    height: 100%;
  }

  ::v-deep .el-transfer-panel__body {
    height: 100%;
  }
  ::v-deep .el-transfer-panel__list {
    height: calc(100% - 102px);
    margin-top: 4rem;
  }
  ::v-deep .el-input {
    position: absolute;
    font-size: 14px;
    display: inline-block;
    width: 30%;
    top: 52px;
    left: 12px;
  }
  .restClick {
    position: absolute;
    top: 52px;
    left: 284px;
  }
}
</style>