LanJu_UI/src/views/technology/proroute/routeprodproduct.vue

<template>
  <el-transfer v-model="rightList" :data="leftList" :titles="titles" :filterable=true
  @change="handleChange"
  ></el-transfer>
</template>

<script>
import { getListProduct, addProduct , updateProduct, getProduct, delProduct} from "@/api/technology/routeprodproduct";

export default {
  name: "Routeprodproduct",

  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 工艺线体表格数据
      routeproductList: [],
      //当前工艺中配置的工序清单
      processList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        routeId: this.routeId,
        itemId: null,
        itemCode: null,
        itemName: null,
        specification: null,
        unitOfMeasure: null,
        quantity: null,
        productionTime: null,
        timeUnitType: null,
      },
      // 表单参数
      form: {},

      //--------------------->
      leftList: [],
      rightList: [],
      titles:['未关联产品','已关联产品']
    };
  },
  props :{
      routeId: undefined,
      optType: undefined
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询未分配线体列表 */
    getList() {
      debugger
      this.loading = true;
      getListProduct(this.queryParams).then(response => {
        this.leftList = response.unSelect;
        const dataright = [];
        for(let i in response.selected){
          // 将返回的列表赋值于穿梭框左边列表
          dataright.push(response.selected[i].key)
        }
        this.rightList = dataright;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        recordId: null,
        routeId: this.routeId,
        itemId: null,
        itemCode: null,
        itemName: null,
        specification: null,
        unitOfMeasure: null,
        quantity: null,
        productionTime: null,
        timeUnitType: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
    },

    /** 提交按钮 */
    handleChange(value, direction, movedKeys) {
      if (this.queryParams.routeId != null) {
        this.queryParams.selectedValues = value;
        addProduct(this.queryParams).then(response => {
            this.$modal.msgSuccess("关联成功");
        });
      }
    }
  }
};
</script>