sfms3.0-ui/src/views/eam/maintenanceItemSelectSet/itemSelectSetForm.vue

<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <el-form
      ref="basicFormRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      label-width="100px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="选择集名称" prop="name">
            <el-input v-model="formData.name" placeholder="选择集名称" :disabled="isDisabled"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark" placeholder="请输入备注名称" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="保养项" prop="items">
            <div class="tag-container flex gap-2">
              <el-tag v-for="ent in tags" :key="ent.content" closable :disable-transitions="false"  @close="handleClose(ent.id)">
                {{ ent.name}}
              </el-tag>
              <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="w-20" size="small"/>
              <el-button v-else class="button-new-tag" size="small" @click="addItem">
                添加保养项 +
              </el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>

<!--添加保养项弹窗-->
  <SearchTable ref="searchTableRef" @searchTableSuccess="searchTableSuccess" />

</template>
<script lang="ts" setup>
import * as SelectSetApi from '@/api/eam/maintenanceItemSelectSet'
import request from "@/config/axios";
import { SearchTable } from '@/components/SearchTable'
import { MaintenanceItem} from "@/views/eam/maintenanceItem/maintenanceItem.data";
import * as maintenanceItemApi from "@/api/eam/maintenanceItem";
import {ElInput} from "element-plus";

defineOptions({ name: 'TeamForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const tags=ref([])

const inputValue = ref('')
const inputVisible = ref(false)
const isDisabled = ref(false)
const InputRef = ref<InstanceType<typeof ElInput>>()

const itemData = ref({
  id: '',
  content: ''
})

const formData = ref({
  id: '',
  name: '',
  itemCode: '',
  available: 'TRUE',
  remark: '',
  createTime: ''
})
const formRules = reactive({
  name: [
    { required: true, message: '选择集名称不能为空', trigger: 'blur' },
    { max: 50, message: '不得超过50个字符', trigger: 'blur' }
  ],
  remark: [
    { max: 50, message: '不得超过50个字符', trigger: 'blur' }
  ],
})
const basicFormRef = ref() // 表单 Ref

/** 删除保养项 */
const handleClose = (id: string) => {
  const index = tags.value.findIndex(tag => tag.id === id);
  if (index !== -1) {
    tags.value.splice(index, 1);
  }
}

/** 弹窗相关参数 */
const searchTableRef = ref();
const _searchTableTitle = ref();
const _searchTableAllSchemas = ref();
const _searchTablePage = ref();
const _formField = ref();
const _searchField = ref();
const _multiple = ref();
const _type = ref();
const _row = ref();
const _searchCondition = ref({})


const addItem = () =>{
  addItemCommon(true,'baoYangItem')
}

/** 选择保养项弹窗 */
const addItemCommon = (multiple,field) => {
  _searchCondition.value = {}
  const filters: any[] = []
  filters.push({
    action: "==",
    column: 'available',
    value: 'TRUE'
  })
  // 参数整理
  _searchCondition.value.isSearch = true
  _searchCondition.value.filters = filters
  _searchTableTitle.value = '选择保养项'
  _multiple.value = multiple
  _formField.value = field
  _searchField.value = field
  _searchTablePage.value = maintenanceItemApi.getMaintenanceItemPage
  _searchTableAllSchemas.value = MaintenanceItem.allSchemas
  openCommon()
}

/** 弹窗选择之后  回调函数 添加选择集 */
const searchTableSuccess = (formField, searchField, val, formRef, type, row ) => {
  nextTick?.(() => {
      if (formField === 'baoYangItem') {
          val.forEach(item => {
            const isExist = tags.value.some(tag => tag.name === item.name);
            if (!isExist){
              const newItem = {};
              newItem['name'] = item.name;
              newItem['id'] = item.id;
              tags.value.push(newItem);
            }
          });
      }
  })
}
/*打开弹窗*/
const openCommon = () => {
  searchTableRef.value.open(
    _searchTableTitle.value,
    _searchTableAllSchemas.value,
    _searchTablePage.value,
    _formField.value,
    _searchField.value,
    _multiple.value,
    _type.value,
    _row.value,
    _searchCondition.value
  )
}
/** 初始化弹窗 */
const open = async (type: string, row?: object) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  // 修改时，设置数据
  if (row) {
    tags.value=[];
    isDisabled.value = true;
    formLoading.value = true
    formData.value = row;
    let item = (row.itemCode).split(",")
    try {
      for (var i = 0; i < item.length; i++) {
        itemData.value = await request.get({ url: `/eam/basic/maintenance-item/get?id=` + item[i] });
        tags.value.push(itemData.value);
      }
    } finally {
      formLoading.value = false
    }
  }
  // 新增时
  else {
    resetForm()
    isDisabled.value = false;
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  if (!basicFormRef) return
  const valid = await basicFormRef.value.validate()
  if (!valid) return
  if (tags.value.length > 10  ){
    message.warning('保养项最多10个');
    return
  }

  let result = '';
  for (var i = 0; i < tags.value.length; i++) {
    result += tags.value[i].id + ',';
  }
  if(result.endsWith(',')){
    result = result.substring(0,result.length -1)
  }
  formData.value.itemCode = result
  // 提交请求
  formLoading.value = true
  //formData.value.members = JSON.stringify(tags.value)
  try {
    const data = formData.value as unknown as SelectSetApi.MaintenanceItemSelectSetVO
    if (formType.value === 'create') {
      await SelectSetApi.createBasicMaintenanceItemSelectSet(data)
      message.success(t('common.createSuccess'))
    } else {
      await SelectSetApi.updateBasicMaintenanceItemSelectSet(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: '',
    name: '',
    itemCode: '',
    available: 'TRUE',
    remark: '',
    createTime: ''
  }
  tags.value=[];
  basicFormRef.value?.resetFields()
}

</script>

<style scoped>
.tag-container {
  margin-top: 10px; /* 可根据需要调整标签容器与表单项之间的间距 */
  border: 1px solid #ccc; /* 添加边框样式 */
  padding: 10px; /* 可根据需要调整容器内边距 */
  width: 950px; /* 设置固定宽度为 950px */
  overflow-y: auto; /* 当内容溢出容器高度时显示滚动条 */
  word-wrap: break-word; /* 使用 word-wrap 属性实现超出范围换行 */
  overflow-wrap: break-word; /* 兼容性更好的写法 */
  flex-wrap: wrap;
}
.input-with-button {
  display: flex;
  align-items: center;
  width: 100%;
}

.input-with-button > .el-input {
  flex: 1;
  /*margin-right: 10px;*/
}

</style>