123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347 |
- <template>
- <div>
- <a-spin :spinning="spinning" tip="Loading...">
- <div>
- <div class="epenseCdfModal-con">
- <!-- 列表 -->
- <a-table
- class="sTable fixPagination"
- ref="table"
- :scroll="{ y: 300 }"
- size="small"
- :rowKey="(record,index) => 'cdfTable-'+index"
- :columns="columns"
- :data-source="dataList"
- :pagination="false"
- bordered>
- <div slot="customTitle1"><span style="color: red;">*</span>费用承担方类型</div>
- <div slot="customTitle2"><span style="color: red;">*</span>费用承担方</div>
- <div slot="customTitle3"><span style="color: red;">*</span>费用承担金额</div>
- <!-- 费用承担方类型 -->
- <template slot="fycdftype" slot-scope="text,record,index">
- <v-select
- code="EXPENSE_ACCOUNT_DETAIL_SPLIT_OBJ_TYPE"
- allowClear
- style="width: 100%;"
- :isEnable="true"
- v-model="record.splitObjType"
- @change="splitObjTypeChange(index)"
- placeholder="请选择承担方类型"
- ></v-select>
- </template>
- <!-- 费用承担方 -->
- <template slot="fycdf" slot-scope="text,record,index">
- <!-- 部门 -->
- <department v-show="record.splitObjType=='DEPARTMENT'" style="width: 100%;" placeholder="请选择承担方" v-model="record.splitObjSn"></department>
- <!-- 经销商 -->
- <custList
- v-show="record.splitObjType=='CUSTOMER'"
- cooperateFlag="1"
- @change="custChange"
- :id="'cust-'+index"
- :ref="'custList-'+record.no"
- placeholder="请选择(输入名称搜索)"></custList>
- <!-- 供应商 -->
- <supplier
- v-show="record.splitObjType=='SUPPLIER'"
- style="width: 100%;"
- enableFlag="1"
- v-model="record.splitObjSn"
- placeholder="请选择(输入名称搜索)"></supplier>
- <!-- 其它往来 -->
- <otherTransactions
- style="width: 100%;"
- v-show="record.splitObjType=='OTHER_ORG'"
- v-model="record.splitObjSn"
- placeholder="请选择(输入名称搜索)"></otherTransactions>
- <span v-if="!record.splitObjType">--</span>
- </template>
- <!-- 费用承担金额 -->
- <template slot="amount" slot-scope="text,record,index">
- <a-input-number
- v-show="record.splitObjType"
- style="width: 100%;"
- v-model="record.splitAmount"
- @change="splitAmountChange"
- :precision="2"
- :min="0"
- :max="99999999"
- placeholder="请输入"
- />
- <span v-if="!record.splitObjType">--</span>
- </template>
- <!-- 承担人员 -->
- <template slot="cdry" slot-scope="text,record,index">
- <div
- style="display: flex;align-items: center;width: 100%;padding: 5px 0;border-bottom: 1px solid #eee;"
- v-for="(item,idx) in record.childDetailSplitList"
- :key="item.id">
- <employee style="width: 40%;" placeholder="请选择承担人员" v-model="item.splitObjSn"></employee>
- -
- <a-input-number
- style="width: 40%;"
- v-model="item.splitAmount"
- :precision="2"
- :min="0"
- :max="99999999"
- placeholder="请输入费用"
- />
- <div style="padding-left: 15px;" v-if="record.childDetailSplitList&&record.childDetailSplitList.length>1">
- <a-button
- @click="handleDelCdry(record,idx)"
- title="删除"
- size="small"
- type="danger"
- shape="circle"
- icon="delete" />
- </div>
- <div v-if="record.childDetailSplitList&&idx == record.childDetailSplitList.length - 1">
- <a-button
- @click="handleAddCdry(record,idx)"
- title="添加承担人员"
- size="small"
- type="primary"
- class="button-info"
- shape="circle"
- icon="plus" />
- </div>
- </div>
- <span v-if="record.childDetailSplitList&&record.childDetailSplitList.length==0">--</span>
- </template>
- <template slot="action" slot-scope="text,record,index">
- <a-button
- size="small"
- type="link"
- class="button-error"
- @click="handleDelRow(record,index)"
- >删除</a-button>
- </template>
- <template slot="footer" slot-scope="currentPageData">
- <a-button
- type="link"
- class="button-info"
- block
- @click="handleAddRow()"
- >+ 新增费用承担方</a-button>
- </template>
- </a-table>
- </div>
- </div>
- </a-spin>
- </div>
- </template>
- <script>
- import { VSelect } from '@/components'
- import department from './department.js'
- import employee from './employee.js'
- import custList from '@/views/common/custList.vue'
- import supplier from '@/views/common/supplier.js'
- import otherTransactions from '@/views/common/otherTransactions.js'
- export default {
- components: { VSelect, department, employee, custList, supplier, otherTransactions },
- name: 'EpenseCdfModal',
- props: {
- list: { // 弹框显示状态
- type: Array,
- default: () => { return [] }
- }
- },
- watch: {
- list (newValue, oldValue) {
- this.dataList = JSON.parse(JSON.stringify(newValue))
- this.dataList.map(item => {
- item.no = item.id
- if (item.splitObjType == 'DEPARTMENT' && (!item.childDetailSplitList || item.childDetailSplitList.length == 0)) {
- this.$set(item, 'childDetailSplitList', [{
- splitObjType: 'EMPLOYEE',
- splitObjSn: undefined,
- splitAmount: 0
- }])
- }
- if (item.splitObjType == 'CUSTOMER') {
- this.$nextTick(() => {
- this.$refs['custList-' + item.no].setDufaultVal(item.splitObjName)
- })
- }
- })
- if (this.dataList.length == 0) {
- this.handleAddRow()
- }
- }
- },
- data () {
- return {
- spinning: false,
- dataList: [],
- columns: [
- { slots: { title: 'customTitle1' }, scopedSlots: { customRender: 'fycdftype' }, align: 'center', width: '15%' },
- { slots: { title: 'customTitle2' }, scopedSlots: { customRender: 'fycdf' }, align: 'center', width: '20%' },
- { slots: { title: 'customTitle3' }, scopedSlots: { customRender: 'amount' }, align: 'center', width: '15%' },
- { title: '承担人员-人员平摊费用', scopedSlots: { customRender: 'cdry' }, align: 'center', width: '40%' },
- { title: '操作', scopedSlots: { customRender: 'action' }, width: '10%', align: 'center' }
- ]
- }
- },
- mounted () {
- this.handleAddRow()
- },
- methods: {
- // 费用承担方类型
- splitObjTypeChange (index) {
- const row = this.dataList[index]
- console.log(index, row.splitObjType)
- row.splitObjSn = undefined
- // 只有部门有承担人员
- this.$set(row, 'childDetailSplitList', row.splitObjType == 'DEPARTMENT' ? [{
- splitObjType: 'EMPLOYEE',
- splitObjSn: undefined,
- splitAmount: Number(row.splitAmount).toFixed(2)
- }] : [])
- if (row.splitObjType == 'CUSTOMER') {
- this.$set(row, 'splitObjSn', undefined)
- this.$set(row, 'splitObjName', undefined)
- this.$refs['custList-' + row.no].dealerName = []
- }
- if (row.splitObjType == 'SUPPLIER') {
- this.$set(row, 'splitObjSn', undefined)
- }
- this.$emit('fyTotal', this.fyTotal())
- },
- // 经销商
- custChange (v, obj, id) {
- const row = this.dataList[id.split('-')[1]]
- this.$set(row, 'splitObjSn', v.key)
- this.$set(row, 'splitObjName', obj.dealerName)
- this.$emit('fyTotal', this.fyTotal())
- },
- // 承担费用
- splitAmountChange () {
- this.$emit('fyTotal', this.fyTotal())
- },
- // 清空数据
- clearList () {
- this.dataList = []
- },
- // 获取数据
- getList () {
- let hasError = 0
- const list = this.dataList.filter(item => item.splitObjType && item.splitObjSn && item.splitAmount)
- const ret = JSON.parse(JSON.stringify(list))
- if (ret.length != this.dataList.length) {
- hasError = 1
- } else {
- ret.map(item => {
- if (item.splitObjType == 'DEPARTMENT') {
- const al = item.childDetailSplitList.filter(a => !a.splitObjSn && a.splitAmount > 0)
- if (al.length) {
- hasError = 3
- } else {
- const dl = item.childDetailSplitList.filter(a => a.splitObjSn) || []
- // 有承担人员
- if (dl && dl.length) {
- let t = 0
- dl.map(b => t = Number(t) + Number(b.splitAmount))
- // console.log(Number(t), Number(item.splitAmount))
- hasError = (Number(t) != Number(item.splitAmount)) ? 2 : 0
- }
- item.childDetailSplitList = dl
- }
- }
- })
- }
- if (ret.length == 0) {
- hasError = 1
- }
- return [hasError, ret]
- },
- // 添加人员
- handleAddCdry (row, idx) {
- const cur = row.childDetailSplitList[idx]
- if (!cur.splitObjSn) {
- this.$message.info('请选择承担人员')
- return
- }
- if (cur.splitAmount <= 0) {
- this.$message.info('请输入平摊费用')
- return
- }
- // 校验承担费用合计是否超过费用承担金额
- let totalFy = 0
- row.childDetailSplitList.map(item => {
- totalFy = totalFy + Number(item.splitAmount)
- })
- // console.log(totalFy, row.splitAmount)
- if (totalFy >= Number(row.splitAmount).toFixed(2)) {
- this.$warning({
- title: '提示',
- content: '人员平摊费用合计必需等于费用承担金额'
- })
- return
- }
- // 已使用费用
- let ysyAmount = 0
- row.childDetailSplitList.map(item => {
- ysyAmount = ysyAmount + Number(item.splitAmount)
- })
- // 添加
- row.childDetailSplitList.push({
- splitObjType: 'EMPLOYEE',
- splitObjSn: undefined,
- splitAmount: Number(row.splitAmount - ysyAmount).toFixed(2)
- })
- },
- // 删除人员
- handleDelCdry (row, index) {
- row.childDetailSplitList.splice(index, 1)
- },
- // 添加承担费用
- handleAddRow () {
- this.dataList.push({
- no: new Date().getTime(),
- splitObjType: '',
- splitObjSn: undefined,
- splitAmount: 0,
- childDetailSplitList: []
- })
- },
- // 删除承担费用
- handleDelRow (a, index) {
- this.dataList.splice(index, 1)
- this.$emit('fyTotal', this.fyTotal())
- this.dataList.map(item => {
- if (item.splitObjType == 'CUSTOMER') {
- this.$nextTick(() => {
- this.$refs['custList-' + item.no].setDufaultVal(item.splitObjName)
- })
- }
- })
- },
- fyTotal: function () {
- let total = 0
- this.dataList.map(item => { total = total + item.splitAmount })
- return total.toFixed(2)
- }
- }
- }
- </script>
- <style lang="less">
- .epenseCdfModal-modal{
- .ant-modal-body {
- padding: 30px 40px 24px;
- }
- .epenseCdfModal-con{
- text-align: center;
- h3{
- font-size: 16px;
- font-weight: bold;
- margin-bottom: 25px;
- }
- }
- .btn-cont {
- text-align: center;
- margin: 35px 0 10px;
- }
- }
- </style>
|