sd-vue/src/views/shengde/group/offer/sellQuote/index.vue

<template>
  <el-card class="box-card">
    <el-form ref="ruleForm" :model="form" :rules="formRules" label-width="0">
      <el-table :data="form.tableList" :cell-style="{ padding: '0' }" :row-style="{ height: '35px' }" v-loading="loading" header-row-class-name="tableHeader">
        <el-table-column :render-header="(h, obj) => renderHeader(h, obj, item)" min-width="260">
          <template slot-scope="scope">
            <el-form-item :prop="'tableList.' + scope.$index + '.chargeName'" :rules="formRules.chargeName" :inline-message="true">
              <el-select v-model="scope.row.chargeName" placeholder="请选择收费项目" size="small" style="width: 100%">
                <el-option v-for="item in chargeName" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="收费模式" width="140">
          <template slot-scope="scope">
            <el-form-item :prop="'tableList.' + scope.$index + '.chargeType'" :rules="formRules.chargeType" :inline-message="true">
              <el-select v-model="scope.row.chargeType" placeholder="请选择收费模式" size="small" style="width: 100%">
                <el-option v-for="item in chargeType" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="收费模式数值区间" min-width="260">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="11">
                <el-form-item :prop="'tableList.' + scope.$index + '.valueRangeBegin'" :rules="formRules.valueRangeBegin" :inline-message="true">
                  <el-input-number
                    v-model="scope.row.valueRangeBegin"
                    placeholder="请输入区间起始值"
                    size="small"
                    style="width: 100%"
                    :controls="false"
                    :min="0"
                    :max="999999999"
                    :precision="0"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="2" style="text-align: center; line-height: 40px">-</el-col>
              <el-col :span="11">
                <el-form-item :prop="'tableList.' + scope.$index + '.valueRangeEnd'" :rules="formRules.valueRangeEnd" :inline-message="true">
                  <el-input-number
                    v-model="scope.row.valueRangeEnd"
                    placeholder="请输入区间结束值"
                    size="small"
                    style="width: 100%"
                    :controls="false"
                    :min="0"
                    :max="999999999"
                    :precision="0"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="收费价格/元/件" width="140">
          <template slot-scope="scope">
            <el-form-item :prop="'tableList.' + scope.$index + '.price'" :rules="formRules.price" :inline-message="true">
              <el-input-number
                v-model="scope.row.price"
                placeholder="请输入收费价格"
                size="small"
                style="width: 100%"
                :controls="false"
                :min="0"
                :max="999999999"
                :precision="2"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="成本价/元/件" width="140">
          <template slot-scope="scope">
            <el-form-item :prop="'tableList.' + scope.$index + '.costPrice'" :rules="formRules.costPrice" :inline-message="true">
              <el-input-number
                v-model="scope.row.costPrice"
                placeholder="请输入成本价"
                size="small"
                style="width: 100%"
                :controls="false"
                :min="0"
                :max="999999999"
                :precision="2"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="120">
          <template slot-scope="scope">
            <el-form-item :prop="'tableList.' + scope.$index + '.start'" :rules="formRules.start" :inline-message="true">
              <el-input-number
                v-model="scope.row.start"
                placeholder="请输入排序"
                size="small"
                style="width: 100%"
                :controls="false"
                :min="0"
                :max="999999999"
                :precision="0"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="80" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="clickRemove(scope.row, scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />

      <el-row :gutter="10" style="margin-bottom: 10px">
        <el-col :span="1.5">
          <el-button type="primary" size="mini" @click="clickSubmit" v-db-click>保存</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import * as API from '@/api/shengde/group/offer/sellQuote'

