BusinessBenchmark/src/components/evaluationknowledgePage/scoringRulesNewDetailPage.vue

<template>
    <div class="rulesNewDetail">
        <el-dialog title="考评得分规则详情" v-model="editEvaluaVisible" width='50vw' :close-on-click-modal="false">
            <div class="periodFrom">
                <div class="detailTable">
                    <el-table
                        size="mini"
                        :highlight-current-row="true"
                        :stripe="false"
                        :border="false"
                        max-height="240"
                        ref="multipleTable"
                        :data="indicItemoptions"
                        @select-all="onSelectAll"
                        @selection-change="selectItem"
                        @row-click="onSelectOp"
                    >
                        <el-table-column type="selection" width="55" align="center" />
                        <el-table-column label="子指标名称" prop="childName" />
                        <el-table-column label="子指标编号" prop="childCode" />
                    </el-table>
                </div>
                <p style="margin-bottom: 5px;color: red">注：请勾选指标项进行公式配置</p>
                <div class="fromCenter">
                    <el-tabs type="border-card">
                        <el-tab-pane label="指标项">
                            <el-table
                                size="mini"
                                :highlight-current-row="true"
                                :stripe="false"
                                :border="false"
                                ref="optionMul"
                                :key="multipleSelectionObj?.childCode"
                                height="240"
                                @select-all="optionMulAll"
                                @selection-change="optionMulItem"
                                @row-dblclick="rowDbclick"
                                :data="multipleSelectionObj?multipleSelectionObj.list:[]"
                            >
                                <el-table-column type="selection" width="55" align="center" />
                                <el-table-column label="指标项名称" prop="optionName" />
                                <el-table-column label="指标项编码" prop="optionCode" />
                                <el-table-column label="计算公式" prop="formula" />
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="函数">
                            <el-table
                                size="mini"
                                fit
                                :show-header="false"
                                :highlight-current-row="true"
                                :stripe="false"
                                :border="false"
                                height="240"
                                @row-dblclick="tabFuncRowClickHandle"
                                :data="funcMsg"
                            >
                                <el-table-column min-width="40%">
                                    <template #default="scope">
                                        <el-popover trigger="hover" placement="bottom">
                                        <p>描述：{{ scope.row.formulaName }}</p>
                                        <!-- <p>参数：{{ scope.row.param }}</p> -->
                                        <template #reference>
                                            <span size="medium" transition="fade-in-linear">{{
                                            scope.row.formulaName
                                            }}</span>
                                        </template>
                                        </el-popover>
                                    </template>
                                </el-table-column>
                                <el-table-column min-width="60%">
                                    <template #default="scope">
                                        <el-popover trigger="hover" placement="bottom">
                                        <p>描述：{{ scope.row.description }}</p>
                                        <!-- <p>参数：{{ scope.row.param }}</p> -->
                                        <template #reference>
                                            <span size="medium" transition="fade-in-linear">{{
                                            scope.row.description
                                            }}</span>
                                        </template>
                                        </el-popover>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="运算符">
                            <el-button-group>
                                <el-button
                                v-for="item in operator"
                                :key="item"
                                plain
                                @click="scorRuleSplit(item, 'operator')"
                                style="width: 60px; margin: 7px 12px; height: 40px; border: 1px solid #409EFF;"
                                >
                                {{ item }}
                                </el-button>
                            </el-button-group>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div>
                    <div style="display:flex">
                        <el-checkbox style="margin-right: 10px" v-model="isrepresentation"/>
                        <el-tag style="margin-bottom: 5px">公式</el-tag>
                    </div>
                    <el-input
                    type="textarea"
                    rows="5"
                    v-model="representation"
                    @blur="representationBlur"
                    id="representation"
                    />
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editEvaluaVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveAndEditIndicatorData()">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import {apiGetIndidicselectById, apiGetIndicatordicsaveList, apiGetfunctionList} from '../../api/api'
export default {
    data() {
        return {
            editEvaluaVisible: false,
            indicItemoptions: [],
            indicItem: '',
            isrepresentation: true,
            isrange: false,
            funcMsg: [],
            operator: [],
            representation: '',
            page:{
                pagesize: 12,
                currentPage: 1,
                total: 0
            },
            rowevalradio: {},
            multipleSelection: [],
            multipleSelectionObj: {},
            rulesNewDetailData: [],
            optionMulItemObj: {}
        }
    },
    created() {
        this.operator = ["+", "-", "*", "/", "(", ")", ">", ">=", "<", "<=", "==", "!=",
            "&&", "||", "!", "%", "true", "false", ".", ]
    },
    methods: {
        init(row) {
            this.editEvaluaVisible = true
            this.indicItemoptions = []
            this.multipleSelection = []
            this.multipleSelectionObj = {}
            this.rowevalradio = row
            this.getIndidicselectById(row)
            this.getFunData()
        },
        getIndidicselectById(row) {
            let that = this
            let params = {
                id: row.id
            }
            apiGetIndidicselectById(params).then(datas =>{
                if (datas && datas.data) {
                    that.indicItemoptions = datas.data.dtoList
                    that.multipleSelection = [datas.data.dtoList[0]]
                    that.multipleSelectionObj = datas.data.dtoList[0]
                    that.$nextTick(() =>{
                        that.$refs.multipleTable.toggleRowSelection(that.multipleSelectionObj, true)
                    })
                }
            })
        },
        representationBlur(val) {
            this.optionMulItemObj.formula = document.getElementById("representation").value
        },
        // 函数查询
        getFunData() {
            let that = this
            apiGetfunctionList().then(datas =>{
                if (datas && datas.data) {
                    that.funcMsg = datas.data
                }
            })
        },
        onSelectAll() {
            this.$refs.multipleTable.clearSelection();
        },
        selectItem(rows) {
            document.getElementById("representation").value = ''
            this.optionMulItemObj = {}
            if (rows.length > 1) {
                const newRows = rows.filter((it, index) => {
                if (index == rows.length - 1) {
                    this.$refs.multipleTable.toggleRowSelection(it, true);
                    return true;
                } else {
                    this.$refs.multipleTable.toggleRowSelection(it, false);
                    return false;
                }
                });
                this.multipleSelection = newRows;
                this.multipleSelectionObj = newRows[0]
            } else {
                this.multipleSelection = rows;
                this.multipleSelectionObj = {}
                this.multipleSelectionObj = rows[0]
            }
        },
        onSelectOp(row) {
            this.$refs.multipleTable.clearSelection();
            this.$refs.multipleTable.toggleRowSelection(row, true);
            this.multipleSelection = [];
            this.multipleSelectionObj = {}
            this.multipleSelectionObj = row;
            this.multipleSelection.push(row);
        },
        tabFuncRowClickHandle(row) {
            let elInput = null
            if (this.isrepresentation) {
                elInput = document.getElementById("representation");
            } else {
                elInput = document.getElementById("range");
            }
            let startPos = elInput.selectionStart; //第0个字符到选中的字符
            let endPos = elInput.selectionEnd; //选中字符到末尾字符
            if (startPos === undefined || endPos === undefined) return;
            let txt = elInput.value;
            let func = row.formulaExpresion
            // 将插值添加到选中光标位置
            let result = txt.substring(0, startPos) + func + txt.substring(endPos);
            elInput.value = result;
            elInput.focus();
        },
        rowDbclick(row) {
            this.scorRuleSplit(row.optionCode);
        },
        scorRuleSplit(val, type) {
            let elInput = null
            if (this.isrepresentation) {
                elInput = document.getElementById("representation");
            } else {
                elInput = document.getElementById("range");
            }
            let startPos = elInput.selectionStart;
            let endPos = elInput.selectionEnd;
            if (startPos === undefined || endPos === undefined) return;
            let txt = elInput.value;

            let txtSplit = ''
            if (type === 'operator') {
                txtSplit = val
            } else {
                txtSplit = '['+val+']'
            }
            let result = txt.substring(0, startPos) + txtSplit + txt.substring(endPos);
            elInput.value = result;
            elInput.focus();
            elInput.selectionStart = startPos + txtSplit.length;
            elInput.selectionEnd = startPos + txtSplit.length;
        },
        optionMulAll() {
            this.$refs.optionMul.clearSelection();
        },
        optionMulItem(row) {
            if (row.length > 1) {
                const newRows = row.filter((it, index) => {
                    if (index == row.length - 1) {
                        this.$refs.optionMul.toggleRowSelection(it, true);
                        return true;
                    } else {
                        this.$refs.optionMul.toggleRowSelection(it, false);
                        return false;
                    }
                })
                // this.representation = newRows[0].formula
                document.getElementById("representation").value = newRows[0].formula
                this.optionMulItemObj = newRows[0]
            } else {
                this.optionMulItemObj = row[0]
                // this.representation = this.optionMulItemObj.formula
                document.getElementById("representation").value = row[0].formula
            }
        },
        //新增/修改指标数据
        saveAndEditIndicatorData() {
            let that = this
            that.indicItemoptions.forEach(item =>{
                item.list.forEach(it =>{
                    it.formula = it.formula !== '' ? encodeURI(it.formula) : ''
                })
            })
            let params = that.indicItemoptions
            apiGetIndicatordicsaveList(params).then(datas =>{
                if (datas) {
                    that.$message({
                        message: '指标项修改成功',
                        type: 'success'
                    });
                    that.editEvaluaVisible = false
                }
            })
        },
    }
}
</script>

<style lang="less">
.rulesNewDetail{
    .el-overlay{
        .el-dialog{
            margin-top: 5vh;
            .el-dialog__body{
                padding: 20px !important;
            }
            .periodFrom{
                .detailTable{
                    margin-bottom: 10px;
                }
                .fromCenter{
                    margin-right: 20px;
                    margin-bottom: 10px;
                    .el-tabs{
                        height: 100%;
                    }
                }
            }
        }
        .el-dialog__footer{
            .dialog-footer{
                display: flex;
                justify-content: center;
                .el-button{
                    width: 180px !important;
                    height: 40px !important;
                }
            }
        }
    }
}
</style>