athena之——动态表单行‘补贴/扣款’的添加删除

 

<template>
  <show-portlet title="补贴/扣款">
    <j-form :model="model" ref="form">
      <div class="row">
        <div class="col-xs-9">
          <span style="color: #be0000;
              background: #f5faff;
              display: inline-block;
              line-height: 40px;
              padding: 0px 10px;
              margin-bottom: 20px">
            <!--金额正数代表补贴，负数代表扣款。一条补贴/扣款同时有项目与金额时才生效-->
            正数代表补贴，负数代表扣款
          </span>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <table class="table show-table table-align-middle">
            <tbody>
              <tr v-for="(item, index) of showFeeDetail">
              <td width="1%"></td>
              <td width="3%">项目: </td>
              <td width="22%"> {{item.costName|filterDataBaseDictionary}}</td>
              <td width="3%">金额：</td>
              <td width="23%">{{item.money}}</td>
              <td width="3%">备注: </td>
              <td width="22%">{{item.memo}}</td>
              <td width="25%">添加人： {{item.foundName}}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="row" v-for="(item, index) in model.accountCostBeanList">
        <div class="col-xs-3">
          <j-form-item :prop="'accountCostBeanList.'+ index +'.costNoMap'"
                       :rules="costNoRules"
                       :class="{'must-fill-in': item.xiangMu}"
          >
            <j-select v-model="item.costNoMap"
                      :options="costNoArr"
                      :forbiddenInputUndefined="true"
                      @choose="checkSelect(item)"
            >
              <span slot="left" class="input-group-addon">项目:</span>
              <span slot="right" class="input-group-addon"><span class="font-red"></span></span>
            </j-select>
          </j-form-item>
        </div>
        <div class="col-xs-3">
          <j-form-item
            :prop="'accountCostBeanList.' + index + '.money'"
            :rules="moneyRules"
            :class="{'must-fill-in': item.jinE}"
          >
            <j-input-group v-model="item.money"
                           :forbiddenInputUndefined="true"
                           @input="changeInput(item)"
            >
              <span slot="left" class="input-group-addon">金额:</span>
              <span slot="right" class="input-group-addon"><span class="font-red"></span></span>
            </j-input-group>
          </j-form-item>
        </div>

        <div class="col-xs-3">
          <j-form-item :prop="'accountCostBeanList.'+ index +'.memo'" :rules="memoRules">
            <j-input-group v-model="item.memo" :forbiddenInputUndefined="true">
              <span slot="left" class="input-group-addon">备注:</span>
              <span slot="right" class="input-group-addon"><span class="font-red"></span></span>
            </j-input-group>
          </j-form-item>
        </div>
        <div class="col-xs-3">
          <div type="button" class="btn btn-circle blue" @click="resetInput(model.accountCostBeanList, index)" v-if="index===0 && model.accountCostBeanList.length < 2">重置</div>
          <div type="button" class="btn btn-circle blue" @click="del(model.accountCostBeanList, index)" v-if="model.accountCostBeanList.length > 1">删除</div>
          <div type="button" class="btn btn-circle blue" @click="add" v-if="(model.accountCostBeanList.length-1) == index">添加</div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-2 col-xs-offset-4">
          <button type="button" class="btn btn-primary btn-block btn-circle ladda-button" data-style="zoom-out"
                  @click.prevent="submit($event)" :disabled="isTrue">保 存
          </button>
        </div>
      </div>
    </j-form>
  </show-portlet>
</template>