export default {
  name: 'SellQuote',
  data() {
    return {
      loading: false,
      form: {
        tableList: [],
      },
      formRules: {
        chargeName: [{ required: true, message: '请选择收费项目', trigger: 'change' }],
        chargeType: [{ required: true, message: '请选择收费模式', trigger: 'change' }],
        valueRangeBegin: [{ required: true, message: '请输入区间起始值', trigger: 'blur' }],
        valueRangeEnd: [{ required: true, message: '请输入区间结束值', trigger: 'blur' }],
        price: [{ required: true, message: '请输入收费价格', trigger: 'blur' }],
        costPrice: [{ required: true, message: '请输入成本价', trigger: 'blur' }],
        start: [{ required: true, message: '请输入排序', trigger: 'blur' }],
      },
      chargeName: [],
      chargeType: [],
    }
  },
  created() {
    this.chargeName = this.dictData.filter((item) => item.code === 'charge_name')[0].children
    this.chargeType = this.dictData.filter((item) => item.code === 'sd_charge_type')[0].children
  },
  mounted() {
    this.getList()
  },
  computed: mapGetters(['dictData']),
  methods: {
    renderHeader(h) {
      return h(
        'div',
        {
          style: {
            display: 'flex',
            width: '100%',
          },
        },
        [
          h('div', {}, [
            h(
              'span',
              {
                style: { 'line-height': '40px', 'padding-right': '16px' },
              },
              '收费项目'
            ),
          ]),
          h('div', {}, [
            <el-button type="text" on-click={() => this.clickAdd()}>
              +添加收费项目
            </el-button>,
          ]),
        ]
      )
    },
    getList() {
      this.loading = true
      API.salesQuotationList({}).then(
        (res) => {
          this.form.tableList = res.data.data
          this.loading = false
        },
        (err) => {
          console.log('salesQuotationList: ' + err)
          this.loading = false
        }
      )
    },
    clickRemove(row, index) {
      if (row.id) {
        this.$confirm('是否确认删除数据?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            API.salesQuotationDelete({ id: row.id }).then(() => {
              this.msgSuccess('删除成功!')
              this.getList()
            })
          })
          .catch(() => {})
      } else {
        this.form.tableList.splice(index, 1)
      }
    },
    clickSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.form.tableList && this.form.tableList.length > 0) {
            let data = this.form.tableList.filter((item) => ['10', '20'].includes(item.chargeName))
            if (data && data.length > 1) {
              let chargeType = data[0].chargeType
              for (let i = 0; i < data.length; i++) {
                if (chargeType !== data[i].chargeType) {
                  return this.msgInfo('配置异常')
                }
              }
            }
            for (let j = 0; j < this.chargeName.length; j++) {
              let dataTwo = this.form.tableList.filter((item) => item.chargeName === this.chargeName[j].dictKey)
              if (dataTwo && dataTwo.length > 1) {
                let chargeTypeTwo = dataTwo[0].chargeType
                for (let x = 0; x < dataTwo.length; x++) {
                  if (chargeTypeTwo !== dataTwo[x].chargeType) {
                    return this.msgInfo('配置异常')
                  } else {
                    for (let y = 0; y < dataTwo.length; y++) {
                      if (x !== y) {
                        if (
                          dataTwo[x].valueRangeEnd >= dataTwo[x].valueRangeBegin &&
                          ([dataTwo[y].valueRangeBegin, dataTwo[y].valueRangeEnd].includes(dataTwo[x].valueRangeBegin) ||
                            [dataTwo[y].valueRangeBegin, dataTwo[y].valueRangeEnd].includes(dataTwo[x].valueRangeEnd))
                        ) {
                          return this.msgInfo('区间重叠')
                        } else {
                          if (dataTwo[x].valueRangeEnd > dataTwo[y].valueRangeEnd) {
                            if (dataTwo[x].valueRangeBegin < dataTwo[y].valueRangeEnd) {
                              return this.msgInfo('区间重叠')
                            }
                          } else {
                            if (dataTwo[x].valueRangeEnd > dataTwo[y].valueRangeBegin) {
                              return this.msgInfo('区间重叠')
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
            API.salesQuotationSave(this.form.tableList).then(() => {
              this.msgSuccess('保存完成')
              this.getList()
            })
          } else {
            this.msgInfo('请添加收费项目')
          }
        }
      })
    },
    clickAdd() {
      this.form.tableList.push({
        chargeName: '',
        chargeType: '',
        valueRangeBegin: undefined,
        valueRangeEnd: undefined,
        price: undefined,
        costPrice: undefined,
        start: undefined,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
* {
  font-size: 12px;
}

.box-card {
  height: calc(100vh - 110px);
  overflow-y: auto;
}

::v-deep {
  .el-input__inner {
    border-radius: 1px;
  }
  .el-button--small {
    border-radius: 1px;
  }
  .tableHeader th {
    background-color: #edf0f5;
    height: 35px;
    padding: 0;
  }
  .el-input-number {
    .el-input__inner {
      text-align: left !important;
    }
  }
}
</style>