新建公共样式文件夹

mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/from.vue

@@ -0,0 +1,269 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1500">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="模具类型" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入模具类型" />
+      </el-form-item>
+      <el-form-item label="启用状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.HELI_COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+       <el-row>
+          <el-col>
+            <el-card>
+              <el-table
+                :data="formData.productBomItemDOList"
+                class="xy-table"
+                @cell-click="handleCellClick"
+                @cell-blur="handleCellBlur"
+              >
+                <el-table-column prop="projectName" label="项目名称">
+                  <template #default="scope">
+                    <el-input v-model="scope.row.projectName" :disabled="!scope.row.editable" />
+                  </template>
+                </el-table-column>
+                <el-table-column prop="name" label="商品名称">
+                  <template #default="scope">
+                    <el-input
+                      v-model="scope.row.name"
+                      @click="openshoopname(scope.$index)"
+                      :disabled="!scope.row.editable"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column prop="inventoryType" label="存货类型">
+                  <template #default="scope">
+                    <dict-tag
+                      :type="DICT_TYPE.PRODUCT_SAVE_TYPE"
+                      :value="scope.row.inventoryType"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column prop="spec" label="规格" />
+         
+                <el-table-column prop="inventoryUnitId" label="库存单位">
+                  <template #default="scope">
+                    <dict-tag
+                      :type="DICT_TYPE.PRODUCT_INVENTORY_UNIT_ID"
+                      :value="scope.row.inventoryUnitId"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column prop="barCode" label="条码" />
+
+                <el-table-column prop="unit" width="120" label="操作单位">
+                  <template #default="scope">
+                    <el-select v-model="scope.row.unit" placeholder="" style="width: 100%">
+                      <el-option
+                        v-for="dict in getIntDictOptions(DICT_TYPE.PRODUCT_INVENTORY_UNIT_ID)"
+                        :key="dict.value"
+                        :label="dict.label"
+                        :value="dict.value.toString()"
+                      />
+                    </el-select>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="proportionNum" width="120" label="比例数量">
+                  <template #default="scope">
+                    <el-input v-model="scope.row.proportionNum" :disabled="!scope.row.editable">
+                      <template #append>{{ scope.row.unit }}</template>
+                    </el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" align="center" width="240">
+                  <template #default="scope">
+                    <el-button
+                      v-if="!scope.row.editable"
+                      type="primary"
+                      size="small"
+                      @click="handleEdit(scope.$index)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button v-else type="success" size="small" @click="handleSave(scope.$index)">
+                      保存
+                    </el-button>
+                    <el-button class="xy-addbutton" @click="handlefuke(scope.$index,scope.row)">复制</el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click.prevent="handleDelete2(scope.$index)"
+                    >
+                      删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+                 <el-button class="xy-addbutton" @click="onAddItem">添加项目</el-button>
+              
+            </el-card>
+          </el-col>
+        </el-row>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import * as MouldTypeApi from '@/api/heli/mouldtype'
+
+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 formData = ref({
+  id: undefined,
+  name: undefined,
+  status: 1,
+  productBomItemDOList:[
+
+  ]
+})
+const formRules = reactive({
+  name: [{ required: true, message: '模具类型不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '启用状态不能为空', trigger: 'blur' }],
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await MouldTypeApi.getMouldType(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as MouldTypeApi.MouldTypeVO
+    if (formType.value === 'create') {
+      await MouldTypeApi.createMouldType(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await MouldTypeApi.updateMouldType(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    status: 1,
+    productBomItemDOList:[]
+  }
+  formRef.value?.resetFields()
+}
+
+const onAddItem = () => {
+  const newData = {
+    // 新数据的属性
+    projectName: '--',
+    name: '--',
+    productStatus: '--',
+    spec: '--',
+    inventoryUnitId: '--',
+    inventoryType: '--',
+    barCode: '--',
+    productTypeId: '--',
+    unit: [],
+    editable: true,
+    productBomItemValueDOList: []
+  }
+  formData.value.productBomItemDOList.push(newData)
+}
+
+// 复制数据
+const handlefuke = (index,item) => {
+const data = formData.value.productBomItemDOList[index]
+console.log(index,item);
+
+  // 复制数据
+  const newData = {
+    ...data,
+    projectName: item.projectName,
+    name: item.name,
+    productStatus: item.productStatus,
+    spec: item.spec,
+    inventoryUnitId: item.inventoryUnitId,
+    inventoryType:item.spec,
+    barCode: item.spec,
+    productTypeId: item.spec,
+    unit: [],
+    editable: true,
+    productBomItemValueDOList: [],
+  }
+  // 添加新数据
+  formData.value.productBomItemDOList.push(newData)
+}
+
+//点击编辑 / 保存   input框是否可输入
+const handleEdit = (index) => {
+  formData.value.productBomItemDOList[index].editable = true
+}
+
+const handleSave = (index) => {
+  formData.value.productBomItemDOList[index].editable = false
+}
+
+const handleCellClick = (row, column, event) => {
+  if (row.editable) {
+    column.el.querySelector('input').focus()
+  }
+}
+
+const handleCellBlur = (row, column, event) => {
+  if (row.editable) {
+    column.el.querySelector('input').blur()
+  }
+}
+
+//删除添加项目
+const handleDelete2 = (index: number) => {
+  formData.value.productBomItemDOList.splice(index, 1)
+}
+</script>