Smart_platform_ui/src/views/iosBasicData/accounts/assembly/accountsDialog.vue

<template>
    <div>
        <el-form :model="form" ref="form" label-width="70px" class="demo-ruleForm">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="科目编码:" prop="code">
                        <el-input style="width: 100%;" v-model="form.code"
                                  size="small" autocomplete="off"
                                  clearable placeholder="请输入科目编码" >
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="科目名称:" prop="cnName">
                        <el-input style="width: 100%;" v-model="form.cnName"
                                  size="small" autocomplete="off"
                                  clearable placeholder="请输入科目名称" >
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="方向:" prop="dc">
                        <search-query :datalist="dcData"
                                      :selectValue="form.dc"
                                      :filterable="true"
                                      :clearable="true"
                                      :remote="true"
                                      :buttonIf="false"
                                      placeholder="请选择方向"
                                      @corpChange="corpChange($event,'dc')">
                        </search-query>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="科目类别:" prop="property">
                        <search-query :datalist="propertyData"
                                      :selectValue="form.property"
                                      :filterable="true"
                                      :clearable="true"
                                      :remote="true"
                                      :buttonIf="false"
                                      placeholder="请选择科目类别"
                                      :forParameter="{key:'dictKey',label:'dictValue',value:'dictKey'}"
                                      @remoteMethod="propertyWorkDictsfun"
                                      @corpChange="corpChange($event,'property')"
                                      @corpFocus="propertyWorkDictsfun">
                        </search-query>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="上级科目:" prop="parentCode">
                        <el-input style="width: 100%;" v-model="form.parentCode"
                                  size="small" autocomplete="off" :disabled="true"
                                  clearable placeholder="请输入上级科目" >
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="币种:" prop="curCode">
                        <search-query :datalist="curData"
                                      :selectValue="form.curCode"
                                      :filterable="true"
                                      :clearable="true"
                                      :remote="true"
                                      :buttonIf="false"
                                      placeholder="请选择币种"
                                      :forParameter="{key:'id',label:'code',value:'code'}"
                                      @remoteMethod="getRateListfun"
                                      @corpChange="corpChange($event,'curCode')"
                                      @corpFocus="getRateListfun">
                        </search-query>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="辅助核算:">
                        <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="form.isItem">项目</el-checkbox>
                        <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="form.isCorp">客户</el-checkbox>
                        <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="form.isDept">部门</el-checkbox>
                        <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="form.isEmpl">职员</el-checkbox>
                        <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="form.isStock">库存</el-checkbox>
                    </el-form-item>
                </el-col>

                <el-row v-if="form.isItem == 0">
                    <el-col :span="24">
                        <el-form-item label="单价" prop="price">
                            <el-input style="width: 100%;" v-model="form.price"
                                      size="small" autocomplete="off" @blur="countBlur"
                                      clearable placeholder="请输入单价" >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="期初借方数量" prop="quantityOpenDr" label-width="100px" >
                            <el-input style="width: 100%;" v-model="form.quantityOpenDr"
                                      size="small" autocomplete="off" @blur="countBlur"
                                      clearable placeholder="请输入期初借方数量" >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="form.curCode == 'USD'">
                        <el-form-item label="期初借方金额" prop="amountOpenDrUsd" label-width="100px">
                            <el-input style="width: 100%;" v-model="form.amountOpenDrUsd"
                                      size="small" autocomplete="off" :disabled="true"
                                      clearable placeholder="请输入期初借方金额" >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="form.curCode == 'CNY'">
                        <el-form-item label="期初借方金额" prop="quantityOpenDr" label-width="100px">
                            <el-input style="width: 100%;" v-model="form.amountOpenDr"
                                      size="small" autocomplete="off" :disabled="true"
                                      clearable placeholder="请输入期初借方金额" >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="期初贷方数量" prop="quantityOpenCr" label-width="100px" >
                            <el-input style="width: 100%;" v-model="form.quantityOpenCr"
                                      size="small" autocomplete="off" @blur="countBlur"
                                      clearable placeholder="请输入期初贷方数量" >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="form.curCode == 'USD'" >
                        <el-form-item label="期初贷方金额" prop="amountOpenCrUsd" label-width="100px">
                            <el-input style="width: 100%;" v-model="form.amountOpenCrUsd"
                                      size="small" autocomplete="off" :disabled="true"
                                      clearable placeholder="请输入期初贷方金额" >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="form.curCode == 'CNY'" >
                        <el-form-item label="期初贷方金额" prop="amountOpenCr" label-width="100px">
                            <el-input style="width: 100%;" v-model="form.amountOpenCr"
                                      size="small" autocomplete="off" :disabled="true"
                                      clearable placeholder="请输入期初贷方金额" >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="本期借方数量" prop="quantityDr" label-width="100px" >
                            <el-input style="width: 100%;" v-model="form.quantityDr"
                                      size="small" autocomplete="off" @blur="countBlur"
                                      clearable placeholder="请输入本期借方数量" >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="form.curCode == 'USD'" >
                        <el-form-item label="本期借方金额" prop="amountDrUsd" label-width="100px">
                            <el-input style="width: 100%;" v-model="form.amountDrUsd"
                                      size="small" autocomplete="off" :disabled="true"
                                      clearable placeholder="请输入本期借方金额" >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="form.curCode == 'CNY'" >
                        <el-form-item label="本期借方金额" prop="amountDr" label-width="100px">
                            <el-input style="width: 100%;" v-model="form.amountDr"
                                      size="small" autocomplete="off" :disabled="true"
                                      clearable placeholder="请输入本期借方金额" >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="本期贷方数量" prop="quantityCr" label-width="100px" >
                            <el-input style="width: 100%;" v-model="form.quantityCr"
                                      size="small" autocomplete="off"
                                      clearable placeholder="请输入本期贷方数量" >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="form.curCode == 'USD'" >
                        <el-form-item label="本期贷方金额" prop="amountCrUsd" label-width="100px">
                            <el-input style="width: 100%;" v-model="form.amountCrUsd"
                                      size="small" autocomplete="off" :disabled="true"
                                      clearable placeholder="请输入本期贷方金额" >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="form.curCode == 'CNY'" >
                        <el-form-item label="本期贷方金额" prop="amountCr" label-width="100px">
                            <el-input style="width: 100%;" v-model="form.amountCr"
                                      size="small" autocomplete="off" :disabled="true"
                                      clearable placeholder="请输入本期贷方金额" >
                            </el-input>
                        </el-form-item>
                    </el-col>


                </el-row>

            </el-row>
        </el-form>
    </div>
