123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395 |
- <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>
|