admin/src/views/project/list/edit-formula.vue

<template>
    <hc-drawer v-model="isShow" ui="hc-project-list-edit-formula-drawer" to-id="hc-layout-box" is-close @close="drawerClose">
        <hc-card is-action-btn :scrollbar="isScrollBar">
            <div class="hc-project-list-edit-formula-card" :class="isScrollBar ? '' : 'is-no-scroll'">
                <!-- 顶部操作 -->
                <div class="hc-formula-card-box border-dashed-card hc-flex mb-14px h-58px">
                    <div class="retain hc-flex h-full w-174px">
                        <el-checkbox v-model="isRetain" size="large" />
                        <span class="ml-5px text-14px">保留</span>
                        <div class="relative ml-5px w-90px">
                            <el-input-number v-model="retainNum" block :step="1" :min="0" :max="5" :disabled="!isRetain" controls-position="right" />
                        </div>
                        <span class="ml-5px text-14px">位</span>
                    </div>
                    <div class="range hc-flex h-full w-155px">
                        <el-button :type="deviationRangeShow ? 'primary' : ''" @click="setDeviationRange">允许偏差值范围</el-button>
                    </div>
                    <div class="menu h-full flex-1">
                        <hc-body padding="0">
                            <el-menu :default-active="formulaMenuIndex" mode="horizontal" @select="handleFormulaMenu">
                                <el-sub-menu v-for="(arr, key, index) in formulaMenuList" :key="key" :index="key">
                                    <template #title>{{ key }}</template>
                                    <el-menu-item v-for="(item, i) in arr" :key="i" :index="`${index + 1}-${i + 1}`">{{ item?.name }}</el-menu-item>
                                </el-sub-menu>
                            </el-menu>
                        </hc-body>
                    </div>
                    <div class="hand hc-flex h-full w-100px">
                        <el-button>手写模式</el-button>
                    </div>
                </div>
                <!-- 函数公式 -->
                <div class="hc-formula-card-math border-dashed-card mb-14px">
                    <div class="header hc-flex">
                        <div class="name flex-1 text-14px">函数公式.</div>
                        <div class="extra relative ml-24px">
                            <el-button :type="isResetFun ? 'primary' : 'info'" size="small" @click="resetFunClick">重置函数</el-button>
                        </div>
                    </div>
                    <div class="body relative">
                        <template v-for="(item, index) in resultFormula" :key="index">
                            <span class="element-class text-26px" :class="item.selected ? 'is-cur' : ''" @click="resultFormulaItem(item, index)">{{ item.name }}</span>
                        </template>
                        <span class="ml-10px mr-10px text-26px">=</span>
                    </div>
                </div>
                <!-- 重置函数 -->
                <div class="hc-formula-reset-fun border-dashed-card mb-14px">
                    1111
                </div>
            </div>
            <template #action>
                <el-button @click="drawerClose">取消</el-button>
                <el-button type="primary" :loading="submitLoading" @click="submitClick">保存</el-button>
            </template>
        </hc-card>
    </hc-drawer>
</template>

<script setup>
import { ref, watch } from 'vue'
import { deepClone, getObjValue, isNullES } from 'js-fast-way'
import mainApi from '~api/project/formula'
import eleApi from '~api/project/element'

const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
})

//事件
const emit = defineEmits(['close', 'finish'])

//双向绑定
const isShow = defineModel('modelValue', {
    default: false,
})

//监听数据
const dataInfo = ref(props.data)
watch(() => props.data, (data) => {
    dataInfo.value = getObjValue(data)
}, { immediate: true, deep: true })

//监听显示
watch(isShow, (val) => {
    if (val) getDataApi()
})

//基础变量
const operatorReg = /^\+|-|\*|%/ //加减乘除
const startFCRegExp = /^FC\.([a-zA-Z\d]+)\(/ //匹配开始的FC.xxx(
const isScrollBar = ref(false)

//获取数据
const getDataApi = async () => {
    console.log(dataInfo.value)
    getTypeMapApi().then()
    getWbsFormElementData().then()
}

//保留位数
const isRetain = ref(false)
const retainNum = ref(2)

//允许偏差值范围
const deviationRangeShow = ref(false)
const setDeviationRange = () => {
    deviationRangeShow.value = !deviationRangeShow.value
}

//获取顶部菜单数据
const formulaMenuIndex = ref(null)
const formulaMenuList = ref({})
const formulaMenuMap = ref({})
const getTypeMapApi = async () => {
    const { data } = await mainApi.getTypeMap()
    const res = getObjValue(data)
    formulaMenuList.value = deepClone(res)
    //生成map，方便查找
    for (let key in res) {
        if (typeof(res[key]) === 'object') {
            res[key].forEach((formula)=>{
                formula.template = JSON.parse(formula.template)
                if (operatorReg.test(formula.template.ft)) {
                    formulaMenuMap.value[formula.template.ft] = formula
                } else if (startFCRegExp.test(formula.template.ft)) {
                    let regRes = formula.template.ft.match(startFCRegExp)
                    formulaMenuMap.value[regRes[0]] = formula
                }
            })
        }
    }
}

//菜单被选择
const handleFormulaMenu = (index, path) => {
    console.log(index, path)
}

//获取数据
const resultFormula = ref([])
const getWbsFormElementData = async () => {
    const { eleId } = getObjValue(dataInfo.value)
    resultFormula.value = []
    if (isNullES(eleId)) return
    const { data } = await eleApi.detail(eleId)
    const obj = getObjValue(data)
    resultFormula.value = [{
        type: 'Element',
        name: obj.eName,
        id: obj.id,
        selected: false,
        tableElementKey: obj.tableElementKey,
        children: [],
    }]
}

//被点击
const resultFormulaItem = (item, index) => {
    item.selected = !item.selected
    console.log(item, index)
}

//是否重置函数
const isResetFun = ref(false)
const resetFunClick = () => {
    isResetFun.value = !isResetFun.value
    isScrollBar.value = !isResetFun.value
}


//保存
const submitLoading = ref(false)
const submitClick = async () => {

}

//关闭抽屉
const drawerClose = () => {
    isShow.value = false
    emit('close')
}
</script>

<style lang="scss">
@import '~src/styles/view/project/edit-formula';
</style>