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="isUpdated">
          <el-select v-model="formData.isUpdated" style="width: 200px">
            <el-option label="是" value="TRUE"></el-option>
            <el-option label="否" value="FALSE"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="描述" prop="describing">
            <el-input v-model="formData.describing" placeholder="请输入描述" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否可用" prop="available">
            <el-select v-model="formData.available" style="width: 200px">
              <el-option label="是" value="TRUE"></el-option>
              <el-option label="否" value="FALSE"></el-option>
            </el-select>
          </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="11">
          <el-form-item label="选择集ID" prop="selectId">
            <div class="tag-container flex gap-2">
              <el-tag v-for="ent in tags" :key="ent.selectId" 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" style="width: 100%; height: 200px">
      <el-table-column prop="itemCode" label="保养项ID" />
      <el-table-column prop="itemName" label="保养名称" />
      <el-table-column prop="isSelectd" label="" width="150" >
        <template #header>
          <span>是否必选（默认是）</span>
        </template>
        <template #default="scope">
          <el-switch
            v-model="scope.row.isSelectd"
            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 BasicMaintenanceOptionApi from '@/api/eam/basicMaintenanceOption'
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";
import {ref} from "vue";
import {
  getMaintenanceItemSelectSetList,
  getRalMaintenanceOptionItemList
} from "@/api/eam/maintenanceItemSelectSet";

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 itemsId = ref('')

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

const formData = ref({
  code: '',
  name: '',
  describing: '',
  isUpdated: '',
  remark: '',
  available: '',
  selectId: '',
  optionItem:[]
})
const formRules = reactive({
  code: [
    { required: true, message: '方案编号不能为空', trigger: 'blur' },
    { max: 50, message: '不得超过50个字符', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '方案名称不能为空', trigger: 'blur' },
    { max: 50, message: '不得超过50个字符', trigger: 'blur' }
  ],
  isUpdated: [
    { required: true, message: '不能为空', trigger: 'blur' },
  ],
  available: [
    { required: true, message: '不能为空', trigger: 'blur' },
  ],
  remark: [
    { max: 50, message: '不得超过50个字符', trigger: 'blur' }
  ],
})
const basicFormRef = ref() // 表单 Ref

/** 删除巡检项 */
const handleClose = (id: string) => {
  const index = tags.value.findIndex(tag => tag.selectId === 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') {
      //选择集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.value = item.itemCode;
      });
      maintenanceItemData.value = []
      let query = {
        itemsId: itemsId.value
      }
      let res = await maintenanceItemSelectSetApi.getMaintenanceItemSelectSetList(query);
      //保养项赋值
      try {
          formLoading.value = true;
          for (const item of res) {
            const newItem = {};
            newItem['itemCode'] = item.id;
            newItem['itemName'] = item.name;
            newItem['equipmentParts'] = item.equipmentParts;
            newItem['isSelectd'] = true;
            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) {
    isDisabled.value = true;
    formLoading.value = true
    formData.value = row;
    //添加保养选择集
    let item = (row.id.toString()).split(",")
    try {
        tags.value=[];
        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 maintenanceItemSelectSetApi.getRalMaintenanceOptionItemList(row.code);
    try {
        maintenanceItemData.value = [];
        formLoading.value = true;
        for (const item of res) {
          const newItem = {};
          newItem['id'] = item.id;
          newItem['itemCode'] = item.itemCode;
          newItem['itemName'] = item.itemName;
          newItem['isSelectd'] = item.isSelectd;
          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
  }

  //赋值 保养选择集ID
  formData.value.selectId = tags.value[0].selectId
  console.log(formData.value)
  // 提交请求
  formLoading.value = true
  //formData.value.members = JSON.stringify(tags.value)
  try {
    if (formType.value === 'create') {
        for (var i = 0; i < maintenanceItemData.value.length; i++) {
          maintenanceItemData.value[i].optionCode = formData.value.code
        }
        formData.value.optionItem = maintenanceItemData.value
        //新增保养方案 及 方案与项关系
        await BasicMaintenanceOptionApi.createBasicMaintenanceOption(formData.value)
        message.success(t('common.createSuccess'))
    } else {
        for (var i = 0; i < maintenanceItemData.value.length; i++) {
          maintenanceItemData.value[i].optionCode = formData.value.code
        }
        formData.value.optionItem = maintenanceItemData.value
        console.log(formData.value)
        await BasicMaintenanceOptionApi.updateBasicMaintenanceOption(formData.value)
        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>