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

<template>
  <el-container>
    <el-header height="50px" class="header">
      <el-page-header
        @back="handleBack"
        :content="!id ? '添加页面' : '详情页面'"
      >
      </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>
        <el-row :gutter="50">
          <el-col
            :xs="24"
            :sm="24"
            :lg="24"
            class="mgb"
            v-for="(item, index) in conditionBox"
            :key="index"
          >
            <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
                  style="width: 100%"
                  :data="item"
                  border
                  @select="hanleSelectAll($event, index)"
                  @select-all="hanleSelectAll($event, index)"
                >
                  <el-table-column type="selection" width="55" align="center">
                  </el-table-column>
                  <el-table-column
                    label="货品名称"
                    width="300"
                    align="center"
                    prop="materialName"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="specification"
                    label="规格型号"
                    align="center"
                  >
                  </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"
          >
            <el-row>
              <el-row>
                <el-table style="width: 100%" :data="item" border>
                  <el-table-column
                    type="selection"
                    width="55"
                    align="center"
                    v-if="!id"
                  >
                  </el-table-column>
                  <el-table-column
                    type="index"
                    label="序号"
                    width="55"
                    align="center"
                    v-else
                  >
                  </el-table-column>
                  <el-table-column
                    label="货品名称"
                    width="300"
                    align="center"
                    prop="materialName"
                  >
                    <template slot-scope="scope">{{
                      scope.row.materialName
                    }}</template>
                  </el-table-column>
                  <el-table-column
                    prop="specification"
                    label="规格型号"
                    align="center"
                  >
                  </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="70%" center>
      <div>
        <el-container>
          <el-header height="">
            <el-form label-width="0" :inline="false" size="small">
              <el-col :xs="24" :sm="8" :lg="8" :offset="0">
                <el-form-item label="">
                  <el-input
                    v-model="saleTypeCode"
                    placeholder="类型编号"
                  ></el-input>
                </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"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          label="产品编码"
                          prop="materialNumber"
                          width="120"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="materialName"
                          label="产品名称"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="specification"
                          label="产品型号"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="price"
                          label="产品价格"
                          align="center"
                        >
                        </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="center"
                        >
                        </el-table-column>
                        <el-table-column
                          label="产品编码"
                          prop="materialNumber"
                          width="120"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="materialName"
                          label="产品名称"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="specification"
                          label="产品型号"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="price"
                          label="产品价格"
                          align="center"
                        >
                        </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 {
  getId,
  addPoliyCondition,
  getConditionMaterialList,
  getMaterialList,
  getConditionMaterialDetail,
} 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: {},
    };
  },
  created() {
    this.getCommonApi();
  },
  computed: mapState({
    comCode: (state) => state.sales.code,
  }),
  updated() {},
  methods: {
    getList() {},
    handleBack() {
      if (this.$parent.isShow == 10) {
        this.$parent.isShow = 8;
      } else {
        this.$parent.isCondition = 0;
      }
    },
    getCommonApi() {
      if (this.id) {
        getConditionMaterialDetail({ id: this.policyId }).then((res) => {
          this.pop = res.data.pop;

          let pop = res.data.pop.split(":");
          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]);
          }
          console.log(this.popArr);

          for (let k = 0; k < pop.length; k++) {
            getConditionMaterialList({
              pageNum: 1,
              pageSize: -1,
              policyConditionId: res.data.id,
              popType: k + 1,
            }).then((res) => {
              this.conditionBoxs.push(res.data.records);
            });
          }
          console.log(this.conditionBoxs);
        });
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    hanleAddModel() {
      this.conditionBox.push([{}]);
    },
    handleSubmit() {
      var tableData = [];
      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.$parent.isCondition = 0;
        this.$parent.isFlag = 1;
        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) {
        for (let i = 0; i < this.conditionBox[index].length; i++) {
          for (let j = 0; j < this.ids.length; j++) {
            if (this.conditionBox[index][i].id == this.ids[j]) {
              this.conditionBox[index].splice(i, 1);
            }
          }
        }
      }
      console.log(index, this.arrIndex);
    },
    getMaterialLists(index) {
      this.arrIndex = index;
      getMaterialList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        saleTypeCode: this.saleTypeCode,
        policyId: this.comCode,
      }).then((res) => {
        this.conditList = res.data.records;

        console.log(4545, this.conditList);

        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;
    },
    handleDelete() {
      if (this.type == 2) {
        for (let k = 0; k < this.conditList2.length; k++) {
          for (let i = 0; i < this.rightData.length; i++) {
            if (this.rightData[i].id == this.rightData[k].id) {
              this.conditList2.splice(i, 1);
            }
          }
        }
      }
    },
    handleDiaSubmit() {
      if (this.conditList2.length) {
        for (let i = 0; i < this.conditionBox.length; i++) {
          console.log(this.conditionBox[i]);
          if (i == this.arrIndex) {
            this.$set(this.conditionBox, i, [
              ...this.conditList2,
              ...this.conditionBox[i],
            ]);
            console.log(this.conditionBox);
          }
        }
        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>