<script>
  import showPortlet from 'components/base/showPortlet'
  import upload from 'components/base/upload'
  import jForm from 'components/base/form/jForm'
  import jFormItem from 'components/base/form/jFormItem'
  import jSelect from 'components/base/form/jSelect'
  import jInputGroup from 'components/base/form/jInputGroup'
  import {isFormatNumber} from 'assets/scripts/base/validator'
  import {getRewardCoastType} from 'assets/scripts/business/store'
  import {copy, mapGetValue, alert, swal, dotData} from 'assets/scripts/base/functions'
  import {httpSuccessPost} from 'assets/scripts/base/util'
  import {filterDataBaseDictionary} from 'assets/scripts/base/filters'
  import {mapActions} from 'vuex'

  export default {
    name: 'accountAdjust',
    components: {
      upload,
      showPortlet,
      jForm,
      jFormItem,
      jSelect,
      jInputGroup
    },
    props: {
      id: {
        type: String,
        required: true
      },
      costsDetail: {
        type: Array,
        reqiured: true
      }
    },
    filters: {
      filterDataBaseDictionary
    },
    data () {
      return {
        uploadExcelLoading: false,
        changeFee: 0,
        payFee: 0,
        feeDetail: [],
        showFeeDetail: [], // state为-1的，只显示，不能回填
        formDetail: [],
        model: {
          accountCostBeanList: [
            {
              costNoMap: {},
              money: '',
              memo: '',
              xiangMu: false,
              jinE: false
            }
          ]
        },
        costNoArr: [],
        moneyRules: [
          {validator: isFormatNumber, int: 9, decimal: 2, message: ' 金额最大位数为9位(小数位2位)！', trigger: 'blur'}
        ],
        costNoRules: [
//          {validator: selectRequired, message: '请选择项目!', trigger: 'change'}
        ],
        memoRules: [
          {max: 100, message: '输入字数在100以内！', trigger: 'blur'}
        ]
      }
    },
    created () {
      getRewardCoastType().then(arr => {
        this.costNoArr = arr
      })
      // this.getAddAccountCost()
    },
    watch: {
      // 1、监听详情传进来的 扣款数组，拆分成两组：只用于显示的状态为-1的数组，可修改要回填要提交的数组(非-1状态)
      costsDetail (val, oldVal) {
        if (val === oldVal) {
          return
        }
        if (Array.isArray(val)) {
          this.showFeeDetail = val.filter(v => { return !(v.state !== '-1') }) // state为-1的，只显示，不能回填
          this.formDetail = val.filter(v => { return !(v.state === '-1') }) // state不是-1的，要用于回填
          if (this.formDetail.length) {
            this.getFormData()
          }
        }
      }
    },
    computed: {
      fileId () {
        console.log('当前是-------环境', process.env.NODE_ENV)
        // 如果是测试环境
        if (process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'development') {
          return '5be8d25ffe7ee20001189ca6'
        }
        return '5be8d3307f6db800017828ff'
      },
      isTrue () {
        let _true = true
        for (let i = 0; i < this.model.accountCostBeanList.length; i++) {
          if (this.model.accountCostBeanList[i].costNoMap.value || this.model.accountCostBeanList[i].money || (this.model.accountCostBeanList[i].money === 0)) {
            _true = false
            return _true
          }
        }
        return _true
      }
    },
    methods: {
      test () {
        this.setRefreshRoute({path: '/end/adjuster/show/' + this.id + '/0'})
      },
      // 导入成功后的回调：后端回填数据，前端刷新当前页面即可
      setExcelFile (file) {
        // console.log(file, 'setExcelFile')
        this.uploadExcelLoading = true
        file.submit().then(response => {
          this.uploadExcelLoading = false
          console.log(this.id, 'response.success', response.success)
          if (dotData(response, 'success')) {
            this.setRefreshRoute({path: '/end/adjuster/show/' + this.id + '/0'})
          } else { // 失败：后端的提示
            alert(dotData(response, 'error_message'))
          }
        })
      },
      getFormData () {
        let tempArr = []
        this.formDetail.forEach(item => {
          let obj = {
            costNoMap: {value: item.costNo, text: item.costName},
            money: item.money,
            memo: item.memo,
            id: item.id // 可修改可回填的数据 要多传一个id给后端
          }
          tempArr.push(obj)
        })
        this.model.accountCostBeanList = tempArr
      },
      submit ($event) {
        this.$refs.form.validate().then(result => {
          if (!result) {
            return
          }
          let data = mapGetValue(copy(this.model, true))
          data.accountId = this.id  // 账单id
          for (let i = 0; i < data.accountCostBeanList.length; i++) {
            if (data.accountCostBeanList[i].xiangMu || data.accountCostBeanList[i].jinE) {
              return alert('补贴/扣款填写错误！', '提示:')
            }
          }
          const loading = window.Ladda.create($event.currentTarget || $event.target)
          loading.start()
          // 合并: 不可修改-1的数据showFeeDetail + model的数据(包含了可修改已回填+ 用户新添加的)
          let tempShowCost = []
          if (Array.isArray(this.showFeeDetail) && this.showFeeDetail.length) {
            this.showFeeDetail.forEach(item => {
              tempShowCost.push({costNo: item.costNo, money: item.money, memo: item.memo, id: item.id})
            })
            console.log('提交之前的tempShowCost', tempShowCost)
            data.accountCostBeanList = data.accountCostBeanList.concat(tempShowCost)
            console.log('提交之前的tempShowCost + model', data.accountCostBeanList)
          }
          httpSuccessPost('/ms-settlement-branch/accountCost/addAccountCost', data).then(response => {
            loading.stop()
            const success = dotData(response, 'success')
            if (success) {
              swal({
                title: '保存成功',
                type: 'success',
                customClass: 'visible',
                confirmButtonText: '确定'
              }, result => {
                // this.getAddAccountCost()
                this.$emit('refresh', true)
              })
            }
          })
        })
      },
      resetInput (data, index) {
        this.model.accountCostBeanList = [
          {
            costNoMap: {},
            money: '',
            memo: '',
            xiangMu: false,
            jinE: false
          }
        ]
      },
      changeInput (data) {
        console.log('data', data)
        if (data.money || data.money === 0) {
          data.jinE = false // 金额输入框
          if (!data.costNoMap.value) { // 没有选择项目
            data.xiangMu = true
          } else {
            data.xiangMu = false
          }
        } else {
          if (data.costNoMap.value) { // 如果项目存在，并且清空金额
            data.jinE = true
          }
          data.xiangMu = false
        }
      },
      blurFun () {
        this.changeFee = 0
        this.payFee = 0
        this.model.accountCostBeanList.forEach(item => {
          this.changeFee += item.money ? parseFloat(item.money) : 0
        })
        this.payFee = (this.detail.money ? this.detail.money : 0) + this.changeFee
      },
      checkSelect (data) {
        this.$nextTick(_ => {
          if (data.costNoMap.value) {
            data.xiangMu = false // 下拉框输入框
            if (!data.money && !data.money !== 0) { // 没填写费用
              data.jinE = true
            } else {
              data.jinE = false
            }
          } else {
            data.jinE = false
          }
        })
      },
      add () {
        this.model.accountCostBeanList.push({
          costNoMap: {},
          money: '',
          memo: '',
          xiangMu: false,
          jinE: false
        })
      },
      del (arr, index) {
        if (arr.length <= 1) {
          return
        }
        arr.splice(index, 1)
      },
      ...mapActions([
        'setRefreshRoute'
      ])
    }
  }
</script>

<style scoped>
  .must-fill-in>.j-input-group,.must-fill-in>.j-select-group{
    border-color: #e73d4a;
  }
</style>

说明：jForm、jFormItem、jSelect、jInputGroup是封装的表单通用组件