supply-front/src/views/sales_policy/components/AddCondition.vue

<template>
  <el-container class="app-container mymian-container">
    <el-header height="50px" class="header">
      <el-page-header
        @back="handleBack"
        :content="!id ? (!edit ? '新增' : '编辑') : '详情页面'"
      >
      </el-page-header>
    </el-header>
    <div class="line">
      <el-divider></el-divider>
      <h4>限定条件</h4>
      <el-divider></el-divider>
    </div>
    <el-main v-if="!id">
      <el-row v-if="conditionBox.length">
        <el-row :gutter="50">
          <el-col
            :xs="24"
            :sm="24"
            :lg="24"
            class="mgb"
            v-for="(item, index) in conditionBox"
            :key="index"
          >
            <h5 v-if="index == 0">限定机型</h5>
            <h5 v-if="index > 0">配提机型</h5>
            <el-row>
              <el-row class="pdt">
                <el-button
                  type="primary"
                  size="mini"
                  @click="(VisibleModle = true), getMaterialLists(index)"
                  >添加机型</el-button
                >

                <el-button
                  type="primary"
                  size="mini"
                  @click="handleDeleteRow(index)"
                  >删除机型</el-button
                >
              </el-row>
              <el-row class="table">
                <el-table
                  v-loading="listLoadingArr[`listLoading${index}`]"
                  style="width: 100%"
                  :data="item"
                  border
                  @select="hanleSelectAll($event, index)"
                  @select-all="hanleSelectAll($event, index)"
                >
                  <el-table-column type="selection" width="55" align="left">
                  </el-table-column>
                  <el-table-column
                    label="产品名称"
                    width="300"
                    show-overflow-tooltip
                    align="left"
                    prop="materialName"
                  >
                    <template slot-scope="scope">
                      <CopyButton :copyText="scope.row.materialName" />
                      <span>{{ scope.row.materialName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="specification"
                    show-overflow-tooltip
                    label="规格型号"
                    align="left"
                  >
                    <template slot-scope="scope">
                      <CopyButton :copyText="scope.row.specification" />
                      <span>{{ scope.row.specification }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-form label-width="120px" :inline="false" size="mini">
            <el-row>
              <el-form-item label="配置比例设置"> </el-form-item>
            </el-row>
            <el-col :xs="24" :sm="8" :lg="8">
              <el-form-item label="限定机型">
                <el-input size="mini" v-model="limit"></el-input>
              </el-form-item>
            </el-col>

            <el-col
              :xs="24"
              :sm="8"
              :lg="8"
              v-for="(len, index) in conditionBox.length - 1"
            >
              <el-form-item :label="'配提' + (index + 1) + '比例'">
                <el-input
                  size="mini"
                  v-model="popArr['line_' + index]"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-divider></el-divider>
      </el-row>
    </el-main>
    <el-main v-else>
      <el-row>
        <el-row :gutter="50">
          <el-col
            :xs="24"
            :sm="24"
            :lg="24"
            class="mgb"
            v-for="(item, index) in conditionBoxs"
            :key="index"
          >
            <h5 v-if="index == 0">限定机型</h5>
            <h5 v-if="index > 0">配提机型</h5>
            <el-row>
              <el-row class="table">
                <el-table style="width: 100%" :data="item" border>
                  <el-table-column
                    type="selection"
                    width="55"
                    align="left"
                    v-if="!id"
                  >
                  </el-table-column>
                  <el-table-column
                    type="index"
                    label="序号"
                    width="55"
                    align="left"
                    v-else
                  >
                  </el-table-column>
                  <el-table-column
                    label="产品名称"
                    width="300"
                    align="left"
                    prop="materialName"
                  >
                    <template slot-scope="scope">
                      <CopyButton :copyText="scope.row.materialName" />
                      <span>{{ scope.row.materialName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="specification"
                    label="规格型号"
                    show-overflow-tooltip
                    align="left"
                  >
                    <template slot-scope="scope">
                      <CopyButton :copyText="scope.row.specification" />
                      <span>{{ scope.row.specification }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </el-row>
          </el-col>
        </el-row>
        <el-row v-if="conditionBoxs.length">
          <el-form label-width="120px" :inline="false" size="mini">
            <el-row>
              <el-form-item label="配置比例设置"> </el-form-item>
            </el-row>
            <el-col :xs="24" :sm="8" :lg="8">
              <el-form-item label="限定机型">
                <el-input
                  size="mini"
                  v-model="limit"
                  :readonly="!id ? false : true"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col
              :xs="24"
              :sm="8"
              :lg="8"
              v-for="(len, index) in conditionBoxs.length - 1"
            >
              <el-form-item :label="'配提' + (index + 1) + '比例'">
                <el-input
                  size="mini"
                  :readonly="!id ? false : true"
                  v-model="popArr['line_' + index]"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
          <el-col class="text_rihgt" v-if="false">
            <el-button type="primary" size="mini" @click=""
              >添加限定条件</el-button
            ></el-col
          >
        </el-row>
        <el-divider></el-divider>
      </el-row>
    </el-main>
    <el-footer height="100px" v-if="!id">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :lg="12" :offset="0">
          <el-button type="primary" size="mini" @click="handleSubmit"
            >保存</el-button
          >
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" :offset="0" class="tr">
          <el-button type="primary" size="mini" @click="hanleAddModel"
            >添加</el-button
          >
          <el-button type="primary" size="mini" @click="handleresale"
            >重置</el-button
          >
        </el-col>
      </el-row>
    </el-footer>
    <el-dialog
      :visible.sync="VisibleModle"
      width="80%"
      center
      @close="handleClose"
      :close-on-click-modal="false"
    >
      <div>
        <el-container>
          <el-header height="">
            <el-form label-width="0" :inline="false" size="mini">
              <el-col :xs="24" :sm="10" :lg="10" :offset="0">
                <el-form-item label="">
                  <el-input
                    v-model="saleTypeCode"
                    placeholder="类型编号"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="10" :lg="10" :offset="1">
                <el-form-item label="">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="getMaterialLists(arrIndex)"
                    >搜索</el-button
                  >
                </el-form-item>
              </el-col>
            </el-form>
          </el-header>
          <el-main height="">
            <el-row>
              <el-row :gutter="50">
                <el-col :xs="10" :ms="10" :lg="10">
                  <el-row>
                    <el-row> </el-row>
                    <el-row class="table">
                      <el-row class="title"> 可选产品列表 </el-row>
                      <el-table
                        ref="multipleTable"
                        style="width: 100%"
                        :data="conditList"
                        border
                        height="400"
                        @select-all="handleSelectionAllChange"
                        @selection-change="handleSelectionChange"
                      >
                        <el-table-column
                          type="selection"
                          width="55"
                          :selectable="selectable"
                          align="left"
                        >
                        </el-table-column>
                        <el-table-column
                          label="产品编码"
                          prop="materialNumber"
                          min-width="160"
                          show-overflow-tooltip
                          align="left"
                        >
                          <template slot-scope="scope">
                            <CopyButton :copyText="scope.row.materialNumber" />
                            <span>{{ scope.row.materialNumber }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="materialName"
                          label="产品名称"
                          min-width="160"
                          show-overflow-tooltip
                          align="left"
                        >
                          <template slot-scope="scope">
                            <CopyButton :copyText="scope.row.materialName" />
                            <span>{{ scope.row.materialName }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="specification"
                          label="产品型号"
                          min-width="300"
                          show-overflow-tooltip
                          align="left"
                        >
                          <template slot-scope="scope">
                            <CopyButton :copyText="scope.row.specification" />
                            <span>{{ scope.row.specification }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="price"
                          label="产品价格"
                          min-width="160"
                          show-overflow-tooltip
                          align="right"
                        >
                        </el-table-column>
                      </el-table>
                      <el-row class="mg">
                        <div>
                          <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-size.sync="mySize"
                            :page-sizes="[10, 20, 30, 50]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="listTotal"
                          />
                        </div>
                      </el-row>
                    </el-row>
                  </el-row>
                </el-col>
                <el-col :xs="4" :ms="4" :lg="4" class="middle">
                  <el-row :gutter="20" justify="center" align="middle">
                    <el-row class="btn">
                      <el-button
                        type="primary"
                        size="small "
                        @click="handleAllAdd"
                        :disabled="type == 2"
                        >全部添加</el-button
                      >
                    </el-row>
                    <el-row class="btn">
                      <el-button
                        type="primary"
                        size="small "
                        @click="handleAdd"
                        :disabled="type == 2"
                        >增加</el-button
                      >
                    </el-row>
                    <el-row class="btn">
                      <el-button
                        type="primary"
                        size="small "
                        @click="handleDelete"
                        :disabled="type == 1"
                        >删除</el-button
                      ></el-row
                    >
                    <el-row class="btn"
                      ><el-button
                        :disabled="type == 1"
                        type="primary"
                        size="small  "
                        @click="handleAllDelete"
                        >全部删除</el-button
                      ></el-row
                    >
                  </el-row>
                </el-col>
                <el-col :xs="10" :ms="10" :lg="10">
                  <el-row>
                    <el-row> </el-row>
                    <el-row class="table">
                      <el-row class="title"> 已选产品列表 </el-row>
                      <el-table
                        style="width: 100%"
                        :data="conditList2"
                        @select-all="handleSelectionAllChange2"
                        @selection-change="handleSelectionChange2"
                        border
                        height="400"
                      >
                        <el-table-column
                          type="selection"
                          width="55"
                          align="left"
                        >
                        </el-table-column>
                        <el-table-column
                          label="产品编码"
                          prop="materialNumber"
                          min-width="160"
                          show-overflow-tooltip
                          align="left"
                        >
                          <template slot-scope="scope">
                            <CopyButton :copyText="scope.row.materialNumber" />
                            <span>{{ scope.row.materialNumber }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="materialName"
                          label="产品名称"
                          min-width="160"
                          show-overflow-tooltip
                          align="left"
                        >
                          <template slot-scope="scope">
                            <CopyButton :copyText="scope.row.materialName" />
                            <span>{{ scope.row.materialName }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="specification"
                          label="产品型号"
                          min-width="300"
                          show-overflow-tooltip
                          align="left"
                        >
                          <template slot-scope="scope">
                            <CopyButton :copyText="scope.row.specification" />
                            <span>{{ scope.row.specification }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="price"
                          label="产品价格"
                          min-width="160"
                          show-overflow-tooltip
                          align="right"
                        >
                        </el-table-column>
                      </el-table>
                      <el-row class="mg">
                        <!-- <Pagination /> -->
                      </el-row>
                    </el-row>
                  </el-row>
                </el-col>
              </el-row>
            </el-row>
          </el-main>
        </el-container>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="VisibleModle = false;handleClose()">取 消</el-button>
        <el-button type="primary" @click="handleDiaSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import {
  addPoliyCondition,
  getConditionMaterialDetail,
  getConditionMaterialList,
  getMaterialList,
} from "@/api/policy_list";
import TabelTransfer from "./TabelTransfer.vue";

import { mapState } from "vuex";
import AddModel from "./AddModel";
import Minxin from "@/mixin";

export default {
  mixins: [Minxin],
  props: {
    id: {
      type: String,
      default: "",
    },
    policyId: {
      type: String,
      default: "",
    },
  },
  watch: {
    conditList: {
      handler(newValue, oldValue) {
      this.conditList = newValue
      },
      immediate: true,
      deep: true
    },
    conditList2: {
      handler(newValue, oldValue) {
      this.conditList2 = newValue
      },
      immediate: true,
      deep: true
    }
  },

  data() {
    return {
      base: {
        id: null,
        policyConditionMaterials: [
          {
            id: null,
            materialId: "",
            materialName: "",
            materialNumber: "",
            policyConditionId: "",
            policyId: "",
            policyMaterialId: "",
            popType: 0,
            specification: "",
            walletType: "",
          },
        ],
        policyId: "",
        policyName: "",
        pop: "",
      },
      limit: "",
      VisibleModle: false,
      conditionBox: [[], []],
      conditionBoxs: [],
      multipleSelection: [],
      searchForm: {
        code: "",
      },
      pop: "",
      conditList: [],
      leftData: [],
      rightData: [],
      conditList2: [],
      type: "",
      saleTypeCode: "",
      arrIndex: 0,
      pageSize: 10,
      popArr: {},
      fang: false,
      newConditionBox: [],
      currentPage: 1,
      edit: "",
      mySize: 10,
      listLoadingArr: {},
    };
  },
  created() {
    this.getCommonApi();
  },

  computed: mapState({
    comCode: (state) => state.sales.code,
  }),
  methods: {
    getList() {},
    handleBack() {
      if (this.$parent.isShow == 10) {
        this.$parent.isShow = 8;
      } else if (this.$parent.isShow == 12) {
        this.$parent.isShow = 4;
      } else {
        this.$parent.isCondition = 0;
        Object.assign(this.$data, this.$options.data());
      }
    },
    /**
     * 根据条件禁用行复选框
     * 函数返回值为false则禁用选择(反之亦然)
     * @param {Object} row - 行数据
     * @param {String} index - 索引值
     * @return Boolean
     */
    selectable: function (row, index) {
      // row.disabled == undefined 才能被选中
      if (row.disabled == undefined) {
        return true;
      }
      // 函数必须有返回值且是布尔值
      // 页面刷新后该函数会执行 N 次进行判断(N 为表格行数)
      // 如果没有返回值则默认返回false(全部无法选中)
    },
    async getCommonApi(policyId) {

      if (this.id || policyId) {
        if (policyId) {
           this.edit = "eidt";
        }

        const res = await getConditionMaterialDetail({
          id: this.policyId || policyId || this.id,
        });
        this.pop = res.data.pop;
        let pop = res.data.pop.split(":");
        this.conditionBox = [];
        for (let i = 0; i < pop.length; i++) {
          if (i == 0) {
            this.limit = pop[i];
            continue;
          }
          this.$set(this.popArr, `line_${i - 1}`, pop[i]);
          this.$set(this.listLoadingArr, `listLoading${i}`, false);
        }

        for (let k = 0; k < pop.length; k++) {
          this.listLoadingArr[`listLoading${k}`] = true;
          const { data } = await getConditionMaterialList({
            pageNum: 1,
            pageSize: -1,
            policyConditionId: res.data.id,
            popType: k + 1,
          });
          if (policyId) {
            this.conditionBox.push(data.records);
          } else {
            this.conditionBoxs.push(data.records);
          }
          this.listLoadingArr[`listLoading${k}`] = false;
        }
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    hanleAddModel() {
      this.conditionBox.push([]);
    },
    handleSubmit() {
      var tableData = [];

      this.newConditionBox.push(JSON.parse(JSON.stringify(this.conditionBox)));
      for (let i = 0; i < this.conditionBox.length; i++) {
        for (let j = 0; j < this.conditionBox[i].length; j++) {
          this.conditionBox[i][j].popType = i + 1;
          this.conditionBox[i][j].policyId = this.$parent.searchForm.code || this.comCode;
          this.conditionBox[i][j].id = "";
          //  this.conditionBox[i][j].policyMaterialId =this.conditionBox[i][j].materialId
        }
        tableData = [...tableData, ...this.conditionBox[i]];
      }

      if (!tableData.length) {
        this.$errorMsg("请选择机型");
        return;
      }
      var pop = [this.limit];
      for (const key in this.popArr) {
        pop.push(this.popArr[key]);
      }
      console.log(pop.join(":"));
      const params = {
        id: "",
        policyConditionMaterials: tableData,
        policyId: this.$parent.searchForm.code || this.comCode,
        policyName: "",
        pop: pop.join(":"),
      };
      addPoliyCondition(params).then((res) => {
        this.$successMsg("添加成功");

        this.conditionBox = [[], []];
        this.conditionBoxs = [];
        this.limit = "";
        this.pop = "";
        this.popArr = {};
        this.$parent.isCondition = 0;
        this.$parent.isFlag = 1;
        // Object.assign(this.$data, this.$options.data());
        this.$emit(
          "handleSubmitCon",
          this.$parent.searchForm.code || this.comCode
        );
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 筛选全部数据
    hanleSelectAll(selection, index) {
      this.arrIndex = index;
      this.ids = selection.map((k) => {
        return k.id;
      });
      console.log(this.ids);
    },
    handleDeleteRow(index) {
      if (this.arrIndex == index && this.ids.length) {
        var arr = [];
        for (var i = 0; i < this.conditionBox[index].length; i++) {
          if (this.ids.indexOf(this.conditionBox[index][i].id) == -1) {
            arr.push(this.conditionBox[index][i]);
          }
        }
        this.conditionBox[index] = [];
        this.$set(this.conditionBox, index, arr);
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getMaterialLists(this.arrIndex);
    },
    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getMaterialLists(this.arrIndex);
    },
    // 更改列表当前页
    handleTableCurrentChange(val) {
      this.currentPage = val;
      this.getMaterialLists(this.arrIndex);
    },
    getMaterialLists(index) {
      this.arrIndex = index;
      getMaterialList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        saleTypeCode: this.saleTypeCode,
        policyId: this.$parent.searchForm.code || this.comCode,
      }).then((res) => {
        let datas = [];

        for (let j = 0; j < this.conditionBox.length; j++) {
          datas = [...datas, ...this.conditionBox[j]];
        }

        /**
         * @value newConditionBox 首页保存的所有选中者，即条件1
         * @value res.data.records，this.conditList 每次点击添加获取的最新数据
         * @value disabled 添加条件都进行比较上一个条件或者所有条件当中的限定机型和配提机型，
         * 如：上一个或者所有条件中已经存在disabled
         */
        if (this.newConditionBox.length) {
          this.conditList = res.data.records;
          if (this.conditionBox[index].length) {
            for (let n = 0; n < this.newConditionBox.length; n++) {
              for (let m = 0; m < this.newConditionBox[n].length; m++) {
                if (m == index) {
                  this.$set(this.newConditionBox[n], m, [
                    ...this.conditionBox[index],
                    ...this.newConditionBox[n][m],
                  ]);
                  console.log(this.newConditionBox, "newenewnwn");
                }
              }
            }
          }

          for (let j = 0; j < this.newConditionBox.length; j++) {
            for (let o = 0; o < this.newConditionBox[j].length; o++) {
              if (o == index) {
                for (let i = 0; i < res.data.records.length; i++) {
                  for (let k = 0; k < this.newConditionBox[j][o].length; k++) {
                    if (
                      this.newConditionBox[j][o][k].id == res.data.records[i].id
                    ) {
                      res.data.records[i].disabled = true;
                    }
                  }
                }
              } else {
                this.conditList = res.data.records;
              }
            }
          }
          this.conditList = res.data.records;
        } else {
          const newData = datas;
          if (newData.length) {
            for (let i = 0; i < res.data.records.length; i++) {
              for (let k = 0; k < newData.length; k++) {
                if (newData[k].id == res.data.records[i].id) {
                  res.data.records[i].disabled = true;
                }
              }
            }
          }
          this.conditList = res.data.records;
          this.listTotal = res.data.total;
        }
      });
    },
    handleSelectionAllChange(e) {
      this.leftData = e;
      this.type = 1;
    },
    handleSelectionChange(e) {
      this.leftData = e;
      this.type = 1;
    },
    handleSelectionAllChange2(e) {
      this.rightData = e;
      this.type = 2;
    },
    handleSelectionChange2(e) {
      this.rightData = e;
      this.type = 2;
    },
    handleAllAdd() {
      this.conditList2 = this.leftData;
      this.leftData = [];
      this.$refs.multipleTable.clearSelection();
    },
    handleAllDelete() {
      this.conditList2 = [];
    },
    // 
    handleAdd() {
      this.conditList2 = [...new Set([...this.conditList2,...this.leftData])];
      this.$refs.multipleTable.clearSelection();
    },
    //去掉相同数据
    resArr(arr1, arr2) {
      return arr1.filter((v) => arr2.every((val) => val.id != v.id));
    },
    handleDelete() {
      if (this.type == 2) {
        this.conditList2 = this.resArr(this.conditList2, this.rightData);
        this.rightData = [];
      }
    },
    handleDiaSubmit() {
      if (this.conditList2.length) {
        for (let i = 0; i < this.conditionBox.length; i++) {
          if (i == this.arrIndex) {
            this.$set(this.conditionBox, i, [
              ...this.conditList2,
              ...this.conditionBox[i],
            ]);
          }
        }
        this.mySize = 10;
        this.currentPage = 1;
        this.pageSize = 10;
        this.VisibleModle = false;
        this.conditList2 = [];
      } else {
        this.$errorMsg("请选择内容");
      }
    },
    handleClose() {
      this.mySize = 10;
      this.currentPage = 1;
      this.pageSize = 10;
    },
    handleresale() {
      Object.assign(this.$data, this.$options.data());
    },
  },
  components: {
    AddModel,
    TabelTransfer,
  },
};
</script>

<style lang="scss" scoped>
.line {
  margin: 0 20px;
}
.mgb {
  margin-bottom: 20px;
}
.pdt {
  padding-bottom: 20px;
}
.text_rihgt {
  text-align: right;
}
.header {
  margin-bottom: 40px;
}
.el-main {
  overflow: hidden;
}
.btn {
  margin: 20px 0;
  text-align: center;
}
.query_btn {
  margin-left: 0;
}
.mg {
  margin: 20px;
}
.pdt {
  margin: 20px 0;
}
.el-main {
  overflow: hidden;
}
.middle {
  height: 430px;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.title {
  padding: 10px 0;
  text-align: center;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  border-top: 1px solid #ebeef5;
}
</style>