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

<template>
  <el-container class="app-container">
    <el-header height="50px" class="header">
      <el-page-header content="编辑" @back="handleBack"> </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">
            <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>
                <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="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">
            <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="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="70%" center>
      <div>
        <el-container>
          <el-header height="">
            <el-form label-width="0" :inline="false" size="mini">
              <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" :selectable="selectable" 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 {
  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
    }
  },
  created() {
    console.log(this.id, this.policyId)
    this.getCommonApi()
  },
  computed: mapState({
    comCode: state => state.sales.code
  }),
  methods: {
    getList() {},
    handleBack() {
      console.log(this.$parent)
      console.log(this.id, this.policyId)
      // this.$parent.isEdit = 1
    },
    /**
     * 根据条件禁用行复选框
     * 函数返回值为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() {
      if (this.id) {
        const res = await getConditionMaterialDetail({ id: this.id })
        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])
        }
        this.conditionBox = []
        for (let k = 0; k < pop.length; k++) {
          const { data } = await getConditionMaterialList({
            pageNum: 1,
            pageSize: -1,
            policyConditionId: res.data.id,
            popType: k + 1
          })

          this.conditionBox.push(data.records)
        }
      }
    },
    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.policyId

          //  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: this.id,
        policyConditionMaterials: tableData,
        policyId: this.policyId,
        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.isEdit = 1
        // Object.assign(this.$data, this.$options.data());
        // this.$emit("handleSubmitCon", this.policyId);
      })
    },
    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)
      }
    },
    // 更改每页数量
    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.policyId
      }).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
          for (let j = 0; j < this.newConditionBox.length; j++) {
            for (let o = 0; o < this.newConditionBox[j].length; o++) {
              if (o == index) {
                console.log(this.newConditionBox[j][o], 'dier')
                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 j = 0; j < res.data.records.length; j++) {
              for (let i = 0; i < this.conditionBox[index].length; i++) {
                if (this.conditionBox[index][i].policyMaterialId == res.data.records[j].id) {
                  res.data.records[j].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>