tire-platform-ui/src/views/iosBasicData/finvouchers/finvouchersitems.vue

<template>
    <div class="borderless" v-loading="pageLoading">
        <div class="customer-head">
            <div class="customer-back">
                <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
                           @click="backToList">返回列表
                </el-button>
            </div>
            <div class="add-customer-btn">
                <el-button  size="small" type="success" style="margin-right: 8px"
                            :loading="saveLoading" >凭证标错
                </el-button>
                <el-button  size="small" type="primary" style="margin-right: 8px"
                            :loading="saveLoading" >保 存
                </el-button>
            </div>
        </div>
        <div style="margin: 55px 5px 0px 5px;'">
            <el-card class="box-card">
                <el-form :model="form" ref="form" label-width="90px" class="demo-ruleForm">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="凭证类型" prop="voucherType">
                                <search-query :datalist="voucherTypeData"
                                              :selectValue="form.voucherType"
                                              :clearable="true"
                                              :buttonIf="false"
                                              :forParameter="{key:'dictKey',label:'dictValue',value:'dictKey'}"
                                              placeholder="请输入凭证类型"
                                              @corpChange="corpChange($event,'voucherType')">
                                </search-query>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="凭证号" prop="voucherNo">
                                <el-input style="width: 100%;" v-model="form.voucherNo"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="请输入凭证号" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="凭证日期" prop="voucherDate">
                                <el-date-picker v-model="form.voucherDate" clearable
                                                style="width: 100%;"
                                                type="date" size="small"
                                                value-format="yyyy-MM-dd HH:mm"
                                                placeholder="选择凭证日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="凭证来源" prop="voucherSource">
                                <el-input style="width: 100%;" v-model="form.voucherSource"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="请输入凭证来源" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="REF NO" prop="billNo">
                                <el-input style="width: 100%;" v-model="form.billNo"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="请输入编号" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="附件" prop="billNo">
                                <el-input type="" style="width: 100%;" v-model="form.billNo"
                                          size="small" autocomplete="off"
                                          clearable placeholder="请输入附件" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>

            <el-card style="margin-top: 10px">
                <div style="margin-bottom: 10px">
                    <el-button  size="small" type="success" style="margin-right: 8px"
                                :loading="saveLoading" @click="addEntryfun" >添加分录
                    </el-button>
                    <el-button  size="small" type="success" style="margin-right: 8px"
                                :loading="saveLoading" >项目属性
                    </el-button>
                    <el-button  size="small" type="success" style="margin-right: 8px"
                                :loading="saveLoading" >凭证断号观察器
                    </el-button>
                    <el-button  size="small" type="success" style="margin-right: 8px"
                                :loading="saveLoading" >断号优化
                    </el-button>
                    <el-button  size="small" type="success" style="margin-right: 8px"
                                :loading="saveLoading" >科目余额查询
                    </el-button>
                </div>
                <fromtable-details :tableData="form.finVouchersItemsList"></fromtable-details>
            </el-card>

            <el-row style="margin-top: 10px">
                <el-col :span="8">
                    <el-card class="cardRight">
                        <el-checkbox class="borderCheckbox" style="width: 100%" v-model="checked">数量项目</el-checkbox>
                        <el-form :model="form" ref="form" label-width="70px" class="demo-ruleForm">
                            <el-col :span="12">
                                <el-form-item label="单位:" prop="voucherType">
                                    <el-input style="width: 100%;" v-model="form.voucherNo"
                                              size="small" autocomplete="off"
                                              :disabled="true"
                                              clearable placeholder="请输入单位" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="规格:" prop="voucherType">
                                    <el-input style="width: 100%;" v-model="form.voucherNo"
                                              size="small" autocomplete="off"
                                              :disabled="true"
                                              clearable placeholder="请输入规格" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="借方数量:" prop="voucherType">
                                    <el-input style="width: 100%;" v-model="form.voucherNo"
                                              size="small" autocomplete="off"
                                              :disabled="true"
                                              clearable placeholder="请输入借方数量" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="借方单价:" prop="voucherType">
                                    <el-input style="width: 100%;" v-model="form.voucherNo"
                                              size="small" autocomplete="off"
                                              :disabled="true"
                                              clearable placeholder="请输入借方单价" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="贷方数量:" prop="voucherType">
                                    <el-input style="width: 100%;" v-model="form.voucherNo"
                                              size="small" autocomplete="off"
                                              :disabled="true"
                                              clearable placeholder="请输入贷方数量" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="贷方单价:" prop="voucherType">
                                    <el-input style="width: 100%;" v-model="form.voucherNo"
                                              size="small" autocomplete="off"
                                              :disabled="true"
                                              clearable placeholder="请输入贷方单价" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-form>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card class="cardRight">
                        <el-checkbox class="borderCheckbox" style="width: 100%" v-model="checked">外币项目</el-checkbox>
                        <el-form :model="form" ref="form" label-width="70px" class="demo-ruleForm">
                            <el-form-item label="外币名称:" prop="voucherType">
                                <el-input style="width: 100%;" v-model="form.voucherNo"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="请输入外币名称" >
                                </el-input>
                            </el-form-item>
                            <el-form-item label="汇率:" prop="voucherType">
                                <el-input style="width: 100%;" v-model="form.voucherNo"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="请输入汇率" >
                                </el-input>
                            </el-form-item>
                            <el-form-item label="原币借方:" prop="voucherType">
                                <el-input style="width: 100%;" v-model="form.voucherNo"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="请输入原币借方" >
                                </el-input>
                            </el-form-item>
                            <el-form-item label="原币货方:" prop="voucherType">
                                <el-input style="width: 100%;" v-model="form.voucherNo"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="请输入原币货方" >
                                </el-input>
                            </el-form-item>
                        </el-form>
                    </el-card>

                </el-col>
                <el-col :span="8" class="cardRight" style="margin-right: 0">
                    <el-card>
                        <el-checkbox class="borderCheckbox" style="width: 100%" v-model="checked">核算项目</el-checkbox>
                        <el-form :model="form" ref="form" label-width="70px" class="demo-ruleForm">
                            <el-col :span="7">
                                <el-form-item label="" prop="voucherType" label-width="0px">
                                    <el-checkbox v-model="checked">选择类型</el-checkbox>
                                </el-form-item>
                            </el-col>
                            <el-col :span="17">
                                <el-form-item>
                                    <span slot="label">
                                        <el-checkbox v-model="checked">客户:</el-checkbox>
                                    </span>
                                    <el-input style="width: 100%;" v-model="form.voucherNo"
                                              size="small" autocomplete="off"
                                              :disabled="true"
                                              clearable placeholder="请输入客户" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-input style="width: 100%;" v-model="form.voucherNo"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="请输入客户" >
                                </el-input>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item>
                                        <span slot="label">
                                            <el-checkbox v-model="checked">部门:</el-checkbox>
                                        </span>
                                    <el-input style="width: 100%;" v-model="form.voucherNo"
                                              size="small" autocomplete="off"
                                              :disabled="true"
                                              clearable placeholder="请输入客户" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item>
                                        <span slot="label">
                                            <el-checkbox v-model="checked">职员:</el-checkbox>
                                        </span>
                                    <el-input style="width: 100%;" v-model="form.voucherNo"
                                              size="small" autocomplete="off"
                                              :disabled="true"
                                              clearable placeholder="请输入客户" >
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-form-item>
                                        <span slot="label">
                                            <el-checkbox v-model="checked">项目:</el-checkbox>
                                        </span>
                                <el-input style="width: 100%;" v-model="form.voucherNo"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="请输入客户" >
                                </el-input>
                            </el-form-item>

                        </el-form>
                    </el-card>

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

