for_client/src/views/data-fill/collapse-form/push-code.vue

<template>
    <div>
        <div class="flex items-center justify-center">
            <el-radio-group v-model="formCode.type">
                <el-radio :value="1" size="large">独立编号</el-radio>
                <el-radio :value="2" size="large">组合编号</el-radio>
            </el-radio-group>
        </div>
        <div v-if="formCode.type === 1" class="mt-2 bg-[#EFF5FF] py-[20px]">
            <!-- 添加一个外层容器使内容居中 -->
            <div class="mx-auto max-w-5xl flex flex-col items-center">
                <!-- 表单部分 -->
                <el-form 
                    ref="formCodeRef" 
                    :model="formCode" 
                    :inline="true" 
                    class="flex flex-wrap items-center justify-center gap-x-2 gap-y-2" 
                    :rules="formCodeRules"
                >
                    <div class="w-[160px]">
                        <el-form-item label=" " prop="startNumber1">
                            <el-input v-model="formCode.startNumber1" placeholder="数值（起）" clearable style="width: 120px;" />
                        </el-form-item>
                    </div>
                    <div class="w-[160px]">
                        <el-form-item label=" " prop="endNumber1">
                            <el-input v-model="formCode.endNumber1" placeholder="数值（止）" clearable style="width: 120px;" />
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label=" " prop="increType1">
                            <el-select
                                v-model="formCode.increType1"
                                placeholder="递增分类"
                                clearable
                                style="width: 120px;"
                            >
                                <el-option label="常规递增" :value="1" />
                                <el-option label="奇数递增" :value="2" />
                                <el-option label="偶数递增" :value="3" />
                            </el-select>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label=" " prop="cycleType1">
                            <el-select
                                v-model="formCode.cycleType1"
                                placeholder="循环分类"
                                clearable
                                style="width: 120px;"
                            >
                                <el-option label="固定循环" :value="1" />
                                <el-option label="递增循环" :value="2" />
                            </el-select>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label=" " prop="cycleTypeGroup1">
                            <el-input v-model="formCode.cycleTypeGroup1" placeholder="循环组数" clearable style="width: 120px;" />
                        </el-form-item>
                    </div>
                </el-form>
        
                <!-- 提示文本部分 - 现在也会居中 -->
                <div class="w-full text-left text-orange-500 line-height-10">
                    <p>提示:起和止分别代表编号数据的开始编号和结束编号</p>
                    <p>固定循环:起止以内的编号每个数据循环n次，如1-3:1、1、1..n个1/2、2、2..n个2/3、3、3..n个3</p>
                    <p>递增循环:起止以内的编号递增n次，如1-3:1、2、3/1、2、3/....n次循环1、2、3</p>
                </div>
            </div>
        </div>
        <div v-if="formCode.type === 2" class="mt-2 flex justify-center bg-[#EFF5FF] py-[20px]">
            <div class="max-w-5xl w-full">
                <el-form ref="formCodeRef1" :model="formCode" :inline="true" :rules="formCodeRules">
                    <!-- First Row -->
                    <div class="flex flex-wrap items-center gap-1">
                        <div class="w-[160px]">
                            <el-form-item label=" " prop="startNumber1">
                                <el-input v-model="formCode.startNumber1" placeholder="数值1（起）" clearable />
                            </el-form-item>
                        </div>
                        <div class="w-[160px]">
                            <el-form-item label=" " prop="endNumber1">
                                <el-input v-model="formCode.endNumber1" placeholder="数值1（止）" clearable />
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label=" " prop="increType1">
                                <el-select
                                    v-model="formCode.increType1"
                                    placeholder="递增分类"
                                    clearable
                                    style="width: 120px"
                                >
                                    <el-option label="常规递增" :value="1" />
                                    <el-option label="奇数递增" :value="2" />
                                    <el-option label="偶数递增" :value="3" />
                                </el-select>
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label=" " prop="cycleType1">
                                <el-select
                                    v-model="formCode.cycleType1"
                                    placeholder="循环分类"
                                    clearable
                                    style="width: 120px"
                                >
                                    <el-option label="固定循环" :value="1" />
                                    <el-option label="递增循环" :value="2" />
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="w-[150px]">
                            <el-form-item label=" " prop="cycleTypeGroup1">
                                <el-input v-model="formCode.cycleTypeGroup1" placeholder="循环组数" clearable />
                            </el-form-item>
                        </div>
                    </div>

                    <!-- Second Row (Info and Separator) -->
                    <div class="mt-4 flex flex-wrap items-start gap-4">
                        <div>
                            <el-form-item label=" " prop="separator">
                                <el-select
                                    v-model="formCode.separator"
                                    placeholder="选择符号"
                                    clearable
                                    style="width: 120px"
                                >
                                    <el-option v-for="(item, index) in separatorOptions" :key="index" :label="item.label" :value="item.label" />
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="min-w-[300px] flex-1 text-orange-500">
                            <p class="mb-1">固定循环:起止以内的编号每个数据循环n次，如1-3:1、1、1...n个1/2、2、2..n个2/3、3、3...n个3</p>
                            <p>递增循环:起止以内的编号递增n次，如1-3:1、2、3/1、2、3/...n次循环1、2、3</p>
                        </div>
                    </div>

                    <!-- Third Row -->
                    <div class="mt-4 flex flex-wrap items-center gap-1">
                        <div class="w-[160px]">
                            <el-form-item label=" " prop="startNumber2">
                                <el-input v-model="formCode.startNumber2" placeholder="数值2（起）" clearable />
                            </el-form-item>
                        </div>
                        <div class="w-[160px]">
                            <el-form-item label=" " prop="endNumber2">
                                <el-input v-model="formCode.endNumber2" placeholder="数值2（止）" clearable />
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label=" " prop="increType2">
                                <el-select
                                    v-model="formCode.increType2"
                                    placeholder="递增分类"
                                    clearable
                                    style="width: 120px"
                                >
                                    <el-option label="常规递增" value="1" />
                                    <el-option label="奇数递增" value="2" />
                                    <el-option label="偶数递增" value="3" />
                                </el-select>
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label=" " prop="cycleType2">
                                <el-select
                                    v-model="formCode.cycleType2"
                                    placeholder="循环分类"
                                    clearable
                                    style="width: 120px"
                                >
                                    <el-option label="固定循环" value="1" />
                                    <el-option label="递增循环" value="2" />
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="w-[150px]">
                            <el-form-item label=" " prop="cycleTypeGroup2">
                                <el-input v-model="formCode.cycleTypeGroup2" placeholder="循环组数" clearable />
                            </el-form-item>
                        </div>
                    </div>
                </el-form>
                <div class="mt-2 text-orange-500 line-height-10">
                    <p>提示:数值1和数值2分别代表组合编号的前后数据;起和止分别代表前后数据的开始编号和结束编号</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import wbsApi from '~api/data-fill/wbs'