</template>

<script>
import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
import {getRateList} from "@/api/iosBasicData/rateManagement";
import {getBunitsPage} from "@/api/iosBasicData/bunits";
import {baccitemstypeList} from "@/api/iosBasicData/baccitemstype";
import {getWorkDicts} from "@/api/system/dictbiz";

export default {
    components: {SearchQuery},
    props:{
        form:{
            type:Object,
            default:{}
        }
    },
    data(){
        return {
            // 方向数据
            dcData:[
                {
                    label:'借方',
                    value:'D',
                },
                {
                    label:'贷方',
                    value:'C',
                }
            ],
            curData:[], // 币别数据
            unitNoData:[], // 单位
            propertyData:[], // 核算项目数据

        }
    },
    methods:{
        // 金额计算
        countBlur(){
            this.$set(this.form,'price',this.form.price?Number(this.form.price):0) // 单价
            this.$set(this.form,'quantityOpenDr',this.form.quantityOpenDr?Number(this.form.quantityOpenDr):0) // 期初借方数量
            this.$set(this.form,'quantityOpenCr',this.form.quantityOpenCr?Number(this.form.quantityOpenCr):0) // 期初贷方数量
            this.$set(this.form,'quantityDr',this.form.quantityDr?Number(this.form.quantityDr):0) // 本期借方数量
            this.$set(this.form,'quantityCr',this.form.quantityCr?Number(this.form.quantityCr):0) // 本期贷方数量
            if (this.form.curCode == 'USD') {
                // 期初借方外币金额 = 单价 * 期初借方数量
                this.$set(this.form,'amountOpenDrUsd',Number(this.form.price) * Number(this.form.quantityOpenDr))
                // 期初贷方外币金额 = 单价 * 期初贷方数量
                this.$set(this.form,'amountOpenCrUsd',Number(this.form.price) * Number(this.form.quantityOpenCr))
                // 期初外币余额 = 期初贷方外币金额 - 期初借方外币金额
                this.$set(this.form,'amountOpenUsdBlc',Number(this.form.amountOpenCrUsd) - Number(this.form.amountOpenDrUsd))
                // 本期借方外币金额 = 单价 * 本期借方数量
                this.$set(this.form,'amountDrUsd',Number(this.form.price) * Number(this.form.quantityDr))
                // 本期贷方外币金额 = 单价 * 本期贷方数量
                this.$set(this.form,'amountCrUsd',Number(this.form.price) * Number(this.form.quantityCr))
                // 本期外币余额 = 本期贷方外币金额 - 本期借方外币金额
                this.$set(this.form,'amountUsdBlc',Number(this.form.amountCrUsd) - Number(this.form.amountDrUsd))
            }else {
                // 期初借方本币金额 = 单价 * 期初借方数量
                this.$set(this.form,'amountOpenDr',Number(this.form.price) * Number(this.form.quantityOpenDr))
                // 期初贷方本币金额 = 单价 * 期初贷方数量
                this.$set(this.form,'amountOpenCr',Number(this.form.price) * Number(this.form.quantityOpenCr))
                // 期初本币余额 = 期初贷方本币金额 - 期初借方本币金额
                this.$set(this.form,'amountOpenBlc',Number(this.form.amountOpenCr) - Number(this.form.amountOpenDr))
                // 本期借方本币金额 = 单价 * 本期借方数量
                this.$set(this.form,'amountDr',Number(this.form.price) * Number(this.form.quantityDr))
                // 本期贷方本币金额 = 单价 * 本期贷方数量
                this.$set(this.form,'amountCr',Number(this.form.price) * Number(this.form.quantityCr))
                // 本期本币余额 = 本期贷方本币金额 - 本期借方本币金额
                this.$set(this.form,'amountBlc',Number(this.form.amountCr) - Number(this.form.amountDr))
            }
            // 期初余额数量 = 期初贷方数量 - 期初借方数量
            this.$set(this.form,'quantityOpenBlc',Number(this.form.quantityOpenCr) - Number(this.form.quantityOpenDr))
            // 本期余额数量 = 本期贷方数量 - 本期借方数量
            this.$set(this.form,'quantityBlc',Number(this.form.quantityCr) - Number(this.form.quantityDr))
        },
        // 下拉回调
        corpChange(value,name){
            if (name == 'curCode') {
                for (let item of this.curData) {
                    if (item.code == value) {
                        this.$set(this.form,'curCode',item.code)
                        this.$set(this.form,'exrate',item.exrate)
                    }
                }
            }else {
                this.$set(this.form,name,value)
            }
        },
        // 获取币别数据
        getRateListfun(cnName){
            getRateList({current:1,size:10,cnName}).then(res=>{
                this.curData = res.data.data.records
            })
        },
        // 获取计算属性
        getBunitsPagefun(){
            getBunitsPage().then(res=>{
                this.unitNoData = res.data.data
            })
        },
        // 核算项目数据
        propertyWorkDictsfun(cnName){
            getWorkDicts('itemClassify_los').then((res) => {
                this.propertyData = res.data.data
            });
        },

    }
}
</script>

<style scoped>
::v-deep.el-form-item {
    margin-bottom: 0;
}
</style>