sfms3.0-ui/src/views/qms/qualityNotice/components/qualityBatch.vue

<template>
  <div class="content">
    <el-tabs
      v-model="editableTabsValue"
      editable
      class="demo-tabs"
      @edit="handleTabsEdit"
      type="border-card"
      tab-position="left"
      :stretch="false"
    >
      <el-tab-pane
        v-for="item in data.process"
        :key="item.name"
        :label="item.description"
        :name="item.name"
        >
        <el-form :model="item" label-width="auto" :rules="qualityBatchRules" ref="qualityBatchFormRef">
          <el-row :gutter="20">
            <el-col :span="12" v-if="item.code">
              <el-form-item label="编码" prop="code">
                <el-input v-model="item.code" placeholder="根据系统生成" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <Dialog
      title="修改名称"
      v-model="dialogVisibleName"
      width="500px"
      :close-on-click-modal="false"
    >
      <div style="padding: 0px 20px">
        <el-form ref="nameRef" :model="nameForm">
          <el-form-item
            :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"
            prop="name"
          >
            <el-input v-model="nameForm.name" style="width: 240px" placeholder="请输入名称" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick1" />
      </template>
    </Dialog>
  </div>
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as defaultButtons from '@/utils/disposition/defaultButtons'
const editableTabsValue = ref('1')
const dialogVisibleName = ref(false)
const nameRef = ref(false)
const qualityBatchFormRef = ref()//质量物料表单
const qualityBatchRules = ref({})//质量物料校验
const nameForm = ref({
  name: ''
})
const data = ref({
  process:[]
})
/** 弹窗按钮 */
let Butttondata: any = []
Butttondata = [
    defaultButtons.formSaveBtn(null), // 保存
    defaultButtons.formCloseBtn(null) // 关闭
  ]
const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' | 'add') => {
  if (action === 'add') {
    nameForm.value.name = ''
    dialogVisibleName.value = true
  } else if (action === 'remove') {
    const tabs = data.value.process
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }
    editableTabsValue.value = activeName
    data.value.process = tabs.filter((tab) => tab.name !== targetName)
  }
}
/** 修改名称时间 */
let tabIndex = 1
const buttonBaseClick1 = (val) => {
  // 保存
  if (val == 'save') {
    if (!nameRef.value) return
    nameRef.value.validate((valid, fields) => {
      if (valid) {
        const newTabName = `${++tabIndex}`
        data.value.process.push({
          description: nameForm.value.name,
          name: newTabName,
          inspectionCode: '',
          dynamicUpdateCode:'',
          sequenceCode: '',
          inspectionCharCode: '',
          inspectionCharacteristicsBaseVO: {
            describe: '',
            inspectionMethodCode: '',
            samplingProcessCode: '',
            isCanUpdate: '',
            isDestructionInspection: '',
            resultEntryMethod: '',
            featureType: '',
            quantifyIsCapping: false,
            quantifyIsLowlimit: false,
            quantifyIsTarget: false,
            quantifyTarget: '',
            quantifyCapping: '',
            quantifyLowlimit: '',
            quantifyUom: '',
            quantifyDecimal: '',
            quantifyQuantifyCode: ''
          }
        })
       
        editableTabsValue.value = newTabName
        dialogVisibleName.value = false
      } else {
        console.log('error submit!')
        return false
      }
    })
  }
  // 关闭
  else if (val == 'close') {
    dialogVisibleName.value = false
  }
}
</script>
<style scoped lang="scss">
.content {
  padding: 20px;
  .type {
    padding: 0px 20px 20px;
  }
}
</style>