sfms3.0-ui/src/views/eam/basicMaintenanceOption/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="code">
            <el-input v-model="formData.code" placeholder="方案编号" :disabled="isDisabled"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="方案名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入方案名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="描述" prop="describing">
            <el-input v-model="formData.describing" placeholder="请输入描述" />
          </el-form-item>
        </el-col>
        <el-form-item label="项是否可修改" prop="isUpdated">
          <el-select v-model="formData.isUpdated" style="width: 150px">
            <el-option label="是" value="TRUE"></el-option>
            <el-option label="否" value="FALSE"></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
      <el-col :span="12">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-col>
      <el-form-item label="是否可用" prop="available">
        <el-select v-model="formData.available" style="width: 150px">
          <el-option label="是" value="TRUE"></el-option>
          <el-option label="否" value="FALSE"></el-option>
        </el-select>
      </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="选择集ID" prop="selectId">
            <div class="tag-container flex gap-2">
              <el-tag v-for="ent in tags" :key="ent.content" closable :disable-transitions="false"  @close="handleClose(ent.selectId)">
                {{ ent.selectId}}
              </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>
    <el-table :data="maintenanceItemData" ref="tableEquipment" style="width: 100%; height: 80%">
      <el-table-column prop="name" label="保养名称" />
      <el-table-column prop="content" label="保养要求" />
      <el-table-column prop="equipmentParts" label="保养部位" />
      <el-table-column prop="opera" label="" width="130" >
        <template #header>
          <span>是否必选默认是</span>
        </template>
        <template #default="scope">
          <el-switch
            v-model="scope.row.replaceFlag"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="是"
            inactive-text="否"
          />
        </template>
      </el-table-column>
    </el-table>
    <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/inspectionItemSelectSet'
import request from "@/config/axios";
import { SearchTable } from '@/components/SearchTable'
import { BasicMaintenanceItemSelectSet} from "@/views/eam/maintenanceItemSelectSet/maintenanceItemSelectSet.data";
import * as maintenanceItemSelectSetApi from "@/api/eam/maintenanceItemSelectSet";
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 maintenanceItemData = ref([])

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

const formData = ref({
  code: '',
  name: '',
  describing: '',
  isUpdated: '',
  remark: '',
  available: '',
  selectId: ''
})
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 = maintenanceItemSelectSetApi.getBasicMaintenanceItemSelectSetPage
  _searchTableAllSchemas.value = BasicMaintenanceItemSelectSet.allSchemas
  openCommon()
}

/** 弹窗选择之后  回调函数 添加选择集 */
const searchTableSuccess = (formField, searchField, val, formRef, type, row ) => {
  nextTick?.(async () => {
    if (formField === 'baoYangItem') {
      let itemsId = '';
      //选择集ID赋值
      val.forEach(item => {
        const isExist = tags.value.some(tag => tag.id === item.id);
        if (!isExist) {
          const newItem = {};
          newItem['itemCode'] = item.itemCode;
          newItem['selectId'] = item.id;
          tags.value = [];
          tags.value.push(newItem);
        }
        itemsId = item.itemCode
      });
      //保养项赋值
      try {
        formLoading.value = true;
        maintenanceItemData.value = [];
        for (const item of itemsId.split(",")) {
          let res = await request.get({url: `/eam/basic/maintenance-item/get?id=` + item})
          const newItem = {};
          newItem['name'] = res.name;
          newItem['content'] = res.content;
          newItem['equipmentParts'] = res.equipmentParts;
          maintenanceItemData.value.push(newItem);
        }
      } finally {
        formLoading.value = false;
      }
    }
  })
}
/*打开弹窗*/
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=[];
    maintenanceItemData.value = [];
    isDisabled.value = true;
    formLoading.value = true
    formData.value = row;
    let item = (row.id.toString()).split(",")
    try {
      for (var i = 0; i < item.length; i++) {
        itemData.value = await request.get({ url: `/eam/basic-maintenance-option/get?id=` + item[i] });
        tags.value.push(itemData.value);
      }
    } finally {
      formLoading.value = false
    }

    let res = await request.get({url: `/eam/relation-maintenance-item-select-set/getList?selectId=` + row.selectId})

    try {
      formLoading.value = true;
      for (const item of res) {
        console.log(item)
        let res = await request.get({url: `/eam/basic/maintenance-item/get?id=` + item.itemCode})
        const newItem = {};
        newItem['name'] = res.name;
        newItem['content'] = res.content;
        newItem['equipmentParts'] = res.equipmentParts;
        maintenanceItemData.value.push(newItem);
      }
    } 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 (maintenanceItemData.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.InspectionItemSelectSetVO
    if (formType.value === 'create') {
      await SelectSetApi.createInspectionItemSelectSet(data)
      message.success(t('common.createSuccess'))
    } else {
      await SelectSetApi.updateInspectionItemSelectSet(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    code: '',
    name: '',
    describing: '',
    isUpdated: '',
    remark: '',
    available: '',
    selectId: ''
  }
  tags.value=[];
  maintenanceItemData.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>