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

<template>
  <div>
    <!-- <el-input placeholder="请输入内容" clearable> </el-input> -->
    <div class="query">
      <el-input
        style="width: 351px; margin-bottom: 10px"
        v-model="leftQueryParams.itemName"
        placeholder="请输入内容"
        clearable
        @keyup.enter.native="handleQuery"
      />
      <el-input
        style="width: 351px; margin-bottom: 10px"
        v-model="rightQueryParams.itemName"
        placeholder="请输入内容"
        clearable
        @keyup.enter.native="handleQuery"
      />
    </div>

    <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>
  </div>
</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: {},
      // 分页
      page: { pageNo: 1, pageSize: 20, total: 0 },

      //--------------------->
      leftList: [],
      rightList: [],
      titles: ["未关联产品", "已关联产品"],
      // 左侧分页数据
      Ltotal: "",
      LPageNum: "1",
      LPageSize: "20",
      LNextPage: null,
      LPages: null,
      leftLength: null,
      leftQueryParams: {
        itemName: null,
        routeId: this.routeId,
        pageNum: 1,
        pageSize: 20,
      },
      // 右侧分页数据
      Rtotal: "",
      RPageNum: "1",
      RPageSize: "20",
      RPages: null,
      rightLength: null,
      RNextPage: null,
      rightQueryParams: {
        itemName: null,
        routeId: this.routeId,
        pageNum: 1,
        pageSize: 20,
      },
    };
  },
  props: {
    routeId: undefined,
    optType: undefined,
  },
  created() {
    this.getList();
    this.getRightListFun();
  },
  methods: {
    // // 穿梭框搜索
    // filterMethod(keyword, row) {
    //   console.log(keyword, row);
    //   return row.label.indexOf(keyword) > -1;
    // },
    // 查询
    handleQuery() {
      this.getList();
      this.getRightListFun();
    },
    /** 查询未分配产品列表 */
    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;
}
.query{
  display: flex;
  justify-content: space-between;
  padding-right: 4px;
}
</style>