tire-platform-ui/src/views/iosBasicData/losbfeestemplate/feesTemplateItems.vue

<!--费用模板详情-->
<template>
    <div class="borderless" v-loading="pageLoading">
        <div class="customer-head">
            <div class="customer-back">
                <!--        <i class="back-icon el-icon-arrow-left"></i><i style="font-style:normal">返回管理列表</i>-->
                <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="primary" style="margin-right: 8px" v-if="detailData.seeDisabled"
                            :loading="saveLoading" @click="editHandle">编 辑
                </el-button>
                <el-button  size="small" type="primary" style="margin-right: 8px" v-else
                            :loading="saveLoading" @click="editCustomer">保 存
                </el-button>
            </div>
        </div>
        <div class="customer-main">
            <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
                <containerTitle title="基础资料"></containerTitle>
                <basic-container :showBtn="true">
                    <el-row>
                        <el-col v-for="(item, index) in basicData.column" :key="index" :span="item.span ? item.span : 8"
                                :class="{ isShow: item.display }" >
                            <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
                                <el-select v-if="item.type == 'select'"  v-model="form[item.prop]" :placeholder="'请选择' + item.label" clearable
                                           filterable style="width: 100%" size="small"
                                           :disabled="item.disabled || detailData.seeDisabled">
                                    <el-option v-for="(ite, inde) in item.dicData" :key="inde" :label="ite.label"
                                               :value="ite.value"></el-option>
                                </el-select>
                                <el-input type="textarea" v-else-if="item.type === 'textarea'" v-model.trim="form[item.prop]" size="small"
                                          autocomplete="off" :disabled="item.disabled || detailData.seeDisabled" :placeholder="'请输入' + item.label"></el-input>
                                <el-input v-else type="age" style="width: 100%;" v-model.trim="form[item.prop]" size="small" autocomplete="off"
                                          :disabled="item.disabled || detailData.seeDisabled" clearable :placeholder="'请输入' + item.label"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </basic-container>
            </el-form>
        </div>

        <div class="customer-main margintop">
            <containerTitle title="费用详情"></containerTitle>
            <basic-container>
                <div style="margin-bottom: 10px">
                    <el-button type="primary"
                               size="small"
                               :disabled="detailData.seeDisabled"
                               @click="feestemplatepingCompanyAdd">新增数据
                    </el-button>
                </div>
                <el-table
                    stripe
                    border
                    :row-style="{height:'20px',padding:'0px',fontSize:'12px'}"
                    :cell-style="{padding:'0px',fontSize:'12px'}"
                    :data="form.feesTemplateItemsList"
                    id="out-table"
                    :header-cell-style="tableHeaderCellStyle"
                    style="width: 100%">
                    <el-table-column
                        prop="corpCnName"
                        label="客户">
                        <template slot-scope="{ row }">
                            <span class="nowrapClass">{{row.corpCnName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="corpEnName"
                        label="客户英文">
                        <template slot-scope="{ row }">
                            <span class="nowrapClass">{{row.corpEnName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="feeCode"
                        label="费用编码">
                        <template slot-scope="{ row }">
                            <span class="nowrapClass">{{row.feeCode}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="feeCnName"
                        label="费用">
                        <template slot-scope="{ row }">
                            <span class="nowrapClass">{{row.feeCnName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="feeEnName"
                        label="费用英文">
                        <template slot-scope="{ row }">
                            <span class="nowrapClass">{{row.feeEnName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="quantityRule"
                        label="数量规则">
                        <template slot-scope="{ row }">
                            <span v-for="item of quantityRuleData" :key="item.dictKey"
                                  v-if="item.dictKey == row.quantityRule" >
                                {{item.dictValue}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="quantity"
                        label="数量">
                    </el-table-column>
                    <el-table-column
                        prop="price"
                        label="单价">
                    </el-table-column>
                    <el-table-column
                        prop="unitNo"
                        label="计量单位">
                    </el-table-column>
                    <el-table-column
                        prop="curCode"
                        label="币别">
                    </el-table-column>
                    <el-table-column
                        prop="remarks"
                        label="备注">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="small"
                                :disabled="detailData.seeDisabled"
                                @click="feestemplateCompanyEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                size="small"
                                type="text"
                                :disabled="detailData.seeDisabled"
                                @click="feestemplateCompanyDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </basic-container>
        </div>


        <!--费用详细添加弹窗-->
        <el-dialog
            title="费用详情"
            :visible.sync="feestemplateVisible"
            width="60%"
            append-to-body
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="feestemplateClose">
            <div>
                <el-form :model="feestemplateForm" ref="feestemplateForm" label-width="100px" class="demo-ruleForm">
                    <el-row>
                        <el-col v-for="(item, index) in feestemplateData.column" :key="index" :span="item.span ? item.span : 12"
                                :class="{ isShow: item.display }" >
                            <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
                                <div v-if="item.prop == 'corpId'">
                                    <search-query ref="SearchQuery"
                                                  :datalist="corpData"
                                                  :selectValue="feestemplateForm[item.prop]"
                                                  title="客户"
                                                  :filterable="true"
                                                  :clearable="true"
                                                  :remote="true"
                                                  :forParameter="{key:'id',label:'cnName',value:'id'}"
                                                  @remoteMethod="getBcorpsListfun" @corpChange="corpCorpChange" >
                                        <bcorps></bcorps>
                                    </search-query>
                                </div>
                                <div v-else-if="item.prop == 'feeId'">
                                    <search-query ref="SearchQuery"
                                                  :datalist="feeData"
                                                  :selectValue="feestemplateForm[item.prop]"
                                                  title="费用"
                                                  :filterable="true"
                                                  :clearable="true"
                                                  :remote="true"
                                                  :forParameter="{key:'id',label:'cnName',value:'id'}"
                                                  @remoteMethod="bfeesListfun" @corpChange="feeCorpChange" >
                                        <bfeesdefine></bfeesdefine>
                                    </search-query>
                                </div>
                                <div v-else-if="item.prop == 'quantityRule'">
                                    <search-query ref="SearchQuery"
                                                  :datalist="quantityRuleData"
                                                  :selectValue="feestemplateForm[item.prop]"
                                                  title="数量规则"
                                                  :filterable="true"
                                                  :clearable="true"
                                                  :buttonIf="false"
                                                  :forParameter="{key:'dictKey',label:'dictValue',value:'dictKey'}"
                                                  @corpChange="quantityRuleChange" >
                                    </search-query>
                                </div>
                                <div v-else-if="item.prop == 'curCode'">
                                    <search-query ref="SearchQuery"
                                                  :datalist="curCodeData"
                                                  :selectValue="feestemplateForm[item.prop]"
                                                  title="币别"
                                                  :buttonIf="false"
                                                  :filterable="true"
                                                  :clearable="true"
                                                  :remote="true"
                                                  :forParameter="{key:'id',label:'code',value:'code'}"
                                                  @remoteMethod="getRateListfun" @corpChange="curCodeCorpChange" >
                                        <bfeesdefine></bfeesdefine>
                                    </search-query>
                                </div>
                                <div v-else-if="item.prop == 'unitNo'">
                                    <search-query ref="SearchUnitNo"
                                                  :datalist="unitNoData"
                                                  :selectValue="feestemplateForm[item.prop]"
                                                  title="计量单位"
                                                  :filterable="true"
                                                  :clearable="true"
                                                  :remote="true"
                                                  :forParameter="{key:'id',label:'code',value:'code',disabled:'status'}"
                                                  @remoteMethod="getBunitsListfun" @corpChange="unitNoCorpChange"
                                                  @eldialogConfirm="eldialogConfirm(item.prop)" >
                                        <bunits ref="bunits"
                                                :eldialog="true"
                                                @selectionChange="eldialogMultipleChoice($event,item.prop)"></bunits>
                                    </search-query>
                                </div>

                                <el-input type="textarea" v-else-if="item.type === 'textarea'" v-model.trim="feestemplateForm[item.prop]" size="small"
                                          autocomplete="off" :disabled="item.disabled" :placeholder="'请输入' + item.label"></el-input>
                                <el-input v-else type="age" style="width: 100%;" v-model.trim="feestemplateForm[item.prop]" size="small" autocomplete="off"
                                          :disabled="item.disabled" clearable :placeholder="'请输入' + item.label"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="feestemplateVisible = false;">取 消</el-button>
                    <el-button type="primary" @click="feestemplatecompanyConfirm">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
import {losbfeestemplateDetail, losbfeestemplateSubmit} from "@/api/iosBasicData/losbfeestemplate";
import {bfeesList} from "@/api/iosBasicData/bfees";
import {getBcorpsList} from "@/api/iosBasicData/bcorps";
import { getRateList } from "@/api/iosBasicData/rateManagement";
import {getBunitsList} from "@/api/iosBasicData/bunits";
import SearchQuery from '@/components/iosbasic-data/searchquery.vue'
import bcorps from "@/views/iosBasicData/bcorps/index.vue";
import bfeesdefine from "@/views/iosBasicData/bfeesdefine/index.vue";
import bbusinesstype from "@/views/iosBasicData/bbusinesstype/index.vue";
import bunits from "@/views/iosBasicData/bunits/index.vue";
import {getWorkDicts} from "@/api/system/dictbiz";


export default {
    components: {SearchQuery,bcorps,bfeesdefine,bbusinesstype,bunits},
    props:{
        detailData: {
            type: Object
        }
    },

    data(){
        return {
            pageLoading:false,
            saveLoading:false,
            // 费用详细弹窗
            feestemplateVisible:false,
            // 费用详细弹窗绑定的数据
            feestemplateForm:{},
            feestemplateIndex:null,
            // 客户请求数据
            corpData:[],
            // 费用请求数据
            feeData:[],
            // 数量规则字典数据
            quantityRuleData:[],
            // 币别请求数据
            curCodeData:[],
            // 计算属性数据
            unitNoData:[],

            // 获取到的数据
            form:{
                isShared:0,
                status:0,
                feesTemplateItemsList:[]
            },
            // 基础资料数据
            basicData:{
                column:[
                    // {
                    //     label: "业务类型",
                    //     prop: "businessTypeId",
                    //     rules: [{
                    //         required: true,
                    //         message: "",
                    //         trigger: "blur"
                    //     }]
                    // },
                    // {
                    //     label: "业务类型",
                    //     prop: "businessTypeCnName",
                    //     rules: [{
                    //         required: true,
                    //         message: "",
                    //         trigger: "blur"
                    //     }]
                    // },
                    // {
                    //     label: "业务类型英文",
                    //     prop: "businessTypeEnName",
                    //     disabled:true,
                    //     rules: [{
                    //         required: true,
                    //         message: "请输入业务类型英文名称",
                    //         trigger: "blur"
                    //     }]
                    // },
                    {
                        label: "模版编号",
                        prop: "code",
                        search: true,
                        rules: [{
                            required: true,
                            message: "请输入模版编号",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "模版中文名称",
                        prop: "cnName",
                        rules: [{
                            required: true,
                            message: "请输入模版中文名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "模版英文名称",
                        prop: "enName",
                        rules: [{
                            required: true,
                            message: "请输入模版英文名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "收付",
                        prop: "dc",
                        type:'select',
                        dicData:[{
                            label:'收',
                            value:'D'
                        },{
                            label:'付',
                            value:'C'
                        }],
                        rules: [{
                            required: true,
                            message: "请选择收/付",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "是否公开共享",
                        prop: "isShared",
                        width:100,
                        type:'select',
                        dicData:[{
                            label:'否',
                            value:'0'
                        },{
                            label:'是',
                            value:'1'
                        }],
                    },
                    {
                        label: "状态",
                        prop: "status",
                        type:'select',
                        dicData:[{
                            label:'启用',
                            value:0
                        },{
                            label:'停用',
                            value:1
                        }],
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        span:24,
                        type: 'textarea',
                        minRows: 3,
                    },

                ]
            },
            // 费用详细数据
            feestemplateData:{
                column:[
                    {
                        label: "客户",
                        prop: "corpId",
                        type:'select',
                        rules: [{
                            required: true,
                            message: "",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "客户英文名称",
                        prop: "corpEnName",
                        disabled:true,
                    },
                    {
                        label: "费用",
                        prop: "feeId",
                        rules: [{
                            required: true,
                            message: "",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "费用编码",
                        prop: "feeCode",
                        disabled:true,
                    },
                    // {
                    //     label: "费用中文名称",
                    //     prop: "feeCnName",
                    //     disabled:true,
                    // },
                    {
                        label: "费用英文名称",
                        prop: "feeEnName",
                        disabled:true,
                    },
                    {
                        label: "数量规则",
                        prop: "quantityRule",
                        rules: [{
                            required: true,
                            message: "请输入数量规则，用于根据单位自动计算数量",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "数量",
                        prop: "quantity",
                        rules: [{
                            required: true,
                            // message: "请输入数量",
                            trigger: "blur"
                        },{
                            pattern:/-?[1-9]\d*/,
                            // message:"请输入数字",
                            trigger:'blur'
                        }]
                    },
                    {
                        label: "单价",
                        prop: "price",
                        rules: [{
                            required: true,
                            // message: "请输入单价",
                            trigger: "blur"
                        },{
                            // pattern:/[1-9]\d*.\d*|0\.\d*[1-9]\d*/,
                            pattern:/-?[1-9]\d*/,
                            // message:"请输入数字",
                            trigger:'blur'
                        }]
                    },
                    {
                        label: "计量单位",
                        prop: "unitNo",
                        rules: [{
                            required: true,
                            // message: "请输入计量单位",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "币别",
                        prop: "curCode",
                        rules: [{
                            required: true,
                            // message: "请输入币别",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        span:24,
                        type: 'textarea',
                        minRows: 3,
                    },
                ]
            },
        }
    },
    created() {
        this.getBcorpsListfun()
        this.bfeesListfun()
        this.quantityRuleWorkDictsfun()
        this.getRateListfun()
        this.getBunitsListfun()
    },
    methods:{
        // 获取客户数据
        getBcorpsListfun(cnName){
            getBcorpsList(1,10,{cnName}).then(res=>{
                this.corpData = res.data.data.records
            })
        },
        bfeesListfun(cnName){
            bfeesList(1,10,{cnName}).then(res=>{
                this.feeData = res.data.data.records
            })
        },
        // 获取数量规则字典数据
        quantityRuleWorkDictsfun(){
            getWorkDicts('number_rule').then(res=>{
                this.quantityRuleData = res.data.data
            })
        },
        // 获取币别数据
        getRateListfun(cnName){
            getRateList({
                current:1,
                size: 10,
                cnName
            }).then(res=>{
                this.curCodeData = res.data.data.records
            })
        },
        // 获取计算属性
        getBunitsListfun(){
            getBunitsList(1,10,{status:0}).then(res=>{
                this.unitNoData = res.data.data.records
            })
        },
        // 客户选择之后的回调
        corpCorpChange(value){
            for(let item of this.corpData) {
                if (item.id == value) {
                    this.$set(this.feestemplateForm,'corpId',item.id)
                    this.$set(this.feestemplateForm,'corpEnName',item.enName)
                    this.$set(this.feestemplateForm,'corpCnName',item.cnName)
                }
            }
        },
        // 费用选择之后的回调
        feeCorpChange(value){
            for(let item of this.feeData) {
                if (item.id == value) {
                    this.$set(this.feestemplateForm,'feeId',item.id)
                    this.$set(this.feestemplateForm,'feeCode',item.code)
                    this.$set(this.feestemplateForm,'feeEnName',item.enName)
                    this.$set(this.feestemplateForm,'feeCnName',item.cnName)
                    // 核算要素
                    this.$set(this.feestemplateForm,'elementsId',item.accElementId)
                    this.$set(this.feestemplateForm,'elementsCnName',item.accElementName)
                    this.$set(this.feestemplateForm,'elementsCode',item.elementsCode)
                    this.$set(this.feestemplateForm,'elementsEnName',item.elementsEnName)

                }
            }
        },
        // 数量规则下拉回调
        quantityRuleChange(value){
            this.$set(this.feestemplateForm,'quantityRule',value)
        },
        // 币别选择之后的回调
        curCodeCorpChange(value) {
            this.$set(this.feestemplateForm,'curCode',value)
        },
        // 计算属性选择之后
        unitNoCorpChange(value) {
            for(let item of this.unitNoData) {
                if (item.code == value) {
                    this.$set(this.feestemplateForm,'unitId',item.id)
                    this.$set(this.feestemplateForm,'unitNo',item.code)
                }
            }
        },
        // 查找弹窗里选择导出
        eldialogConfirm(){
            this.$set(this.feestemplateForm,'unitId',this.$refs.bunits[0].selectionList[0].id)
            this.$set(this.feestemplateForm,'unitNo',this.$refs.bunits[0].selectionList[0].code)
            this.$refs.SearchUnitNo[0].corpVisible = false
        },
        // 下拉多选弹窗数据多选回调
        eldialogMultipleChoice(list,name){
            let arr = []
            if (list.length > 1) {
                this.$refs.bunits[0].$refs.crud.toggleSelection() // 先清空所以选择的数据
                arr = [list[list.length -1]] // 获取最新点击的数组
                this.$refs.bunits[0].$refs.crud.toggleSelection(arr,true) // 把刚点击的数组变成选择状态
            }else {
                arr = list
            }
            this.$refs.bunits[0].selectionList = arr
        },
        // 获取详情数据
        losbfeestemplateDetailfun(id){
            this.pageLoading = true
            losbfeestemplateDetail(id).then(res => {
                this.form = res.data.data;
                this.pageLoading = false
            });
        },
        // 编辑按钮更改状态
        editHandle(){
            this.detailData.seeDisabled = false;
        },
        // 保存按钮
        editCustomer(){
            this.$refs.form.validate((valid)=>{
                if (valid) {
                    this.saveLoading = true
                    this.losbfeestemplateSubmitfun()
                }else {
                    return false;
                }
            })
        },
        // 保存接口
        losbfeestemplateSubmitfun(){
            losbfeestemplateSubmit(this.form).then((res)=>{
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                this.saveLoading = false
                this.losbfeestemplateDetailfun(res.data.data.id)
                this.detailData.seeDisabled = true;
            })
        },

        // 费用详细添加
        feestemplatepingCompanyAdd(){
            this.feestemplateForm = {}
            this.feestemplateVisible = true
        },
        // 费用详细编辑
        feestemplateCompanyEdit(index,row){
            this.feestemplateForm = JSON.parse(JSON.stringify(row))
            this.feestemplateIndex = index
            this.feestemplateVisible = true
        },
        // 费用详细删除
        feestemplateCompanyDelete(index,row){
            this.form.feesTemplateItemsList.splice(index,1)
        },
        // 费用详细确认
        feestemplatecompanyConfirm(){
            if (this.feestemplateIndex != null) {
                this.form.feesTemplateItemsList.splice(this.feestemplateIndex,1,this.feestemplateForm)
            }else {
                if (!this.form.feesTemplateItemsList) {
                    this.form.feesTemplateItemsList = []
                }
                this.form.feesTemplateItemsList.push(this.feestemplateForm)
            }
            this.feestemplateForm = {}
            this.feestemplateIndex = null
            this.feestemplateVisible = false
        },
        // 费用详细关闭
        feestemplateClose(done){
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        //返回列表
        backToList() {
            this.$emit('goBack')
        },
        // 表头样式
        tableHeaderCellStyle({row,column,rowIndex, columnIndex}){
            return "padding:4px 0px;fontSize:12px;color:#000;background:#ecf5ff;textAlign:center"
        },
        // 更改表格颜色
        headerClassName(tab){
            //颜色间隔
            let back = ""
            if (tab.columnIndex >= 0 && tab.column.level === 1) {
                if (tab.columnIndex % 2 === 0) {
                    back = "back-one"
                } else if (tab.columnIndex % 2 === 1) {
                    back = "back-two"
                }
            }
            return back;
        },
    }
}
</script>

<style scoped>
::v-deep#out-table .back-one {
    background: #ecf5ff !important;
}
::v-deep#out-table .back-two {
    background: #ecf5ff !important;
}
.borderless {
    height: 100%;
    box-sizing: border-box

}
.customer-main {
//margin-top: 20px;
//width: calc(100% - 140px);
    margin-bottom: 15px;
}
.margintop {
    margin-top: 10px;
}
::v-deep.el-form-item {
    margin-bottom: 0;
}
.isShow {
    display: none;
}
.nowrapClass {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>