<script>
    import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
    import {getWorkDicts} from "@/api/system/dictbiz";
    import {finvouchersSubmit} from "@/api/iosBasicData/finvouchers";
    import {getCurrentDate, getYearDate} from "@/util/date";
    import fromtableDetails from "@/views/iosBasicData/finvouchers/assembly/fromtableDetails.vue";

    export default {
        components: {SearchQuery,fromtableDetails},
        data(){
            return {
                pageLoading:false, // 整个的动画
                saveLoading:false, // 按钮动画
                // 获取的数据
                form:{
                    voucherDate:getCurrentDate(),
                    finVouchersItemsList:[],
                },
                voucherTypeData:[], // 凭证字数据
            }
        },
        created() {
            this.getWorkDictsfun()
        },
        methods:{
            // 添加分录
            addEntryfun(){
                this.form.finVouchersItemsList.push({

                })
            },
            // 保存
            finvouchersSubmitfun(){
                this.form.businessTypeCode = 'PZDH'
                finvouchersSubmit().then(res=>{

                })
            },
            // 下拉回调
            corpChange(value,name){
                this.$set(this.form,'voucherType',value)
                this.$set(this.form,'billNoFormat',value)
            },
            // 获取字典数据
            getWorkDictsfun(){
                // 凭证字数据
                getWorkDicts('voucher_word_los').then(res=>{
                    this.voucherTypeData = res.data.data
                })
            },
            //返回列表
            backToList() {
                this.$emit('goBack')
            },
        }
    }
</script>

<style scoped>
::v-deep.el-form-item {
    margin-bottom: 0;
}
.borderBox {
    border: 1px solid #b6b6b6;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 2px;
    position: relative;
    margin-right: 10px;
}
.positionCheckbox {
    position: absolute;
    top: -10px;
    left: 10px;
    background: #fff;
}
.cardRight {
    margin-right: 10px;
    height: 220px;
}
.borderCheckbox {
    border-bottom: 1px solid #4a9de6;
    padding-bottom: 5px;
    color:#4a9de6;
    margin-bottom: 5px;
}
</style>