sfms3.0-ui/src/views/qms/basicDataManage/inspectionTemplate/addForm.vue

<template>
  <Dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    :width="dialogWidth"
    :close-on-click-modal="false"
    :vLoading="formLoading"
  >
    <div style="max-height: 60vh; overflow-y: auto; padding: 0px 20px">
      <Form ref="formRefMain" :schema="formAllSchemasMain" :is-col="true" />
      <div class="tab-pane">
        <div class="left">
          <div class="plus">
            <Icon icon="ep:plus" size="14" color="black" @click="addProcess"
          /></div>

          <div class="left-list" v-for="(item, index) in data.list" :key="index">
            <div class="left-item" :class="chooseIndex == index ? 'active' : ''">
              <el-input
                v-model="item.description"
                style="width: 120px; margin: 0px 10px"
                v-if="item.isEdit"
                placeholder="请输入工序名称"
              />
              <div class="name" v-else @click="chooseItem(item, index)">{{ item.description }}</div>
              <Icon
                icon="ep:select"
                class="mr-5px ml-5px"
                v-if="item.isEdit"
                @click="editName(item)"
              />
              <Icon icon="ep:edit" class="mr-5px ml-5px" v-else @click="editName(item)" />
              <Icon icon="ep:close" class="mr-5px" @click="delProcess(index)" />
            </div>
          </div>
        </div>
        <div class="right">
          <div class="small-title">检验工序</div>
          <Form
            ref="formRefProcess"
            :schema="formAllSchemasProcess"
            :is-col="true"
            labelWidth="150px"
          />
          <div class="small-title">检验特性</div>
          <Form
            ref="formRefFeatures"
            :schema="formAllSchemasFeatures"
            :is-col="true"
            labelWidth="150px"
          />
        </div>
      </div>
      <!-- <el-tabs
        v-model="editableTabsValue"
        editable
        class="demo-tabs"
        @edit="handleTabsEdit"
        type="border-card"
        tab-position="left"
      >
      <el-tab-pane
          v-for="item in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
          <template #label>
            <span class="custom-tabs-label">
              <el-icon><calendar /></el-icon>
              <span>Route</span>
            </span>
          </template>
          <div class="small-title">检验工序</div>
          <Form
            ref="formRefProcess"
            :schema="formAllSchemasProcess"
            :is-col="true"
            labelWidth="150px"
          />
          <div class="small-title">检验特性</div>
          <Form
            ref="formRefFeatures"
            :schema="formAllSchemasFeatures"
            :is-col="true"
            labelWidth="150px"
          />
        </el-tab-pane>
      </el-tabs> -->
    </div>
    <template #footer>
      <ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick" />
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import * as defaultButtons from '@/utils/disposition/defaultButtons'
import { json } from 'stream/consumers'
const props = defineProps({
  // 显示窗口宽度设置
  basicFormWidth: {
    type: String,
    default: ''
  },
  // 检验特性表单，列表 相关信息
  formAllSchemasFeatures: {
    type: Object,
    required: true,
    default: null
  },
  // 检验工序表单，列表 相关信息
  formAllSchemasProcess: {
    type: Object,
    required: true,
    default: null
  },
  // 检验模板表单，列表 相关信息
  formAllSchemasMain: {
    type: Object,
    required: true,
    default: null
  },
  // 底部按钮集合
  footButttondata: {
    type: Array,
    required: false,
    default: null
  }
})
const { t } = useI18n() // 国际化

const dialogVisible = ref(true) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const dialogWidth = ref()
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})
const chooseIndex = ref(0)
const formAllSchemasFeatures = ref(props.formAllSchemasFeatures?.formSchema)
const formAllSchemasProcess = ref(props.formAllSchemasProcess?.formSchema)
const formAllSchemasMain = ref(props.formAllSchemasMain?.formSchema)

const formRefMain = ref('')
const formRefProcess = ref('')
const formRefFeatures = ref('')

const onSubmit = () => {
  console.log('submit!')
}
if (props.basicFormWidth) {
  dialogWidth.value = props.basicFormWidth + '%'
} else {
  dialogWidth.value = props.isBusiness ? '60%' : '40%'
}
/** 打开弹窗 */
const open = async (type: string, row?: any, masterParmas?: any, titleName?: any) => {
  dialogVisible.value = true
  if (titleName) {
    dialogTitle.value = t('action.' + titleName)
  } else {
    dialogTitle.value = t('action.' + type)
  }
  try {
    nextTick(() => {
      formRefMain.value.setValues(data.value)
      formRefProcess.value.setValues(data.value.list[0])
    })
  } finally {
    formLoading.value = false
  }
}
defineExpose({ open, dialogVisible, formLoading }) // 提供 open 方法，用于打开弹窗

const data = ref({
  code: '',
  description: '',
  version: '',
  list: [
    {
      description: '哈哈哈',
      code: '',
      sequenceCode: ''
    },
    {
      description: '呵呵呵',
      isEdit: false,
      code: '555',
      sequenceCode: '6666'
    },
    {
      description: '哈呵呵',
      isEdit: false
    }
  ]
})

/** 弹窗按钮 */
let Butttondata: any = []
if (props.footButttondata) {
  Butttondata = props.footButttondata
} else {
  Butttondata = [
    defaultButtons.formSaveBtn(null), // 保存
    defaultButtons.formCloseBtn(null) // 关闭
  ]
}
// 编辑名字
const editName = (item) => {
  if(!item.description){
    p
    return;
  }
  item.isEdit = !item.isEdit
}
// 添加工序
const addProcess = () => {
  data.value.list.push({
    name: '哈哈哈',
    isEdit: true
  })
}
// 删除工序
const delProcess = (index) => {
  data.value.list.splice(index, 1)
}

const chooseItem = (item, index) => {
  const data1 = JSON.parse(JSON.stringify(unref(formRefProcess)?.formModel))
  data.value.list.forEach((element,index) => {
    if (element.code == data1.code) {
      data.value.list[index] =JSON.parse(JSON.stringify( data1))
    }
  })
  chooseIndex.value = index
  formRefProcess.value.setValues(item)
}
</script>
<style lang="scss" scoped>
.small-title {
  font-weight: bold;
  padding: 0px 10px 10px;
  color: #1a8bfc;
  font-size: 16px;
}
.el-tabs--left .el-tabs__header.is-left {
  min-height: 700px !important;
}
.tab-pane {
  border: 1px solid #dcdfe6;
  display: flex;
  .left {
    background: #f5f7fa;
    width: 200px;
    border-right: 1px solid #dcdfe6;
    position: relative;
    .plus {
      position: absolute;
      right: 0px;
      border: 1px solid #dcdfe6;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px;
      top: 8px;
      border-radius: 4px;
      cursor: pointer;
    }
    .left-item {
      display: flex;
      align-items: center;
      height: 36px;
      margin-bottom: 10px;
      cursor: pointer;

      .name {
        width: 120px;
        overflow: hidden;
        padding: 0px 10px;
        height: 36px;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 36px;
      }
    }
    .active {
      background: white;
    }
  }
  .right {
    flex: 1;
    padding: 20px;
  }
}
</style>