加入属性分类值的可选项

.vscode/settings.json

@@ -87,7 +87,7 @@
     "source.fixAll.stylelint": "explicit"
   },
   "[vue]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "Vue.volar"
   },
   "i18n-ally.localesPaths": ["src/locales"],
   "i18n-ally.keystyle": "nested",

src/views/erp/product/category/propertiescategorymap/ProductCategoryPropertiesCategoryMapForm.vue

@@ -1,42 +1,45 @@
 <template>
+  <Dialog title="新增分类属性值" v-model="valueDialogVisible">
+    <el-form ref="valueFormRef" :model="valueFormData" :rules="valueFormRules" label-width="100px" v-loading="formLoading">
+      
+      <el-form-item label="分类属性值" prop="productCategoryPropertiesValue">
+        <el-input v-model="valueFormData.productCategoryPropertiesValue" placeholder="请输入分类属性值" clearable />
+      </el-form-item>
+     
+    </el-form>
+    <template #footer>
+      <el-button @click="addProductCategoryPropertiesValue" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="valueDialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
   <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <el-form
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">
-      ref="formRef"
+      <el-form-item label="分类属性" prop="productCategoryPropertiesId" v-show="false">
-      :model="formData"
+        <el-input v-model="formData.productCategoryPropertiesId" placeholder="请输入分类属性" clearable />
-      :rules="formRules"
-      label-width="100px"
-      v-loading="formLoading"
-    >
-      <el-form-item  label="类别属性" prop="productCategoryPropertiesId"
-      v-show="false"
-      >
-        <el-input
-          v-model="formData.productCategoryPropertiesId"
-          placeholder="请输入类别属性"
-          clearable
-        />
       </el-form-item>
-      <el-form-item label="类别属性" prop="productPropertiesCn">
+      <el-form-item label="分类属性" prop="productPropertiesCn">
-        <el-input
+        <el-input v-model="formData.productPropertiesCn" placeholder="请输入分类属性" clearable disabled />
-          v-model="formData.productPropertiesCn"
-          placeholder="请输入类别属性"
-          clearable
-          disabled
-        />
       </el-form-item>
-      <el-form-item label="产品分类" prop="productCategoryId" v-if="productPropertiesCategory===1">
+      <el-form-item label="产品分类" prop="productCategoryId" v-if="productPropertiesCategory === 1">
-        <el-tree-select
+        <el-tree-select v-model="formData.productCategoryId" :data="productCategoryTree" :props="defaultProps"
-          v-model="formData.productCategoryId"
+          check-strictly default-expand-all placeholder="请选择上级编号" />
-          :data="productCategoryTree"
-          :props="defaultProps"
-          check-strictly
-          default-expand-all
-          placeholder="请选择上级编号"
-        />
       </el-form-item>
-      <el-form-item label="类别属性值" prop="productCategoryPropertiesValue" v-if="productPropertiesCategory===0">
+      <el-row>
-        <el-input v-model="formData.productCategoryPropertiesValue" placeholder="请输入类别属性值" />
+        <el-col :span="21">
+          <el-form-item label="分类属性值" prop="productCategoryPropertiesValue" v-if="productPropertiesCategory === 0">
+            <el-select v-model="formData.productCategoryPropertiesValue" placeholder="请选择产品分类属性值" clearable>
+              <el-option v-for="dict in productCategoryPropertiesValueList" :key="dict.id"
+                :label="dict.productCategoryPropertiesValue" :value="dict.productCategoryPropertiesValue" />
+            </el-select>
           </el-form-item>
+        </el-col>
+        <el-col :span="1">
+          <span></span>
+        </el-col>
+        <el-col :span="1">
+          <el-button type="primary" @click="openValueForm">新 增</el-button>
+        </el-col>
+      </el-row>
     </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -46,9 +49,11 @@
 </template>
 <script setup lang="ts">
 import { ProductCategoryPropertiesCategoryMapApi, ProductCategoryPropertiesCategoryMapVO } from '@/api/erp/product/category/productcategoryproperties/propertiescategorymap'
-import { ProductCategoryApi,ProductCategoryVO} from '@/api/erp/product/category'
+import { ProductCategoryApi } from '@/api/erp/product/category'
 import { defaultProps, handleTree } from '@/utils/tree'
