sfms3.0-ui/src/views/eam/basicSpotCheckOption/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="spotCheckItemData" style="width: 100%; height: 80%">
      <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 request from "@/config/axios";
import { SearchTable } from '@/components/SearchTable'
import { BasicSpotCheckSelectSet} from "@/views/eam/spotCheckSelectSet/spotCheckSelectSet.data";
import * as SpotCheckSelectSetApi from "@/api/eam/spotCheckSelectSet";
import * as BasicSpotCheckOptionApi from "@/api/eam/basicSpotCheckOption";
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 spotCheckItemData = 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) => {
  console.log(id)
  console.log(tags)
  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,'dianJianItem')
}

/** 选择巡检项弹窗 */
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 = SpotCheckSelectSetApi.getBasicSpotCheckSelectSetPage
  _searchTableAllSchemas.value = BasicSpotCheckSelectSet.allSchemas
  openCommon()
}

/** 弹窗选择之后  回调函数 添加选择集 */
const searchTableSuccess = (formField, searchField, val, formRef, type, row ) => {
  nextTick?.(async () => {
    if (formField === 'dianJianItem') {
      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;
          spotCheckItemData.value = [];
          for (const item of itemsId.split(",")) {
            let res = await request.get({url: `/eam/basic/spot-check-item/get?id=` + item})
            const newItem = {};
            newItem['itemCode'] = res.id;
            newItem['itemName'] = res.name;
            newItem['equipmentParts'] = res.equipmentParts;
            newItem['isSelectd'] = true;
            spotCheckItemData.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-spotCheck-option/get?id=` + item[i] });
          tags.value.push(itemData.value);
        }
    } finally {
        formLoading.value = false
    }
    //添加点检项
    let res = await request.get({url: `/eam/relation-spotCheck-option-item/getList?optionCode=` + row.code})
    try {
        spotCheckItemData.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;
          spotCheckItemData.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 (spotCheckItemData.value.length > 10  ){
    message.warning('点检项最多10个');
    return
  }

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