auth-web/src/pages/permission-selfhelp-manage/component/data-source-form.vue

<!--
数据资源审批内容
@Author: linqian
@Date: 2021-07-13
-->
<template>
  <div>
    <transfer-table
    ref="transferTable"
      filterable
      filter-placeholder="数据资源名称搜索"
      :titles="['可选资源', '已选资源']"
      :data="data"
      :value="selectKeys"
      :headerCellStyle="{ background: '#fafafa' }"
      label-name="serviceName"
      :column-label-name-list="labelList"
      value-name="id"
    ></transfer-table>
        <div v-footer>
       <dg-button @click="handleCancel">取消</dg-button>
      <dg-button type="primary" @click="handleSubmit">确定</dg-button>
    </div>
  </div>
</template>

<script>
import transferTable from '@/pages/common/transfer-table';
export default {
  components: { transferTable },
  props: {
    selectKeys: [Array]
  },
  data() {
    let attr = [];
    for (let i = 0; i < 20; i++) {
      const element = {
        id: i,
        serviceName: '数据_'+i,
        serviceIdentifier: 'fuwuyi-'+i
      };
      attr.push(element);
    }
    return {
      labelList: [  
        {
          val: 'serviceName',
          label: '数据资源名称'
        },
        {
          val: 'serviceIdentifier',
          label: '数据资源标识符'
        }
      ],
      data: attr
    };
  },
  methods: {
      handleCancel() {
       this.$emit("close");
    },
    handleSubmit() {
      const targetData = this.$refs.transferTable.targetData;
       if (targetData.length == 0) {
        this.$message.warning('请至少选择一条数据资源！');
      } else {
        const approveContent = targetData.map(item => item.serviceName).join("，");
        const cancelContent = "";
        const selectedValue = targetData.map(item => item.id);
        this.$emit('success', approveContent, cancelContent, selectedValue);
      }

    }
  }
};
</script>
<style lang='scss' scoped>
@import url("../index.scss");
</style>