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

<template>
  <el-container class="app-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="small"
                  @click="(VisibleModle = true), getMaterialLists(index)"
                  >添加机型</el-button
                >

                <el-button
                  type="primary"
                  size="small"
                  @click="handleDeleteRow(index)"
                  >删除机型</el-button
                >
              </el-row>
              <el-row>
                <el-table
                  ref="multipleTable"
                  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="small">
            <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="small" 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="small"
                  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>
                <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="small">
            <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="small"
                  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="small"
                  :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="small" @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="small" @click="handleSubmit"
            >保存</el-button
          >
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12" :offset="0" class="tr">
          <el-button type="primary" size="small" @click="hanleAddModel"
            >添加</el-button
          >
          <el-button type="primary" size="small" @click="handleresale"
            >重置</el-button
          >
        </el-col>
      </el-row>
    </el-footer>
    <el-dialog :visible.sync="VisibleModle" width="80%" center>
      <div>
        <el-container>
          <el-header height="">
            <el-form label-width="0" :inline="false" size="small">
              <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="small"
                    @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>
                      <el-row class="title"> 可选产品列表 </el-row>
                      <el-table
                        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-sizes="[10, 20, 30, 50]"
                            :page-size="10"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="listTotal"
                          >
                          </el-pagination>
                        </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>
                      <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">取 消</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: "",
    },
  },
  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,
      popArr: {},
      fang: false,
      newConditionBox: [],
      currentPage: 1,
      edit: "",
      listLoadingArr:{}
    };
  },
  created() {
    this.getCommonApi();
  },
  computed: mapState({
    comCode: (state) => state.sales.code,
  }),
  methods: {
    getList() {},
    handleBack() {
      if (this.$parent.isShow == 10) {
        this.$parent.isShow = 8;
      } 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) {
        this.edit = "eidt";

        const res = await getConditionMaterialDetail({
          id: this.policyId || policyId,
        });
        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.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.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.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.comCode || this.$parent.searchForm.code,
      }).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 {
          console.log(datas, "4455454", res.data.records);
          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 = [];
    },
    handleAllDelete() {
      this.conditList2 = [];
    },
    handleAdd() {
      this.conditList2 = this.leftData;
    },
    //去掉相同数据
    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.VisibleModle = false;
        this.conditList2 = [];
      } else {
        this.$errorMsg("请选择内容");
      }
    },
    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>