import { getDictionaryData } from '~uti/tools'
import { formValidate } from 'js-fast-way'

const props = defineProps({
    projectId: [String, Number],
    contractId: [String, Number],
    tableId: [String, Number],
    treeId: [String, Number],
    classify:[String, Number],
    keyVal:[String, Number],
})

//事件

//参数变量
const projectId = ref(props.projectId)
const contractId = ref(props.contractId)
const table_id = ref(props.tableId)
const tree_id = ref(props.treeId)
const classify = ref(props.classify)
const key = ref(props.keyVal)

//监听
watch(() => [
    props.projectId,
    props.contractId,
    props.tableId,
    props.treeId,
    props.classify,
    props.keyVal,
], ([pid, cid, tableId, treeId, cfy, Key]) => {
    projectId.value = pid
    contractId.value = cid
    table_id.value = tableId
    tree_id.value = treeId
    classify.value = cfy
     key.value = Key
})

const formCode = ref({
type:1,
  
})

const formCodeRules = {
  startNumber1: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入数值（起）',
    },
    {
      pattern: /^[1-9]\d*$/,
      trigger: 'blur',
      message: '只能输入正整数',
    },
  ],
  endNumber1: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入数值（止）',
    },
    {
      pattern: /^[1-9]\d*$/,
      trigger: 'blur',
      message: '只能输入正整数',
    },
  ],
    increType1: {
        required: true,
        trigger: 'change',
        message: '请选择递增分类',
    },
    cycleType1: {
        required: true,
        trigger: 'change',
        message: '请选择循环分类',
    },
    cycleTypeGroup1: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入循环组数',
    },
    {
      pattern: /^[1-9]\d*$/,
      trigger: 'blur',
      message: '只能输入正整数',
    },
  ],
    startNumber2: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入数值（起）',
    },
    {
      pattern: /^[1-9]\d*$/,
      trigger: 'blur',
      message: '只能输入正整数',
    },
  ],
    endNumber2: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入数值（止）',
    },
    {
      pattern: /^[1-9]\d*$/,
      trigger: 'blur',
      message: '只能输入正整数',
    },
  ],
    increType2: {
        required: true,
        trigger: 'change',
        message: '请选择递增分类',
    },
    cycleType2: {
        required: true,
        trigger: 'change',
        message: '请选择循环分类',
    },
    cycleTypeGroup2: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入循环组数',
    },
    {
      pattern: /^[1-9]\d*$/,
      trigger: 'blur',
      message: '只能输入正整数',
    },
  ],
    separator: {
        required: true,
        trigger: 'change',
        message: '请选择选择符号',
    },


  
}
const formCodeRef = ref(null)
const formCodeRef1 = ref(null)
const separatorOptions = ref([])
const getSeparatorOptions = async () => {
  separatorOptions.value = await getDictionaryData('separator', true )
}
//渲染完成
onMounted(() => {
  getSeparatorOptions()
 
  
})




const saveBatchCode = async ()=>{

    const validate = formCode.value.type === 1
        ? await formValidate(formCodeRef.value, formCodeRules)
        : await formValidate(formCodeRef1.value, formCodeRules)
     if (!validate) {
        return false
     }

    const { error, code, data, msg } = await wbsApi.batchAddNumbers({
        ...formCode.value,
        classify: classify.value,
        nodeId: tree_id.value,
        pkeyId: table_id.value,
        key:key.value,
    })
    if (!error && code === 200) {
        window?.$message?.success('操作成功')
       return true
    } 
}









// 暴露出去
defineExpose({
  saveBatchCode,
})
</script>