gas-injection/src/views/vent/reportManager/comment/report-add.vue

<template>
    <div class="report-add">
        <a-form :model="formState" labelAlign="center" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-form-item label="所属部门编号：" >
          <a-select v-model:value="formState.sysOrgCode" placeholder="请选择...">
            <a-select-option v-for="item in sysOrgCodeList" :key="item.value">{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>
            <a-form-item label="数据名称：">
                <a-input v-model:value="formState.name" placeholder="请输入..." />
            </a-form-item>
            <a-form-item label="集团报表单元格所在sheet页：">
                <a-input v-model:value="formState.groupSheet" placeholder="请输入..." />
            </a-form-item>
            <a-form-item label="集团报表单元格所在列：">
                <a-input v-model:value="formState.groupCol" placeholder="请输入..." />
            </a-form-item>
            <a-form-item label="集团报表单元格所在行：">
                <a-input v-model:value="formState.groupRow" placeholder="请输入..." />
            </a-form-item>
            <a-form-item label="矿报表单元格：">
                <a-input v-model:value="formState.sheet" placeholder="请输入sheet页,多个值中间用逗号隔开" style="width:330px;" />
                <a-input v-model:value="formState.col" placeholder="请输入col列,多个值中间用逗号隔开" style="width:330px;margin:0px 10px" />
                <a-input v-model:value="formState.row" placeholder="请输入row行,多个值中间用逗号隔开" style="width:330px" />
            </a-form-item>
            <a-form-item label="是否计算：">
                <a-radio-group v-model:value="formState.isCompute" name="radioGroup">
                    <a-radio :value=true>是</a-radio>
                    <a-radio :value=false>否</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="计算公式：">
                <JDictSelectTag v-model:value="formState.formula" placeholder="请选择计算公式..." dictCode="report_formula" />
            </a-form-item>
        </a-form>
        <div class="confirm-btn">
            <a-button type="primary" @click="getReportAdd">添加</a-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive,onMounted } from 'vue'
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { reportAdd,queryDepartTreeSync } from '../reportManager.api'

let formState = reactive({
    sysOrgCode:'',
    formula: '',
    groupCol: '',
    groupRow: '',
    groupSheet: '',
    isCompute: true,
    mineCells: [],
    sheet:'',
    col:'',
    row:'',
    name: ''
})
//所属部门编号列表
let sysOrgCodeList=reactive<any[]>([])

async function getReportAdd(){
    formState.mineCells.length=0
    let paramRow=formState.row.split(',')
    let paramCol=formState.col.split(',')
    let paramSheet=formState.sheet.split(',')
    paramRow.forEach((el,index)=>{
        formState.mineCells.push({sheet:paramSheet[index],col:paramCol[index],row:paramRow[index]})
    })
    console.log(formState,'formState------------')
    let res=await reportAdd({sysOrgCode:formState.sysOrgCode,formula:formState.formula,groupCol:formState.groupCol,groupRow:formState.groupRow, groupSheet:formState.groupSheet,isCompute:formState.isCompute,mineCells:JSON.stringify(formState.mineCells),name:formState.name})
    console.log(res,'res9999------------------')
}

//获取所属部门编号列表数据
async function queryDepartTreeSyncList(){
    let res=await queryDepartTreeSync()
    console.log(res,'部门编号列表--------')
    sysOrgCodeList.length=0
    if(res.length!=0){
        res.forEach(el=>{
            sysOrgCodeList.push({label:el.title,value:el.orgCode})
        })
    }
}

onMounted(()=>{
    queryDepartTreeSyncList()
})

</script>

<style lang="less" scoped>
.report-add {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 30px 10px;
    margin: 0 auto;
    box-sizing: border-box
}

.zxm-form {
    width: 80%;
    margin-bottom: 20px;
}

.confirm-btn {
    position: absolute;
    bottom: 290px;
    left: 50%;
    transform: translate(-50%,0);
    height: 40px;
  
}

:deep(.zxm-form-item-label > label) {
    color: #fff;
}
:deep(.zxm-select-selector) {
    width: 100%;
    color: #fff ;
    border: 1px solid #3ad8ff77 !important;
    background-color: #ffffff00 !important;
}
:deep(.zxm-select-selection-item){
    color: #fff !important;
}
:deep(.zxm-select-selection-placeholder){
    color: #ccc !important;
}
:deep(.zxm-input){
    color: #fff;
    border: 1px solid #3ad8ff77 !important;
    background-color: #ffffff00 !important;
}

</style>