Docpre.vue

<!-- 单据表格模块 -->


        <!-- 前后端字段path及前后端字段docgrdm.docgrd   后端docgrd为List<Docgrd>类型 -->
<template>
    <div class="docpre">
        
        <c-col :span="24" style="margin-bottom: 30px;">
            <el-form-item :prop="`${argadr.grp}.${rol}.docgrd`" label=""  label-width="0px">
                <c-table max-height="300px" style="text-align: center;" stripe
                    :list="this.model[argadr.grp][rol].docgrd || []" :paginationShow="false" :border="true">
                    <el-table-column :label="model[argadr.grp][rol].docdsclab || '提交单据'" class="messageLabel">
                        <el-table-column label="1st" width="auto" prop="cmail1" background-color="red">
                            <template slot-scope="scope">
                                <c-input v-model="scope.row.cmail1" @change="docpre" :disabled="disabledCmail1"
                                    maxlength="12">
                                </c-input>
                            </template>

                        </el-table-column>
                        <el-table-column label="2nd" width="auto" prop="cmail2">
                            <template slot-scope="scope">
                                <c-input v-model="scope.row.cmail2" @change="docpre" :disabled="disabledCmail2"
                                    maxlength="12">
                                </c-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="单据" prop="docnam" width="auto">
                            <template slot="header" slot-scope="scope">
                                <c-row>
                                    <c-col :span="12">
                                        <span style="line-height: 64px;">单据</span>
                                    </c-col>
                                    <c-col :span="12">
                                        <div style="float: right;">
                                            <c-button  @click="addTableValue" v-if="ifShowAdd">＋</c-button><br>
                                            <c-button  @click="deleteTable" v-if="ifShowDelete">－</c-button>
                                        </div>
                                    </c-col>
                                </c-row>

                            </template>
                            <template slot-scope="scope">
                              <el-form-item :prop="`${argadr.grp}.${rol}.docgrd.`+ scope.$index +'.docnam'">
                                <!-- check时有提示信息，需用el-form-item标签包起来，且有prop=  -->
                                <!-- {{scope.row.docnam}} -->
                                <c-select style="width: 100%" placeholder="请选择" v-model="scope.row.docnam"
                                    :disabled="disabledDocnam">
                                    <el-option v-for="item in codes[argadr.code]" :key="item.value" :label="item.label"
                                        @change="docpre" :value="item.value">
                                    </el-option>
                                </c-select>
                              </el-form-item>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </c-table>
            </el-form-item>
        </c-col>

    </div>
</template>
<script>
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
// import Event from "~/model/Botdcr/Event"
import Utils from "~/utils";
export default {


    inject: ["root"],
    mixins: [commonProcess],


    data() {
        return {
            data: [],


            codes: { ...CodeTable },
            newValue: {
                id: 0,
                cmail1: "",
                cmail2: "",
                docnam: "",
                description: "",
                serialNum: "",
                tableName: "",
                tcddoc: "",
            },
        };
    },
    watch: {},

    props: {
        model: {
            type: Object,
            default: undefined,
        },
        argadr: {
            type: Object,
            default: function () {
                return {
                    grp: "", //所属模块  eg:bdtp,botp...
                    path: "",    // path为存储数据字段所对应的default方法
                    code: "",   //表格选项码表参数
                };
            },
        },
        rol: {
            type: String,
            default: "docgrdm",
        },
        disabledCmail1: {
            type: Boolean,
            default: false,
        },
        disabledCmail2: {
            type: Boolean,
            default: false,
        },
        disabledDocnam: {
            type: Boolean,
            default: false,
        },
        ifShowAdd: {
            type: Boolean,
            default: true,
        },
        ifShowDelete: {
            type: Boolean,
            default: true,
        },
    },



    methods: {
        ...Event,
        setColSpan: function () {
            // console.log(this.$el.getElementsByClassName("el-table__header"))
            // 获取表头的所有单元格
            var x = this.$el.getElementsByClassName("el-table__header")
            console.log(x)
            var x1 = this.$el.getElementsByClassName("el-table__header")[0].rows[1].cells
            var x2 = this.$el.getElementsByClassName("el-table__header")[0].rows[0].cells

            x1[2].colSpan = 2   // document
            // 将gutter的display设为none
            x1[3].style.display = 'none'    //gutter

            x2[0].colSpan = 4   //  docdsclab
            // x2[0].style.background-color = '#FFF'
            // 将gutter的display设为none
            x2[1].style.display = 'none'    //gutter


        },
        addTableValue(index) {
            var newTableValue = Object.assign({}, this.newValue);
            const serial = Utils.generateUUID();
            var grp = this.argadr.grp;
            newTableValue.serialNum = serial;
            // this.model[argadr.grp].docgrdm.docgrd.splice(index - 1, 0, newTableValue);
            this.model[grp][rol].docgrd.splice(index - 1, 0, newTableValue);
        },
        deleteTable(index) {
            // 'this.model.${argadr.grp}.docgrdm.docgrd.splice(index, 1)';
            var grp = this.argadr.grp;
            this.model[grp][rol].docgrd.splice(index, 1);
        },
        async docpre() {
            let rtnmsg = await this.executeDefault(this.argadr.path)
            // let rtnmsg = await this.executeDefault('bodgrp.blk.docpre')
            if (rtnmsg.respCode == SUCCESS) {
                //TODO 处理数据逻辑
                this.updateModel(rtnmsg.data)
            }
            else {
                this.$notify.error({ title: '错误', message: '服务请求失败！' });
            }
        },
    },
    created: function () {
    },
    mounted() {
        // 注意一定要保证DOM渲染完成后在进行合并操作，否则会找不到元素
        this.$nextTick(function () {
            this.setColSpan();
        })
    }
};



</script>
<style scoped>
.messageLabel>>>.el-form-item__label {
    text-align: left;
    font-weight: bold;
    font-size: 12px;
}

.docpre>>>.el-form-item__content{
    margin-left:0px;
}
/* .add_del_button:hover {
    cursor: pointer; 
    background-color: rgb(230, 227, 227);
}

.add_del_button {
    display: block;
    flex: 0;
    line-height: 15px;
    text-align: center;
    font-size: 12px;
    border-radius: 5px;
    border: 1px solid rgb(194, 192, 192);
    background-color: rgb(240, 240, 240);
}

.add_button {
    margin-bottom: 2px;
} */

/* body .el-table th.gutter {
    display: table-cell !important;
    height:0px;
    font-weight: 0px;
    border-bottom: 1px solid #bbb !important;
    position: absolute;
    right:0;
    top: 0;

} */

/* 
.gutter {
    display: none;
    width: 0px !important;
    background: rgb(51, 51, 51);
}

tr {
    background: rgb(51, 51, 51);
} */
</style>