-import { ProductCategoryPropertiesApi,ProductCategoryPropertiesVO } from '@/api/erp/product/category/productcategoryproperties'
+import { ProductCategoryPropertiesApi } from '@/api/erp/product/category/productcategoryproperties'
+import { ProductCategoryPropertiesValueApi, ProductCategoryPropertiesValueVO } from '@/api/erp/product/category/productcategoryproperties/productcategorypropertiesvalue'
+
 
 /** 产品属性类别 */
 let productPropertiesCategory = ref()
@@ -69,6 +74,16 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 const dialogVisible = ref(false) // 弹窗的是否展示
+//分类属性值新增弹窗
+const valueDialogVisible = ref(false) // 弹窗的是否展示
+const valueFormData = ref({
+  productCategoryPropertiesValue: null as any
+})
+const valueFormRules = reactive({
+  productCategoryPropertiesValue: [
+    { required: true, message: '请输入分类属性值', trigger: 'blur' },
+  ]
+})
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
@@ -82,12 +97,44 @@ const formData = ref({
 const formRules = reactive({
 })
 const formRef = ref() // 表单 Ref
+/** 分类属性值list */
+const productCategoryPropertiesValueList = ref()
+
+/** 新增分类属性值 */
+const addProductCategoryPropertiesValue = async () => {
+  const data = {
+    productCategoryPropertiesId: props.productCategoryPropertiesId,
+    productCategoryPropertiesValue: valueFormData.value.productCategoryPropertiesValue
+  } 
+  await ProductCategoryPropertiesValueApi.createProductCategoryPropertiesValue(data).then((res) => {
+    getAllProductCategoryPropertiesValue()
+    valueDialogVisible.value = false
+    message.success(t('common.createSuccess'))
+  })
+}
+
+/** 查询分类属性值的可选项 */
+const getAllProductCategoryPropertiesValue = async () => {
+  await ProductCategoryPropertiesValueApi.getProductCategoryPropertiesValuePage({
+    pageNo: 1,
+    pageSize: 100,
+    productCategoryPropertiesId: props.productCategoryPropertiesId
+  }).then((res) => {
+    productCategoryPropertiesValueList.value = res.list
+  })
+}
+
+
 /** 判断使用下拉还是使用自定义属性 */
 const getProductPropertiesCategory = async () => {
 
-ProductCategoryPropertiesApi.getProductCategoryProperties(props.productCategoryPropertiesId).then((res) => {
+  ProductCategoryPropertiesApi.getProductCategoryProperties(props.productCategoryPropertiesId).then((res) => {
     productPropertiesCategory.value = res.productPropertiesCategory
-})
+  })
+}
+/** 打开分类属性值弹窗 */
+const openValueForm = () => {
+  valueDialogVisible.value = true
 }
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -98,6 +145,7 @@ const open = async (type: string, id?: number) => {
   formData.value.productCategoryPropertiesId = props.productCategoryPropertiesId
   formData.value.productPropertiesCn = props.productPropertiesCn
   await getProductPropertiesCategory()
+  await getAllProductCategoryPropertiesValue()
   getAllProductCategory()
   // 修改时，设置数据
   if (id) {
@@ -144,7 +192,7 @@ const resetForm = () => {
     productCategoryId: undefined,
     productCategoryPropertiesValue: undefined,
     productCategoryPropertiesId: null as any
-}
+  }
   formRef.value?.resetFields()
 }
 

src/views/erp/product/category/propertiescategorymap/index.vue

@@ -8,10 +8,10 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="类别属性">
+      <el-form-item label="分类属性">
         <el-input
           v-model="productPropertiesCn"
-          placeholder="请输入类别属性"
+          placeholder="请输入分类属性"
           clearable
           disabled
           @keyup.enter="handleQuery"
@@ -59,7 +59,7 @@
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
       <el-table-column label="编号" align="center" prop="id" />
       <el-table-column label="产品分类" align="center" prop="productCategoryValue" />
-      <el-table-column label="类别属性值" align="center" prop="productCategoryPropertiesValue" />
+      <el-table-column label="分类属性值" align="center" prop="productCategoryPropertiesValue" />
       <el-table-column
         label="创建时间"
         align="center"
@@ -130,7 +130,7 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
-/** 类别属性中文 */
+/** 分类属性中文 */
 let productPropertiesCn = ref('')
 
 /** 查询列表 */
@@ -207,7 +207,7 @@ const searchProductCategoryProperties = async () => {
       productPropertiesCn.value = res.productPropertiesCn
     })
   }catch (error) {
-    message.error('查询类别属性失败')
+    message.error('查询分类属性失败')
   }
 }