saas_entrepot_admin/src/views/resource/videoManagement/courseManagement/chapterContent/preference.vue

<template>
  <div id="">
    <el-dialog
      :visible.sync="dialogVisible"
      width="628px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">配置优选</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogVisible = false"
          />
        </div>
      </div>
      <el-transfer
        :titles="['未选', '已选']"
        v-model="value"
        :data="transferData"
        :props="{
          key: 'id',
          label: 'name',
        }"
      ></el-transfer>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transferData: [],
      value: [],
      dialogVisible: false,
    };
  },
  methods: {
    openBoxs(array) {
      let value = [];
      this.transferData = array.map((i) => {
        if (i.firstChoiceStatus == 1) {
          value.push(i.id);
        }
        i.disabled = i.type == 2 ? false : true;
        return i;
      });
      this.value = value;
      this.dialogVisible = true;
    },
    close() {
      this.dialogVisible = false;
    },
    submit() {
      let transferData = JSON.parse(JSON.stringify(this.transferData));
      transferData.forEach((i) => {
        delete i.disabled;
        if (this.value.includes(i.id)) {
          i.firstChoiceStatus = 1;
        } else {
          i.firstChoiceStatus = 0;
        }
      });
      this.$emit("update:tableDataInfos", transferData);
      this.close();
    },
  },
};
</script>

<style lang="scss" scoped></style>