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

<template>
  <el-transfer v-model="rightList" :data="leftList" :titles="titles" :filterable=true
  @change="handleChange"
  >
   <!-- 左侧栏分页 -->
        <el-button
          type="text"
          style="color:#606266"
          v-if="leftLength != 0"
          class="transfer-footer"
          slot="left-footer"
          size="small"
        >共{{ Ltotal }}条</el-button>
        <el-button
          v-if="leftLength != 0"
          class="transfer-footer"
          slot="left-footer"
          size="small"
          @click="leftPageNumChange"
          :disabled="LPageNum - 1 < 1"
        >上一页</el-button>
        <el-input
          v-if="leftLength != 0"
          v-model="LPageNum"
          size="mini"
          class="transfer-footer"
          slot="left-footer"
          :placeholder="LPageNum"
          style="width: 67px;padding: 1px 3px"
          disabled
        ></el-input>
        <el-button
          class="transfer-footer"
          slot="left-footer"
          size="small"
          @click="leftAddPageNumChange"
          v-if="leftLength != 0"
          :disabled="LNextPage>LPages"
        >下一页</el-button>

        <!-- 右侧栏分页 -->
        <el-button
          type="text"
          style="color:#606266"
          v-if="rightLength != 0"
          class="transfer-footer"
          slot="right-footer"
          size="small"
        >共{{ Rtotal }}条</el-button>
        <el-button
          v-if="rightLength != 0"
          class="transfer-footer"
          slot="right-footer"
          size="small"
          @click="rightPageNumChange"
          :disabled="RPageNum - 1 < 1"
        >上一页</el-button>
        <el-input
          v-if="rightLength != 0"
          v-model="RPageNum"
          size="mini"
          class="transfer-footer"
          slot="right-footer"
          :placeholder="RPageNum"
          style="width: 43px"
        ></el-input>
        <el-button
          class="transfer-footer"
          slot="right-footer"
          size="small"
          @click="rightAddPageNumChange"
          v-if="rightLength != 0"
          :disabled="RNextPage>RPages"
        >下一页</el-button>

  </el-transfer>
</template>

<script>
import { getListProduct,getRightList ,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:['未关联产品','已关联产品'],
      // 左侧分页数据
      Ltotal: "",
      LPageNum: "1",
      LPageSize: "20",
      LNextPage: null,
      LPages: null,
      leftLength: null,
      leftQueryParams: {
        routeId: this.routeId,
        pageNum: 1,
        pageSize: 20
       },
      // 右侧分页数据
      Rtotal: "",
      RPageNum: "1",
      RPageSize: "20",
      RPages: null,
      rightLength: null,
      RNextPage: null,
      rightQueryParams: {
        routeId: this.routeId,
        pageNum: 1,
        pageSize: 20
       },
    };
  },
  props :{
      routeId: undefined,
      optType: undefined
  },
  created() {
    this.getList();
    this.getRightListFun();
  },
  methods: {
    /** 查询未分配产品列表 */
    getList() {
      this.loading = true;
      getListProduct(this.leftQueryParams).then(response => {
        this.LPages = Math.ceil(response.total/this.LPageSize)
        this.leftList = response.rows;
				this.Ltotal = response.total;
        this.LPageNum = this.leftQueryParams.pageNum;
        this.LNextPage = this.leftQueryParams.pageNum+1;
        this.loading = false;
      });
    },
    /**左边上一页**/
    leftPageNumChange(){
      this.leftQueryParams.pageNum = this.LPageNum-1;
      this.loading = true;
      this.getList();
      this.getRightListFun();
    },
    /**左边下一页**/
    leftAddPageNumChange(){
      this.leftQueryParams.pageNum = this.LNextPage;
      this.loading = true;
      this.getList();
      this.getRightListFun();
    },

    /** 查询已分配产品列表 -------------------------------*/
    getRightListFun() {
      this.loading = true;
      getRightList(this.rightQueryParams).then(response => {
        this.RPages = Math.ceil(response.total/this.RPageSize);

        const dataright = [];
        for(let i in response.rows){
          // 将返回的列表赋值于穿梭框左边列表
          dataright.push(response.rows[i].key)
        }
        this.rightList = dataright;

				this.Rtotal = response.total;
        this.RPageNum = this.rightQueryParams.pageNum;
        this.RNextPage = this.rightQueryParams.pageNum+1;
        this.loading = false;
      });
    },
    /**右边上一页**/
    rightPageNumChange(){
      this.rightQueryParams.pageNum = this.RPageNum-1;
      this.loading = true;
      this.getRightListFun();
    },
    /**右边下一页**/
    rightAddPageNumChange(){
      this.rightQueryParams.pageNum = this.RNextPage;
      this.loading = true;
      this.getRightListFun();
    },
     

    // 取消按钮
    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>
<style>
.el-transfer-panel {
    width: 350px;
   };
</style>