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-row>
          <el-col :span="12">
            <el-form-item label="科目编码:" prop="code">
              <el-input
                style="width: 100%"
                v-model="form.code"
                size="small"
                autocomplete="off"
                @input="numinput"
                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-row>
        <el-col :span="24" >
          <el-form-item label="辅助核算:" >
            <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="form.isItem" :disabled="!isDetail">项目</el-checkbox>
            <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="form.isCorp" :disabled="!isDetail">客户</el-checkbox>
            <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="form.isDept" :disabled="!isDetail">部门</el-checkbox>
            <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="form.isEmpl" :disabled="!isDetail">职员</el-checkbox>
            <!--<el-checkbox size="medium" :true-label="1" :false-label="0" v-model="form.isStock">库存</el-checkbox>-->
            <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="form.isManual" style="margin-left: 50px"
              >允许手工凭证使用</el-checkbox
            >
            <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="form.isDc">应收/应付科目</el-checkbox>
            <el-checkbox size="medium" :true-label="1" :false-label="0" v-model="form.isArAp">预收/预付科目</el-checkbox>
          </el-form-item>
        </el-col>

        <el-row :gutter="20" v-if="form.isItem == 1 && isDetail">
          <el-col :span="12">
            <el-form-item label="项目大类:" prop="itemClassifyId">
              <search-query
                :datalist="itemClassifyList"
                :selectValue="form.itemClassifyId"
                :filterable="true"
                :clearable="false"
                :buttonIf="false"
                placeholder="请选择项目大类"
                :forParameter="{ key: 'id', label: 'code', value: 'id' }"
                @corpChange="corpChange($event, 'itemClassifyId')"
              >
              </search-query>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <span style="padding-left: 4em">本币期初</span>
          </el-col>
          <el-col :span="4">
            <el-form-item label="年初借方" prop="amountOpenDr" label-width="60px">
              <el-input-number
                style="width: 100%"
                v-model="form.amountOpenDr"
                size="small"
                autocomplete="off"
                :disabled="isCalc || !isDetail"
                clearable
                placeholder="请输入年初借方金额"
                :precision="2"
                :controls="false"
                value-on-clear="0"
                align="right"
                @change="amountChange(row, 'amountOpenDr')"
              >
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="年初贷方" prop="amountOpenCr" label-width="60px">
              <el-input-number
                style="width: 100%"
                v-model="form.amountOpenCr"
                size="small"
                autocomplete="off"
                :disabled="isCalc || !isDetail"
                clearable
                placeholder="请输入年初贷方金额"
                :precision="2"
                :controls="false"
                value-on-clear="0"
                align="right"
                @change="amountChange(row, 'amountOpenCr')"
              >
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="年初余额" prop="amountOpenBlc" label-width="60px">
              <el-input-number style="width: 100%;" v-model="form.amountOpenBlc" size="small" autocomplete="off" :disabled="true" clearable placeholder="" :precision="2" :controls="false" >
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="本年借方" prop="amountDr" label-width="60px">
              <el-input-number
                style="width: 100%"
                v-model="form.amountDr"
                size="small"
                autocomplete="off"
                :disabled="isCalc || !isDetail"
                clearable
                placeholder="请输入本初借方金额"
                :precision="2"
                :controls="false"
                value-on-clear="0"
                align="right"
                @change="amountChange(row, 'amountDr')"
              >
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="本年贷方" prop="amountCr" label-width="60px">
              <el-input-number
                style="width: 100%"
                v-model="form.amountCr"
                size="small"
                autocomplete="off"
                :disabled="isCalc || !isDetail"
                clearable
                placeholder="请输入本年贷方金额"
                :precision="2"
                :controls="false"
                value-on-clear="0"
                align="right"
                @change="amountChange(row, 'amountCr')"
              >
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="当前余额" prop="amountBlc" label-width="60px">
              <el-input-number style="width: 100%" v-model="form.amountBlc" size="small" autocomplete="off" :disabled="true" clearable placeholder="" :precision="2" :controls="false">
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="form.curCode !== 'CNY'">
          <el-col :span="24">
            <span style="padding-left: 4em">外币期初</span>
          </el-col>
          <el-col :span="4">
            <el-form-item label="年初借方" prop="amountOpenDrUsd" label-width="60px">
              <el-input-number
                style="width: 100%"
                v-model="form.amountOpenDrUsd"
                size="small"
                autocomplete="off"
                :disabled="isCalc || !isDetail"
                clearable
                placeholder="请输入年初借方金额"
                :precision="2"
                :controls="false"
                value-on-clear="0"
                align="right"
                @change="amountChange(row, 'amountOpenDrUsd')"
              >
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="年初贷方" prop="amountOpenCrUsd" label-width="60px">
              <el-input-number
                style="width: 100%"
                v-model="form.amountOpenCrUsd"
                size="small"
                autocomplete="off"
                :disabled="isCalc || !isDetail"
                clearable
                placeholder="请输入年初贷方金额"
                :precision="2"
                :controls="false"
                value-on-clear="0"
                align="right"
                @change="amountChange(row, 'amountOpenCrUsd')"
              >
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="年初余额" prop="amountOpenUsdBlc" label-width="60px">
              <el-input-number style="width: 100%" v-model="form.amountOpenUsdBlc" size="small" autocomplete="off" :disabled="true" clearable placeholder="" :precision="2" :controls="false">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="本年借方" prop="amountDrUsd" label-width="60px">
              <el-input-number
                style="width: 100%"
                v-model="form.amountDrUsd"
                size="small"
                autocomplete="off"
                :disabled="isCalc || !isDetail"
                clearable
                placeholder="请输入本初借方金额"
                :precision="2"
                :controls="false"
                value-on-clear="0"
                align="right"
                @change="amountChange(row, 'amountDrUsd')"
              >
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="本年贷方" prop="amountCrUsd" label-width="60px">
              <el-input-number
                style="width: 100%"
                v-model="form.amountCrUsd"
                size="small"
                autocomplete="off"
                :disabled="isCalc || !isDetail"
                clearable
                placeholder="请输入本年贷方金额"
                :precision="2"
                :controls="false"
                value-on-clear="0"
                align="right"
                @change="amountChange(row, 'amountCrUsd')"
              >
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="当前余额" prop="amountUsdBlc" label-width="60px">
              <el-input-number style="width: 100%" v-model="form.amountUsdBlc" size="small" autocomplete="off" :disabled="true" clearable placeholder="" :precision="2" :controls="false">
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="form.isQuantity == 1">
          <el-col :span="24">
            <span style="padding-left: 4em">数量期初</span>
          </el-col>
          <el-col :span="4">
            <el-form-item label="年初借方" prop="quantityOpenDr" label-width="60px">
              <el-input-number
                style="width: 100%"
                v-model="form.quantityOpenDr"
                size="small"
                autocomplete="off"
                :disabled="isCalc || !isDetail"
                clearable
                placeholder="请输入年初借方金额"
                :precision="2"
                :controls="false"
                value-on-clear="0"
                @change="amountChange(row, 'quantityOpenDr')"
              >
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="年初贷方" prop="quantityOpenCr" label-width="60px">
              <el-input-number
                style="width: 100%"
                v-model="form.quantityOpenCr"
                size="small"
                autocomplete="off"
                :disabled="isCalc || !isDetail"
                clearable
                placeholder="请输入年初贷方金额"
                :precision="2"
                :controls="false"
                value-on-clear="0"
                @change="amountChange(row, 'quantityOpenCr')"
              >
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="年初余额" prop="quantityOpenBlc" label-width="60px">
              <el-input-number style="width: 100%" v-model="form.quantityOpenBlc" size="small" autocomplete="off" :disabled="true" clearable placeholder="" :precision="2" :controls="false">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="本年借方" prop="quantityDr" label-width="60px">
              <el-input-number
                style="width: 100%"
                v-model="form.quantityDr"
                size="small"
                autocomplete="off"
                :disabled="isCalc || !isDetail"
                clearable
                placeholder="请输入本初借方金额"
                :precision="2"
                :controls="false"
                value-on-clear="0"
                @change="amountChange(row, 'quantityDr')"
              >
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="本年贷方" prop="quantityCr" label-width="60px">
              <el-input-number
                style="width: 100%"
                v-model="form.quantityCr"
                size="small"
                autocomplete="off"
                :disabled="isCalc || !isDetail"
                clearable
                placeholder="请输入本年贷方金额"
                :precision="2"
                :controls="false"
                value-on-clear="0"
                @change="amountChange(row, 'quantityCr')"
              >
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="当前余额" prop="quantityBlc" label-width="60px">
              <el-input-number style="width: 100%" v-model="form.quantityBlc" size="small" autocomplete="off" :disabled="true" clearable placeholder="" :precision="2" :controls="false">
              </el-input-number>
            </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";
import {regularInteger} from "@/util/regularJudgment";

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

        }
    },
    mounted() {
    },
    computed: {
      isCalc(){
        return this.form && (this.form.isCorp == 1 || this.form.isDept == 1 || this.form.isEmpl == 1 || this.form.isItem == 1 );
      },
      isDetail(){
        return this.form && this.form.isDetail == 1;
      },
    },
    methods:{
        // 科目代码只能输入整数数字
        numinput(val){
            this.$set(this.form,'code',regularInteger(val))
        },
        amountChange(row, fieldName){

        },
        // 金额计算
        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 if (name === 'itemClassifyId') {
              this.$set(this.form, name, value)
              let cl = this.itemClassifyList.find(item=>item.id == value)
              if(cl){
                this.$set(this.form, "itemClassify", cl.cnName)
              }
              console.log(this.form)
            }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('account_propertys').then((res) => {
                this.propertyData = res.data.data
            });
        },

    }
}
</script>

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