增加产品管理模块

src/components/mul-pic-upload/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <el-upload
+      :action="uploadAction"
+      :headers="uploadHeaders"
+      list-type="picture-card"
+      :on-preview="handlePictureCardPreview"
+      :on-remove="handleRemove"
+      :on-success="handleUploadSuccess"
+      :file-list="imageList"
+      :before-upload="beforeAvatarUpload"
+    >
+      <el-icon><Plus /></el-icon>
+    </el-upload>
+    <el-dialog v-model="dialogVisible">
+      <img
+        width="100%"
+        :src="dialogImageUrl"
+        alt=""
+      >
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import $cookie from 'vue-cookies'
+import { ElMessage } from 'element-plus'
+
+const uploadHeaders = { Authorization: $cookie.get('Authorization') }
+const uploadAction = http.adornUrl('/admin/file/upload/element')
+const props = defineProps({
+  modelValue: {
+    default: '',
+    type: String
+  }
+})
+const emit = defineEmits(['update:modelValue'])
+const dialogImageUrl = ref('')
+const dialogVisible = ref(false)
+const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
+
+const imageList = computed(() => {
+  const res = []
+  if (props.modelValue) {
+    const imageArray = props.modelValue?.split(',')
+    for (let i = 0; i < imageArray.length; i++) {
+      res.push({ url: resourcesUrl + imageArray[i], response: imageArray[i] })
+    }
+  }
+  emit('update:modelValue', props.modelValue)
+  return res
+})
+
+/**
+ * 图片上传
+ */
+// eslint-disable-next-line no-unused-vars
+const handleUploadSuccess = (response, file, fileList) => {
+  const pics = fileList.map(file => {
+    if (typeof file.response === 'string') {
+      return file.response
+    }
+    return file.response.data
+  }).join(',')
+  emit('update:modelValue', pics)
+}
+
+/**
+ * 限制图片上传大小
+ */
+const beforeAvatarUpload = (file) => {
+  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg'
+  if (!isJPG) {
+    ElMessage.error('上传图片只能是jpeg/jpg/png/gif 格式!')
+  }
+  const isLt2M = file.size / 1024 / 1024 < 2
+  if (!isLt2M) {
+    ElMessage.error('上传图片大小不能超过 2MB!')
+  }
+  return isLt2M && isJPG
+}
+
+// eslint-disable-next-line no-unused-vars
+const handleRemove = (file, fileList) => {
+  const pics = fileList.map(file => {
+    if (typeof file.response === 'string') {
+      return file.response
+    }
+    return file.response.data
+  }).join(',')
+  emit('update:modelValue', pics)
+}
+
+const handlePictureCardPreview = (file) => {
+  dialogImageUrl.value = file.url
+  dialogVisible.value = true
+}
+
+</script>

src/components/pic-upload/index.vue

@@ -2,23 +2,22 @@
   <div>
     <el-upload
       class="pic-uploader-component"
-      :action="http.adornUrl('/admin/file/upload/element')"
+      :action="uploadAction"
+      :headers="uploadHeaders"
       accept=".png,.jpg,.jpeg,.gif"
-      :headers="{Authorization: $cookie.get('Authorization')}"
       :show-file-list="false"
       :on-success="handleUploadSuccess"
       :before-upload="beforeAvatarUpload"
     >
       <img
-        v-if="value"
+        v-if="modelValue"
         alt=""
-        :src="resourcesUrl + value"
+        :src="resourcesUrl + modelValue"
         class="pic"
       >
-      <i
+      <el-icon v-else>
-        v-else
+        <Plus />
-        class="el-icon-plus pic-uploader-icon"
+      </el-icon>
-      />
     </el-upload>
   </div>
 </template>
@@ -26,10 +25,12 @@
 <script setup>
 import $cookie from 'vue-cookies'
 import { ElMessage } from 'element-plus'
+const uploadHeaders = { Authorization: $cookie.get('Authorization') }
+const uploadAction = http.adornUrl('/admin/file/upload/element')
 const emit = defineEmits(['update:modelValue'])
 // eslint-disable-next-line no-unused-vars
 const props = defineProps({
-  value: {
+  modelValue: {
     default: '',
     type: String
   }
@@ -84,5 +85,4 @@ const beforeAvatarUpload = (file) => {
 .pic-uploader-component :deep(.el-upload:hover) {
   border-color: #409EFF;
 }
-
 </style>

src/router/index.js

@@ -31,6 +31,11 @@ export const mainRoutes = {
       path: 'home',
       name: 'home',
       component: () => import('@/views/common/home/index.vue')
+    },
+    {
+      path: '/prodInfo',
+      name: 'prodInfo',
+      component: () => import('@/views/modules/prod/prodInfo/index.vue')
     }
   ],
   // eslint-disable-next-line no-unused-vars

src/stores/prod.js

@@ -5,50 +5,38 @@ export const scoreProdStore = defineStore('prod', {
       id: 0,
       skuTags: [],
       defalutSku: {
-        price: 0.01, // 销售价
+        price: 0, // 销售价
-        oriPrice: 0.01, // 市场价
+        oriPrice: 0, // 市场价
         stocks: 0, // 库存
-        skuScore: 1, // 积分价格
         properties: '', // 销售属性组合字符串
         skuName: '', // sku名称
         prodName: '', // 商品名称
-        partyCode: '', // 商品编码
         weight: 0, // 商品重量
         volume: 0, // 商品体积
-        status: 1, // 0 禁用 1 启用
+        status: 1 // 0 禁用 1 启用
-        stockWarning: 0, // 库存预警
-        prodNameCn: '',
-        prodNameEn: '',
-        skuSingleProds: []
       }
     }
   },
   actions: {
-    updateSkuTags (skuTags) {
+    // eslint-disable-next-line no-unused-vars
+    updateSkuTags (state, skuTags) {
       this.skuTags = skuTags
     },
-    updateSkuTag ({ skuTag, index }) {
+    // eslint-disable-next-line no-unused-vars
-      index = parseInt(index)
+    addSkuTag (state, skuTag) {
-      if (skuTag && typeof index === 'number') {
-        this.skuTags.splice(index, 1, skuTag)
-      }
-    },
-    addSkuTag (skuTag) {
       this.skuTags.push(skuTag)
     },
-    removeSkuTag (tagIndex) {
+    // eslint-disable-next-line no-unused-vars
+    removeSkuTag (state, tagIndex) {
       this.skuTags.splice(tagIndex, 1)
     },
-    removeSkuTagItem ({ tagIndex, tagItemIndex }) {
+    // eslint-disable-next-line no-unused-vars
+    removeSkuTagItem (state, { tagIndex, tagItemIndex }) {
       this.skuTags[tagIndex].tagItems.splice(tagItemIndex, 1)
     },
-    addSkuTagItem ({ tagIndex, tagItem }) {
+    // eslint-disable-next-line no-unused-vars
+    addSkuTagItem (state, { tagIndex, tagItem }) {
       this.skuTags[tagIndex].tagItems.push(tagItem)
-    },
-    updateSkuTagItem ({ skuTagItem, tagIndex, tagItemIndex }) {
-      if (skuTagItem) {
-        this.skuTags[tagIndex].tagItems.splice(tagItemIndex, 1, skuTagItem)
-      }
     }
   }
 })

src/views/modules/order/order/components/order-info.vue

@@ -293,6 +293,7 @@
 
 <script setup>
 import DevyAdd from './order-devy.vue'
+const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
 const dataForm = ref({
   orderId: 0,
   orderNumber: '',

src/views/modules/order/order/index.vue

@@ -204,7 +204,10 @@
       </div>
     </div>
     <!-- 空 -->
-    <div class="empty-tips">
+    <div
+      v-if="!dataList.length"
+      class="empty-tips"
+    >
       暂无数据
     </div>
     <el-pagination

src/views/modules/prod/category/add-or-update.vue

@@ -0,0 +1,208 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="!dataForm.currentId ? '新增' : '修改'"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef"
+      :model="dataForm"
+      :rules="dataRule"
+      label-width="80px"
+      @keyup.enter="onSubmit()"
+    >
+      <el-form-item
+        v-if="dataForm.type !== 2"
+        label="分类图片"
+        prop="pic"
+      >
+        <pic-upload v-model="dataForm.pic" />
+      </el-form-item>
+      <el-form-item
+        v-if="dataForm.type !== 2"
+        label="分类名称"
+        prop="categoryName"
+      >
+        <el-input
+          v-model="dataForm.categoryName"
+          controls-position="right"
+          :min="0"
+          label="分类名称"
+        />
+      </el-form-item>
+      <el-form-item label="上级分类">
+        <el-cascader
+          v-model="selectedCategory"
+          expand-trigger="hover"
+          :options="categoryList"
+          :props="categoryTreeProps"
+          change-on-select
+          :clearable="true"
+          @change="handleChange"
+        />
+      </el-form-item>
+      <el-form-item
+        v-if="dataForm.type !== 2"
+        label="排序号"
+        prop="seq"
+      >
+        <el-input-number
+          v-model="dataForm.seq"
+          controls-position="right"
+          :min="0"
+          label="排序号"
+        />
+      </el-form-item>
+      <el-form-item
+        label="状态"
+        prop="status"
+      >
+        <el-radio-group v-model="dataForm.status">
+          <el-radio :label="0">
+            下线
+          </el-radio>
+          <el-radio :label="1">
+            正常
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="visible = false">
+          取消
+        </el-button>
+        <el-button
+          type="primary"
+          @click="onSubmit()"
+        >
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ElMessage } from 'element-plus'
+import { treeDataTranslate, idList } from '@/utils'
+import { Debounce } from '@/utils/debounce'
+const emit = defineEmits(['refreshDataList'])
+const visible = ref(false)
+const dataForm = reactive({
+  categoryId: 0,
+  currentId: 0,
+  grade: 0,
+  categoryName: '',
+  seq: 1,
+  status: 1,
+  parentId: 0,
+  pic: ''
+})
+const dataRule = reactive({
+  categoryName: [
+    { required: true, message: '分类名称不能为空', trigger: 'blur' },
+    { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的分类名称', trigger: 'blur' }
+  ],
+  pic: [
+    { required: true, message: '分类图片不能为空', trigger: 'blur' }
+  ]
+})
+const categoryList = ref([])
+const selectedCategory = ref([])
+const categoryTreeProps = reactive({
+  value: 'categoryId',
+  label: 'categoryName'
+})
+const isSubmit = ref(false)
+const dataFormRef = ref(null)
+const init = (id) => {
+  dataForm.currentId = id || 0
+  dataForm.categoryId = id || 0
+  http({
+    url: http.adornUrl('/prod/category/listCategory'),
+    method: 'get',
+    params: http.adornParams()
+  })
+    .then(({ data }) => {
+      categoryList.value = treeDataTranslate(data, 'categoryId', 'parentId')
+    })
+    .then(() => {
+      visible.value = true
+      nextTick(() => {
+        dataFormRef.value?.resetFields()
+        selectedCategory.value = []
+      })
+    })
+    .then(() => {
+      if (dataForm.categoryId) {
+      // 修改
+        http({
+          url: http.adornUrl(`/prod/category/info/${dataForm.categoryId}`),
+          method: 'get',
+          params: http.adornParams()
+        })
+          .then(({ data }) => {
+            dataForm.categoryId = data.categoryId
+            dataForm.categoryName = data.categoryName
+            dataForm.seq = data.seq
+            dataForm.pic = data.pic
+            dataForm.parentId = data.parentId
+            dataForm.status = data.status
+            selectedCategory.value = idList(categoryList.value, data.parentId, 'categoryId', 'children').reverse()
+          })
+      }
+    })
+}
+defineExpose({ init })
+
+const handleChange = (val) => {
+  dataForm.parentId = val[val.length - 1]
+}
+// 表单提交
+const onSubmit = Debounce(() => {
+  if (selectedCategory.value.length === 1) {
+    dataForm.grade = 0
+  }
+  if (selectedCategory.value.length === 2) {
+    dataForm.grade = 1
+  }
+  if (selectedCategory.value.length === 3) {
+    dataForm.grade = 2
+  }
+  dataFormRef.value?.validate((valid) => {
+    if (valid) {
+      if (isSubmit.value) {
+        return
+      }
+      isSubmit.value = true
+      http({
+        url: http.adornUrl('/prod/category'),
+        method: dataForm.categoryId ? 'put' : 'post',
+        data: http.adornData({
+          categoryId: dataForm.categoryId || undefined,
+          categoryName: dataForm.categoryName,
+          status: dataForm.status,
+          seq: dataForm.seq,
+          grade: dataForm.grade,
+          parentId: dataForm.parentId,
+          pic: dataForm.pic
+        })
+      })
+        .then(() => {
+          ElMessage({
+            message: '操作成功',
+            type: 'success',
+            duration: 1000,
+            onClose: () => {
+              isSubmit.value = false
+              visible.value = false
+              emit('refreshDataList')
+            }
+          })
+        })
+    }
+  })
+})
+
+</script>

src/views/modules/prod/category/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="mod-category">
+    <el-form
+      :inline="true"
+      :model="dataForm"
+    >
+      <el-form-item>
+        <el-button
+          v-if="isAuth('prod:category:save')"
+          type="primary"
+          icon="el-icon-plus"
+          @click="onAddOrUpdate()"
+        >
+          新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="dataList"
+      border
+      row-key="categoryId"
+      style="width: 100%;"
+    >
+      <el-table-column
+        prop="categoryName"
+        header-align="center"
+        tree-key="categoryId"
+        width="150"
+        label="分类名称"
+      />
+      <el-table-column
+        prop="pic"
+        header-align="center"
+        align="center"
+        label="图片"
+      >
+        <template #default="scope">
+          <img
+            alt=""
+            :src="resourcesUrl + scope.row.pic "
+          >
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="status"
+        header-align="center"
+        align="center"
+        label="状态"
+      >
+        <template #default="scope">
+          <el-tag
+            v-if="scope.row.status === 0"
+            type="danger"
+          >
+            下线
+          </el-tag>
+          <el-tag v-else>
+            正常
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="seq"
+        header-align="center"
+        align="center"
+        label="排序号"
+      />
+      <el-table-column
+        header-align="center"
+        align="center"
+        label="操作"
+      >
+        <template #default="scope">
+          <el-button
+            v-if="isAuth('prod:category:update')"
+            type="primary"
+            @click="onAddOrUpdate(scope.row.categoryId)"
+          >
+            修改
+          </el-button>
+          <el-button
+            v-if="isAuth('prod:category:delete')"
+            type="danger"
+            @click="onDelete(scope.row.categoryId)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdateRef"
+      @refresh-data-list="getDataList"
+    />
+  </div>
+</template>
+
+<script setup>
+import { isAuth, treeDataTranslate } from '@/utils'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import AddOrUpdate from './add-or-update.vue'
+const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
+const dataForm = ref({})
+
+onMounted(() => {
+  getDataList()
+})
+
+const dataList = ref([])
+const dataListLoading = ref(false)
+/**
+ * 获取数据列表
+ */
+const getDataList = () => {
+  dataListLoading.value = true
+  http({
+    url: http.adornUrl('/prod/category/table'),
+    method: 'get',
+    params: http.adornParams()
+  })
+    .then(({ data }) => {
+      dataList.value = treeDataTranslate(data, 'categoryId', 'parentId')
+      dataListLoading.value = false
+    })
+}
+
+const addOrUpdateVisible = ref(false)
+const addOrUpdateRef = ref(null)
+/**
+ * 新增 / 修改
+ * @param id
+ */
+const onAddOrUpdate = (id) => {
+  addOrUpdateVisible.value = true
+  nextTick(() => {
+    addOrUpdateRef.value?.init(id)
+  })
+}
+/**
+ * 删除
+ * @param id
+ */
+const onDelete = (id) => {
+  ElMessageBox.confirm('确定进行删除操作?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(() => {
+      http({
+        url: http.adornUrl(`/prod/category/${id}`),
+        method: 'delete'
+      })
+        .then(() => {
+          ElMessage({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              getDataList()
+            }
+          })
+        })
+    })
+}
+
+</script>
+
+<style lang="scss" scoped>
+.mod-category {
+  img {
+    height: 80px;
+    width: 200px;
+  }
+}
+</style>

src/views/modules/prod/prodComm/add-or-update.vue

@@ -0,0 +1,219 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="!dataForm.prodCommId ? '新增' : '修改'"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef"
+      :model="dataForm"
+      :rules="dataRule"
+      label-width="80px"
+      @keyup.enter="onSubmit()"
+    >
+      <div v-if="!isEdit">
+        <el-form-item
+          label="评论内容"
+          prop="userName"
+        >
+          <el-input
+            v-model="dataForm.content"
+            type="textarea"
+            :readonly="true"
+          />
+        </el-form-item>
+
+        <el-form-item
+          label="评论图片"
+          prop="userName"
+        >
+          <div v-if="!dataForm.pics?.length">
+            无
+          </div>
+          <div v-else>
+            <img
+              v-for="item in dataForm.pics"
+              :key="item"
+              alt=""
+              max-width="100%"
+              :src="dialogImageUrl + item"
+            >
+          </div>
+        </el-form-item>
+
+        <el-form-item
+          label="记录时间"
+          prop="userName"
+        >
+          <el-input
+            v-model="dataForm.recTime"
+            :readonly="true"
+          />
+        </el-form-item>
+        <el-form-item
+          label="回复时间"
+          prop="userName"
+          :readonly="true"
+        >
+          <el-input
+            v-model="dataForm.replyTime"
+            :readonly="true"
+          />
+        </el-form-item>
+        <el-form-item
+          label="IP来源"
+          prop="userName"
+        >
+          <el-input
+            v-model="dataForm.postip"
+            :readonly="true"
+          />
+        </el-form-item>
+        <el-form-item
+          label="得分"
+          prop="score"
+        >
+          <el-input
+            v-model="dataForm.score"
+            :readonly="true"
+          />
+        </el-form-item>
+
+        <el-form-item
+          label="是否匿名"
+          prop="isAnonymous"
+        >
+          <el-radio-group
+            v-model="dataForm.isAnonymous"
+            :disabled="true"
+          >
+            <el-radio :label="1">
+              是
+            </el-radio>
+            <el-radio :label="0">
+              不是
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </div>
+
+      <el-form-item
+        label="掌柜回复"
+        type="textarea"
+        prop="userName"
+      >
+        <el-input
+          v-model="dataForm.replyContent"
+          :readonly="!isEdit"
+        />
+      </el-form-item>
+
+      <el-form-item
+        v-if="isEdit"
+        label="审核"
+        prop="status"
+      >
+        <el-radio-group
+          v-model="dataForm.status"
+          :readonly="true"
+        >
+          <el-radio :label="1">
+            审核通过
+          </el-radio>
+          <el-radio :label="-1">
+            不通过
+          </el-radio>
+          <el-radio :label="0">
+            等待审核
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="visible = false">
+          取消
+        </el-button>
+        <el-button
+          v-if="isEdit"
+          type="primary"
+          @click="onSubmit()"
+        >
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ElMessage } from 'element-plus'
+const emit = defineEmits(['refreshDataList'])
+const dataRule = ref({})
+const isEdit = ref(false)
+const dataForm = ref({
+  prodCommId: null,
+  prodId: null,
+  orderItemId: null,
+  userId: null,
+  content: null,
+  replyContent: null,
+  recTime: null,
+  replyTime: null,
+  replySts: null,
+  postip: null,
+  score: null,
+  usefulCounts: null,
+  photoJson: null,
+  isAnonymous: null,
+  status: null
+})
+const init = (prodCommId, isEditParam) => {
+  isEdit.value = isEditParam
+  dataForm.value.prodCommId = prodCommId || 0
+  visible.value = true
+  nextTick(() => {
+    dataFormRef.value?.resetFields()
+    if (dataForm.value.prodCommId) {
+      http({
+        url: http.adornUrl('/prod/prodComm/info/' + dataForm.value.prodCommId),
+        method: 'get',
+        params: http.adornParams()
+      })
+        .then(({ data }) => {
+          dataForm.value = data
+        })
+    }
+  })
+}
+defineExpose({ init })
+
+const visible = ref(false)
+const dataFormRef = ref(null)
+/**
+ * 表单提交
+ */
+const onSubmit = () => {
+  dataFormRef.value?.validate((valid) => {
+    if (valid) {
+      http({
+        url: http.adornUrl('/prod/prodComm'),
+        method: dataForm.value.prodCommId ? 'put' : 'post',
+        data: http.adornData(dataForm.value)
+      })
+        .then(() => {
+          ElMessage({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              visible.value = false
+              emit('refreshDataList')
+            }
+          })
+        })
+    }
+  })
+}
+
+</script>

src/views/modules/prod/prodComm/index.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="mod-prod-prodComm">
+    <avue-crud
+      ref="crudRef"
+      :page="page"
+      :data="dataList"
+      :table-loading="dataListLoading"
+      :option="tableOption"
+      @search-change="onSearch"
+      @on-load="getDataList"
+      @refresh-change="refreshChange"
+      @row-del="rowDel"
+    >
+      <template #nickName="scope">
+        {{ scope.row.user.nickName }}
+      </template>
+      <template #replyTime="scope">
+        {{ scope.row.replyTime ? scope.row.replyTime : '-' }}
+      </template>
+
+      <template #menu="scope">
+        <el-button
+          type="primary"
+          icon="el-icon-edit"
+          @click="onAddOrUpdate(scope.row.prodCommId,true)"
+        >
+          编辑
+        </el-button>
+
+        <el-button
+          type="success"
+          icon="el-icon-view"
+          @click="onAddOrUpdate(scope.row.prodCommId,false)"
+        >
+          查看
+        </el-button>
+      </template>
+    </avue-crud>
+    <add-or-update
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdateRef"
+      @refresh-data-list="refreshChange"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { tableOption } from '@/crud/prod/prodComm.js'
+import AddOrUpdate from './add-or-update.vue'
+
+const dataList = ref([])
+const page = reactive({
+  total: 0, // 总页数
+  currentPage: 1, // 当前页数
+  pageSize: 20 // 每页显示多少条
+})
+const dataListLoading = ref(false)
+
+const getDataList = (pageParam, params, done) => {
+  dataListLoading.value = true
+  http({
+    url: http.adornUrl('/prod/prodComm/page'),
+    method: 'get',
+    params: http.adornParams(Object.assign({
+      current: pageParam == null ? page.currentPage : pageParam.currentPage,
+      size: pageParam == null ? page.pageSize : pageParam.pageSize
+    }, params))
+  })
+    .then(({ data }) => {
+      dataList.value = data.records
+      page.total = data.total
+      dataListLoading.value = false
+      if (done) done()
+    })
+}
+
+const addOrUpdateVisible = ref(false)
+const addOrUpdateRef = ref(null)
+/**
+ * 新增 / 修改
+ */
+const onAddOrUpdate = (id, isEdit) => {
+  addOrUpdateVisible.value = true
+  nextTick(() => {
+    addOrUpdateRef.value?.init(id, isEdit)
+  })
+}
+const rowDel = (row) => {
+  ElMessageBox.confirm('确定进行删除操作?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(() => {
+      http({
+        url: http.adornUrl('/prod/prodComm/' + row.prodCommId),
+        method: 'delete',
+        data: http.adornData({})
+      })
+        .then(() => {
+          ElMessage({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              getDataList()
+            }
+          })
+        })
+    }).catch(() => { })
+}
+/**
+ * 刷新回调
+ */
+const refreshChange = () => {
+  getDataList(page)
+}
+const onSearch = (params, done) => {
+  getDataList(page, params, done)
+}
+</script>

src/views/modules/prod/prodInfo/components/prod-transport.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="mod-prod-prod-transport">
+    <el-form-item
+      label="运费设置"
+      :rules="[{ required: true, message: '运费模板不能为空'}]"
+    >
+      <el-select
+        v-model="transportId"
+        placeholder="请选择"
+        @change="changeTransport"
+      >
+        <el-option
+          v-for="transport in transportList"
+          :key="transport.transportId"
+          :label="transport.transName"
+          :value="transport.transportId"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item>
+      <el-table
+        v-if="transportInfo.transfees"
+        :data="transportInfo.transfees"
+        style="width: 100%"
+      >
+        <el-table-column
+          label="配送区域"
+          width="350"
+        >
+          <template #default="scope">
+            <span v-if="!scope.row.cityList.length">所有地区</span>
+            <el-tag
+              v-for="city in scope.row.cityList"
+              v-else
+              :key="city.areaId"
+            >
+              {{ city.areaName }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="firstPiece"
+          :label="tableTitle[0]"
+        />
+        <el-table-column
+          prop="firstFee"
+          :label="tableTitle[1]"
+        />
+        <el-table-column
+          prop="continuousPiece"
+          :label="tableTitle[2]"
+        />
+        <el-table-column
+          prop="continuousFee"
+          :label="tableTitle[3]"
+        />
+      </el-table>
+    </el-form-item>
+    <el-form-item v-if="transportInfo.hasFreeCondition === 1">
+      <el-table
+        :data="transportInfo.transfeeFrees"
+        style="width: 100%"
+      >
+        <el-table-column
+          label="指定区域"
+          width="350"
+        >
+          <template #default="scope">
+            <el-tag
+              v-for="city in scope.row.freeCityList"
+              :key="city.areaId"
+            >
+              {{ city.areaName }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="freeType"
+          label="包邮条件"
+        >
+          <template #default="scope">
+            <span v-if="scope.row.freeType === 0">满件/重量/体积包邮</span>
+            <span v-if="scope.row.freeType === 1">满金额包邮</span>
+            <span v-if="scope.row.freeType === 2">满件/重量/体积且满金额包邮</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="amount">
+          <template #default="scope">
+            <span v-if="scope.row.freeType === 1">满{{ scope.row.amount }}元金额包邮</span>
+            <span v-if="scope.row.freeType === 0">满{{ scope.row.piece }}件/重量/体积包邮</span>
+            <span v-if="scope.row.freeType === 2">满{{ scope.row.piece }}件/重量/体积且满{{ scope.row.amount }}元金额包邮</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form-item>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+    default: null,
+    type: Number
+  }
+})
+const emit = defineEmits(['input', 'update:modelValue'])
+const transportId = ref(null)
+const tableTitle = computed(() => {
+  const titles = [['首件(个)', '运费(元)', '续件(个)', '续费(元)'], ['首重(kg)', '运费(元)', '续重(kg)', '续费(元)'], ['首体积(m³)', '运费(元)', '续体积(m³)', '续费(元)']]
+  if (transportInfo.value.chargeType) {
+    return titles[transportInfo.value.chargeType]
+  }
+  return titles[0]
+})
+
+watch(
+  () => props.modelValue,
+  (id) => {
+    transportId.value = id
+  })
+
+onMounted(() => {
+  getTransportList()
+})
+
+const transportList = ref([{
+  transportId: null,
+  transName: ''
+}])
+const getTransportList = () => {
+  http({
+    url: http.adornUrl('/shop/transport/list'),
+    method: 'get',
+    params: http.adornParams({})
+  })
+    .then(({ data }) => {
+      transportList.value = data
+    })
+}
+const transportInfo = ref({
+  hasFreeCondition: false,
+  transfeeFrees: [{ freeCityList: [] }]
+})
+const changeTransport = (id) => {
+  emit('update:modelValue', id)
+  if (!id) {
+    return
+  }
+  http({
+    url: http.adornUrl(`/shop/transport/info/${transportId.value}`),
+    method: 'get',
+    params: http.adornParams({})
+  })
+    .then(({ data }) => {
+      transportInfo.value = data
+    })
+}
+
+</script>

src/views/modules/prod/prodInfo/components/sku-table.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="mod-prod-sku-table">
+    <el-form-item>
+      <el-table
+        :data="modelValue"
+        border
+        style="width: 100%; margin-top: 20px"
+      >
+        <el-table-column
+          v-for="(leftTitle, index) in tableLeftTitles"
+          :key="index"
+          :label="leftTitle"
+        >
+          <template #default="scope">
+            {{ scope.row.properties.split(';')[index].split(':')[1] }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="tableLeftTitles.length"
+          prop="pic"
+          label="sku图片"
+          width="180"
+        >
+          <template #default="scope">
+            <pic-upload v-model="scope.row.pic" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="tableLeftTitles.length"
+          prop="prodName"
+          label="商品名称"
+          width="250"
+        >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.prodName"
+              type="textarea"
+              :disabled="!scope.row.status"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="price"
+          label="销售价"
+          width="160"
+        >
+          <template #default="scope">
+            <el-input-number
+              v-model="scope.row.price"
+              controls-position="right"
+              :precision="2"
+              :max="1000000000"
+              :min="0.01"
+              :disabled="!scope.row.status"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="oriPrice"
+          label="市场价"
+          width="160"
+        >
+          <template #default="scope">
+            <el-input-number
+              v-model="scope.row.oriPrice"
+              controls-position="right"
+              :precision="2"
+              :max="1000000000"
+              :min="0.01"
+              :disabled="!scope.row.status"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="stocks"
+          label="库存"
+          width="160"
+        >
+          <template #default="scope">
+            <el-input-number
+              v-model="scope.row.stocks"
+              :min="0"
+              controls-position="right"
+              type="number"
+              :disabled="!scope.row.status"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="weight"
+          label="商品重量(kg)"
+          width="210"
+        >
+          <template #default="scope">
+            <el-input-number
+              v-model="scope.row.weight"
+              :precision="2"
+              :min="0"
+              controls-position="right"
+              :disabled="!scope.row.status"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="volume"
+          label="商品体积(m³)"
+          width="210"
+        >
+          <template #default="scope">
+            <el-input-number
+              v-model="scope.row.volume"
+              :precision="2"
+              :min="0"
+              controls-position="right"
+              :disabled="!scope.row.status"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+        >
+          <template #default="scope">
+            <el-button
+              v-if="scope.row.status"
+              type="text"
+              @click="changeSkuStatus(`${scope.$index}`)"
+            >
+              禁用
+            </el-button>
+            <el-button
+              v-else
+              type="text"
+              @click="changeSkuStatus(`${scope.$index}`)"
+            >
+              启用
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form-item>
+  </div>
+</template>
+
+<script setup>
+import PicUpload from '@/components/pic-upload'
+import { scoreProdStore } from '@/stores/prod.js'
+
+const props = defineProps({
+  modelValue: {
+    default: () => [],
+    type: Array
+  },
+  prodName: {
+    default: '',
+    type: String
+  }
+})
+const emit = defineEmits(['update:modelValue'])
+const dbSpecs = ref([]) // 数据库中的规格
+let initing = false
+
+const tableLeftTitles = computed(() => {
+  const res = []
+  for (let i = 0; i < skuTags.length; i++) {
+    const skuTag = skuTags[i]
+    res.push(skuTag.tagName)
+  }
+  return res
+})
+const prod = scoreProdStore()
+const skuTags = computed({
+  get () { return prod.skuTags }
+})
+
+watch(() => props.prodName,
+  () => {
+    skuAddProdName()
+  })
+
+onMounted(() => {
+  http({
+    url: http.adornUrl('/prod/spec/list'),
+    method: 'get',
+    params: http.adornParams()
+  })
+    .then(({ data }) => {
+      dbSpecs.value = data
+    })
+})
+
+const init = () => {
+  initing = true
+}
+defineExpose({ init })
+
+const changeSkuStatus = (tagIndex) => {
+  // eslint-disable-next-line vue/no-mutating-props
+  props.modelValue[tagIndex].status = props.modelValue[tagIndex].status ? 0 : 1
+}
+const skuAddProdName = () => {
+  if (initing) return
+  const skuList = []
+  for (let i = 0; i < props.modelValue.length; i++) {
+    const sku = Object.assign({}, props.modelValue[i])
+    if (!sku.properties) {
+      return
+    }
+    sku.skuName = ''
+    const properties = sku.properties.split(';')
+    for (const propertiesKey in properties) {
+      sku.skuName += properties[propertiesKey].split(':')[1] + ' '
+    }
+    sku.prodName = props.prodName + ' ' + sku.skuName
+    skuList.push(sku)
+  }
+  emit('update:modelValue', skuList)
+}
+
+</script>
+
+<style lang="scss" scoped>
+.mod-prod-sku-table{
+   :deep(.pic-uploader-component .el-upload) {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    .pic-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 120px;
+      height: 120px;
+      line-height: 120px;
+      text-align: center;
+    }
+    .pic {
+      width: 120px;
+      height: 120px;
+      display: block;
+    }
+  }
+  :deep(.pic-uploader-component .el-upload:hover) {
+    border-color: #409EFF;
+  }
+}
+</style>

src/views/modules/prod/prodInfo/components/sku-tag.vue

@@ -0,0 +1,527 @@
+<template>
+  <div class="mod-prod-sku-tag">
+    <el-form-item label="商品规格">
+      <el-button @click="shopTagInput()">
+        添加规格
+      </el-button>
+      <div
+        v-for="(tag, tagIndex) in skuTags"
+        :key="tagIndex"
+      >
+        <span>{{ tag.tagName }}</span>
+        <el-button
+          class="button-new-tag"
+          type="text"
+          icon="el-icon-delete"
+          @click="removeTag(tagIndex)"
+        >
+          删除
+        </el-button>
+        <br>
+        <el-tag
+          v-for="(tagItem, tagItemIndex) in tag.tagItems"
+          :key="tagItem.valueId"
+          closable
+          :disable-transitions="false"
+          @close="handleTagClose(tagIndex, tagItemIndex)"
+        >
+          {{ tagItem.propValue }}
+        </el-tag>
+        <el-input
+          v-if="tagItemInputs[tagIndex] && tagItemInputs[tagIndex].visible"
+          :ref="`saveTagInput${tagIndex}`"
+          v-model="tagItemInputs[tagIndex].value"
+          class="input-new-tag"
+          @keyup.enter="handleInputConfirm(tagIndex)"
+          @blur="handleInputConfirm(tagIndex)"
+        />
+        <el-button
+          v-else
+          class="button-new-tag"
+          @click="showTagInput(tagIndex)"
+        >
+          + 添加
+        </el-button>
+      </div>
+    </el-form-item>
+    <el-form-item
+      v-show="isShowTagInput"
+      label="规格名"
+    >
+      <el-col :span="8">
+        <el-select
+          v-model="addTagInput.propName"
+          filterable
+          allow-create
+          default-first-option
+          placeholder="请选择"
+          @change="handleTagClick"
+        >
+          <el-option
+            v-for="item in unUseTags"
+            :key="item.propId"
+            :label="item.propName"
+            :value="item.propName"
+          />
+        </el-select>
+      </el-col>
+    </el-form-item>
+    <el-form-item
+      v-show="isShowTagInput"
+      label="规格值"
+    >
+      <el-col :span="8">
+        <el-select
+          v-model="addTagInput.selectValues"
+          multiple
+          filterable
+          allow-create
+          default-first-option
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in dbTagValues"
+            :key="item.valueId"
+            :label="item.propValue"
+            :value="item.propValue"
+          />
+        </el-select>
+      </el-col>
+    </el-form-item>
+    <el-form-item>
+      <el-button
+        v-show="isShowTagInput"
+        type="primary"
+        @click="addTag()"
+      >
+        确定
+      </el-button>
+      <el-button
+        v-show="isShowTagInput"
+        @click="hideTagInput()"
+      >
+        取消
+      </el-button>
+    </el-form-item>
+  </div>
+</template>
+
+<script setup>
+import { ElMessage } from 'element-plus'
+import { scoreProdStore } from '@/stores/prod.js'
+const prod = scoreProdStore()
+const props = defineProps({
+  skuList: {
+    type: Array,
+    default: () => []
+  }
+})
+const emit = defineEmits(['change'])
+const isShowTagInput = ref(false)
+const addTagInput = ref({
+  propName: '',
+  selectValues: []
+})
+const type = ref(0)
+const tagItemName = ref('')
+const tagItemInputs = ref([])
+const dbTagValues = ref([]) // 根据选定的规格所查询出来的规格值
+let tagName = ''
+let tagNameIndex = 0
+let dbTags = [] // 数据库中的规格
+let maxValueId = 0 // 规格值id最大
+let maxPropId = 0 // 规格id 最大
+let initing = false
+
+const skuTags = computed({
+  get () { return prod.skuTags },
+  set (val) { prod.updateSkuTags(val) }
+})
+
+/**
+ * 未使用的规格, 通过计算属性计算
+ */
+const unUseTags = computed(() => {
+  const res = []
+  for (let i = 0; i < dbTags.length; i++) {
+    const dbTag = dbTags[i]
+    const specIndex = skuTags.value?.findIndex(tag => tag.tagName === dbTag.propName)
+    if (specIndex === -1) {
+      res.push(dbTag)
+    }
+  }
+  return res
+})
+
+const defalutSku = computed(() => {
+  return prod.defalutSku
+})
+
+watch(() => skuTags.value,
+  (val) => {
+    if (initing) {
+      initing = false
+      return
+    }
+    let skuList = []
+    if (type.value === 4) {
+      // 删除规格值
+      props.skuList?.forEach(sku => {
+        const propertiesArray = sku.properties.split(';')
+        if (tagItemName.value !== propertiesArray[tagNameIndex].split(':')[1]) {
+          skuList.push(sku)
+        }
+      })
+    } else if (type.value === 2) {
+      // 添加规格值
+      const properties = tagName + ':' + tagItemName.value
+      // 增加或删除规格
+      let tempSkuList = []
+      val.forEach(tag => {
+        if (skuList.length === 0) {
+          if (tagName === tag.tagName) {
+            const sku = Object.assign({}, defalutSku.value)
+            sku.properties = properties // 销售属性组合字符串
+            skuList.push(sku)
+          } else {
+            tag.tagItems.forEach(tagItem => {
+              const sku = Object.assign({}, defalutSku.value)
+              sku.properties = `${tag.tagName}:${tagItem.propValue}` // 销售属性组合字符串
+              skuList.push(sku)
+            })
+          }
+          if (val.length === 1) {
+            skuList = props.skuList.concat(skuList)
+          }
+        } else {
+          tempSkuList = []
+          if (tagName === tag.tagName) {
+            skuList.forEach(sku => {
+              if (sku.properties.indexOf(tagName) === -1) {
+                const newSku = Object.assign({}, sku)
+                newSku.properties = `${sku.properties};${properties}`
+                tempSkuList.push(newSku)
+              }
+            })
+          } else {
+            tag.tagItems.forEach(tagItem => {
+              skuList.forEach(sku => {
+                if (sku.properties.indexOf(tag.tagName) === -1) {
+                  const newSku = Object.assign({}, sku)
+                  newSku.properties = `${sku.properties};${tag.tagName}:${tagItem.propValue}`
+                  tempSkuList.push(newSku)
+                }
+              })
+            })
+          }
+          skuList = props.skuList.concat(tempSkuList)
+        }
+      })
+    } else {
+      // 增加或删除规格
+      let tempSkuList = []
+      val.forEach(tag => {
+        if (skuList.length === 0) {
+          tag.tagItems.forEach(tagItem => {
+            const sku = Object.assign({}, defalutSku.value)
+            sku.properties = `${tag.tagName}:${tagItem.propValue}` // 销售属性组合字符串
+            skuList.push(sku)
+          })
+        } else {
+          tempSkuList = []
+          tag.tagItems.forEach(tagItem => {
+            skuList.forEach(sku => {
+              const newSku = Object.assign({}, sku)
+              newSku.properties = `${sku.properties};${tag.tagName}:${tagItem.propValue}`
+              tempSkuList.push(newSku)
+            })
+          })
+          skuList = tempSkuList
+        }
+      })
+    }
+    if (!skuList.length) {
+      skuList.push(Object.assign({}, defalutSku.value))
+    }
+    // debugger
+    emit('change', skuList)
+  }
+)
+
+onMounted(() => {
+  http({
+    url: http.adornUrl('/prod/spec/list'),
+    method: 'get',
+    params: http.adornParams()
+  })
+    .then(({ data }) => {
+      dbTags = data
+      if (data) {
+        maxPropId = Math.max.apply(Math, data.map(item => item.propId))
+      } else {
+        maxPropId = 0
+      }
+    })
+  http({
+    url: http.adornUrl('/prod/spec/listSpecMaxValueId'),
+    method: 'get',
+    params: http.adornParams()
+  })
+    .then(({ data }) => {
+      if (data) {
+        maxValueId = data
+      } else {
+        maxValueId = 0
+      }
+    })
+})
+
+const init = (skuList) => {
+  if (!skuList || !skuList.length) {
+    skuTags.value = []
+    emit('change', [Object.assign({}, defalutSku.value)])
+    return
+  }
+  initing = true
+  const skuTagsParam = []
+  for (let i = 0; i < skuList.length; i++) {
+    const sku = skuList[i]
+    if (!sku.properties) break
+    const propertiesArray = sku.properties.split(';')
+    for (const j in propertiesArray) {
+      const properties = propertiesArray[j].split(':')
+      if (!skuTagsParam[j]) {
+        skuTagsParam[j] = {
+          tagName: properties[0],
+          tagItems: []
+        }
+        tagItemInputs.value.push({ visible: false, value: '' })
+      }
+      const tagItemNameIndex = skuTagsParam[j].tagItems.findIndex((tagItemName) => tagItemName.propValue === properties[1])
+      if (tagItemNameIndex === -1) {
+        skuTagsParam[j].tagItems.push({ propValue: properties[1] })
+      }
+    }
+  }
+  skuTags.value = skuTagsParam
+}
+defineExpose({ init })
+
+/**
+ * 显示规格名、规格值输入框
+ */
+const shopTagInput = () => {
+  isShowTagInput.value = !isShowTagInput.value
+}
+
+/**
+ * 隐藏规格名、规格值输入框
+ */
+const hideTagInput = () => {
+  isShowTagInput.value = false
+  cleanTagInput()
+}
+const addTag = () => {
+  const selectValues = addTagInput.value.selectValues
+  if (!addTagInput.value.propName) {
+    ElMessage.error('请输入规格名')
+    return
+  }
+  if (!selectValues.length) {
+    ElMessage.error('请输入规格值')
+    return
+  }
+  isShowTagInput.value = false
+  for (let i = 0; i < selectValues.length; i++) {
+    const element = selectValues[i]
+    const is = Object.prototype.toString.call(element) === '[object Object]'
+    if (!is) {
+      maxPropId = maxPropId + 1
+      break
+    }
+  }
+  const tagItems = []
+  for (let i = 0; i < selectValues.length; i++) {
+    const element = selectValues[i]
+    const is = Object.prototype.toString.call(element) === '[object Object]'
+    if (is) {
+      tagItems.push(element)
+    } else {
+      maxValueId = maxValueId + 1
+      tagItems.push({ propId: maxPropId, propValue: element, valueId: maxValueId })
+    }
+  }
+  // 向规格中放入规格输入框内的数据
+  prod.addSkuTag({
+    tagName: addTagInput.value.propName,
+    tagItems
+  })
+  type.value = 1
+  cleanTagInput()
+}
+
+/**
+ * 清除规格值输入框内容
+ */
+const cleanTagInput = () => {
+  addTagInput.value = {
+    propName: '',
+    selectValues: []
+  }
+  dbTagValues.value = []
+}
+
+/**
+ * 规格名输入框，选中规格事件
+ */
+const handleTagClick = () => {
+  // 清空规格值输入框
+  dbTagValues.value = []
+  addTagInput.value.selectValues = []
+  // 判断规格名输入的值是否为数据库中已有的值
+  const specsIndex = dbTags.findIndex(spec => spec.propName === addTagInput.value.propName)
+  // 如果不是，则说明为用户随便输入
+  if (specsIndex === -1) return
+  // 如果数据库已有该规格名，则获取根据id获取该规格名称含有的规格值
+  http({
+    url: http.adornUrl(`/prod/spec/listSpecValue/${dbTags[specsIndex].propId}`),
+    method: 'get',
+    params: http.adornParams()
+  }).then(({ data }) => {
+    dbTagValues.value = data
+  })
+}
+
+/**
+ * 规格名输入框，选中规格事件
+ */
+const handleTagClose = (tagIndex, tagItemIndex) => {
+  tagName = skuTags.value[tagIndex].tagName
+  tagNameIndex = tagIndex
+  tagItemName.value = skuTags.value[tagIndex].tagItems[tagItemIndex].propValue
+  if (skuTags.value[tagIndex].tagItems.length === 1) {
+    return
+  }
+  type.value = 4
+  prod.removeSkuTagItem(tagIndex, tagItemIndex)
+}
+
+/**
+ * 标签输入框确定时调用
+ */
+const handleInputConfirm = (tagIndex) => {
+  if (checkTagItem(tagIndex)) {
+    return
+  }
+  const tagItems = skuTags.value[tagIndex].tagItems
+  const itemValue = tagItemInputs.value[tagIndex].value
+  const index = tagItems.length - 1
+  tagName = skuTags.value[tagIndex].tagName
+  tagItemName.value = tagItemInputs.value[tagIndex].value
+  const maxValue = getMaxValueId(skuTags.value[tagIndex].tagItems)
+  const tagItem = { propId: index === -1 ? 0 : skuTags.value[tagIndex].tagItems[index].propId, propValue: itemValue, valueId: index === -1 ? 0 : (maxValue + 1) }
+  if (tagItem) {
+    prod.addSkuTagItem({ tagIndex, tagItem })
+  }
+  tagItemInputs.value[tagIndex].visible = false
+  tagItemInputs.value[tagIndex].value = ''
+  type.value = 2
+}
+
+/**
+ * 显示标签输入框
+ */
+const showTagInput = (tagIndex) => {
+  tagItemInputs.value.push({ visible: false, value: '' })
+  tagItemInputs.value[tagIndex].visible = true
+  nextTick(() => {
+    [`saveTagInput${tagIndex}`][0].value.input.focus()
+  })
+}
+
+/**
+ * 获取数据集合所有对象中某个属性的最大值
+ */
+const getMaxValueId = (list) => {
+  return Math.max.apply(Math, list.map(item => item.valueId))
+}
+
+/**
+ * 删除 规格
+ * @param tagIndex
+ */
+const removeTag = (tagIndex) => {
+  type.value = 3
+  prod.removeSkuTag(tagIndex)
+}
+
+/**
+ * 新增规格值时，判断是否存在同名的规格值
+ */
+const checkTagItem = (tagIndex) => {
+  const tagItem = tagItemInputs.value[tagIndex].value
+  if (!tagItem) {
+    tagItemInputs.value[tagIndex].visible = false
+    tagItemInputs.value[tagIndex].value = ''
+    return true
+  }
+  let isSame = false
+  skuTags.value?.forEach(tag => {
+    const arr = tag.tagItems.map((item) => {
+      return item.propValue
+    })
+    if (arr.indexOf(tagItem) > -1) {
+      isSame = true
+      ElMessage.error('product.specificationValue')
+      return false
+    }
+  })
+  return isSame
+}
+</script>
+
+<style lang="scss" scoped>
+.mod-prod-sku-tag {
+  :deep(.el-tag + .el-tag) {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+}
+
+// 新增规格外部边框
+:deep(.sku-border) {
+  border: 1px solid #EBEEF5;
+  width:70%
+}
+:deep(.sku-background){
+  background-color: #F6f6f6;
+  margin: 12px 12px;
+  .el-button{
+    margin-left: 10px;
+    span{
+      color:#000 !important;
+    }
+  }
+  .el-form-item__label{
+    padding:0 24px 0 0
+  }
+}
+:deep(.sku-tag){
+  margin: 12px 12px;
+}
+:deep(.tagTree){
+  margin-left: 18px;
+  padding-bottom:8px;
+}
+</style>

src/views/modules/prod/prodInfo/index.vue

@@ -0,0 +1,342 @@
+<template>
+  <div class="mod-prod-info">
+    <el-form
+      ref="dataFormRef"
+      :model="dataForm"
+      label-width="100px"
+    >
+      <el-form-item label="产品图片">
+        <mul-pic-upload v-model="dataForm.imgs" />
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-radio-group v-model="dataForm.status">
+          <el-radio :label="1">
+            上架
+          </el-radio>
+          <el-radio :label="0">
+            下架
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="产品分类"
+        :rules="[{ required: true, message: '请选择产品分类'}]"
+        prop="categoryId"
+      >
+        <el-col :span="8">
+          <el-cascader
+            v-model="category.selected"
+            expand-trigger="hover"
+            :options="category.list"
+            :props="category.props"
+            change-on-select
+            @change="handleCategoryChange"
+          />
+        </el-col>
+      </el-form-item>
+      <el-form-item
+        label="产品分组"
+        :rules="[{ required: true, message: '请选择产品分组'}]"
+      >
+        <el-col :span="8">
+          <el-select
+            v-model="dataForm.tagList"
+            multiple
+            style="width: 250px"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in tags"
+              :key="item.id"
+              :label="item.title"
+              :value="item.id"
+            />
+          </el-select>
+        </el-col>
+      </el-form-item>
+      <el-form-item
+        label="产品名称"
+        prop="prodName"
+        :rules="[
+          { required: true, message: '产品名称不能为空'},
+          { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的产品名称', trigger: 'blur' }
+        ]"
+      >
+        <el-col :span="8">
+          <el-input
+            v-model="dataForm.prodName"
+            placeholder="产品名称"
+            maxlength="50"
+          />
+        </el-col>
+      </el-form-item>
+      <el-form-item
+        label="产品卖点"
+        prop="brief"
+        :rules="[
+          { required: false, pattern: /\s\S+|S+\s|\S/, message: '请输入正确的产品卖点', trigger: 'blur' }
+        ]"
+      >
+        <el-col :span="8">
+          <el-input
+            v-model="dataForm.brief"
+            type="textarea"
+            :autosize="{minRows: 2, maxRows: 4}"
+            placeholder="产品卖点"
+          />
+        </el-col>
+      </el-form-item>
+      <el-form-item label="配送方式">
+        <el-checkbox v-model="dataForm.deliveryMode.hasShopDelivery">
+          商家配送
+        </el-checkbox>
+        <el-checkbox v-model="dataForm.deliveryMode.hasUserPickUp">
+          用户自提
+        </el-checkbox>
+      </el-form-item>
+      <prod-transport
+        v-show="dataForm.deliveryMode.hasShopDelivery"
+        v-model="dataForm.deliveryTemplateId"
+      />
+      <sku-tag
+        ref="skuTagRef"
+        :sku-list="dataForm.skuList"
+        @change="skuTagChangeSkuHandler"
+      />
+      <sku-table
+        ref="skuTableRef"
+        v-model="dataForm.skuList"
+        :prod-name="dataForm.prodName"
+      />
+      <el-form-item
+        label="产品详情"
+        prop="content"
+      >
+        <tiny-mce
+          ref="contentRef"
+          v-model="dataForm.content"
+          style="width:1000px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          @click="onSubmit()"
+        >
+          确定
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { ElMessage } from 'element-plus'
+import { treeDataTranslate, idList } from '@/utils'
+import ProdTransport from './components/prod-transport.vue'
+import SkuTag from './components/sku-tag.vue'
+import SkuTable from './components/sku-table.vue'
+import { Debounce } from '@/utils/debounce'
+
+const emit = defineEmits(['refreshDataList'])
+
+// 分类树展示与回显
+const category = reactive({
+  list: [],
+  selected: [],
+  props: {
+    value: 'categoryId',
+    label: 'categoryName'
+  }
+})
+// 规格列表
+const dataForm = ref({
+  prodName: '',
+  brief: '',
+  pic: '',
+  imgs: '',
+  categoryId: 0,
+  prodId: 0,
+  skuList: [],
+  tagList: [],
+  content: '',
+  status: 1,
+  deliveryMode: {
+    hasShopDelivery: false,
+    hasUserPickUp: false
+  },
+  deliveryTemplateId: null
+})
+const tags = ref([])
+onMounted(() => {
+  dataForm.value.prodId = useRoute().query.prodId
+  getDataList()
+})
+
+const skuTableRef = ref(null)
+const skuTagRef = ref(null)
+/**
+ * 获取分类数据
+ */
+const getDataList = () => {
+  getTagList()
+  getCategoryList().then(() => {
+    if (dataForm.value.prodId) {
+      // 获取产品数据
+      http({
+        url: http.adornUrl(`/prod/prod/info/${dataForm.value.prodId}`),
+        method: 'get',
+        params: http.adornParams()
+      })
+        .then(({ data }) => {
+          dataForm.value = data
+          dataForm.value.deliveryMode = JSON.parse(data.deliveryMode)
+          skuTagRef.value?.init(data.skuList)
+          skuTableRef.value?.init()
+          category.selected = idList(category.list, dataForm.value.categoryId, 'categoryId', 'children').reverse()
+          dataForm.value.tagList = data.tagList
+        })
+    } else {
+      nextTick(() => {
+        dataFormRef.value?.resetFields()
+        skuTagRef.value?.init()
+        dataForm.value.pic = ''
+        dataForm.value.imgs = ''
+      })
+    }
+  })
+}
+/**
+ * 获取分类信息
+ */
+const getCategoryList = () => {
+  return http({
+    url: http.adornUrl('/prod/category/listCategory'),
+    method: 'get',
+    params: http.adornParams()
+  })
+    .then(({ data }) => {
+      category.list = treeDataTranslate(data, 'categoryId', 'parentId')
+    })
+}
+/**
+ * 选择分类改变事件
+ * @param val
+ */
+const handleCategoryChange = (val) => {
+  dataForm.value.categoryId = val[val.length - 1]
+}
+
+const router = useRouter()
+const dataFormRef = ref(null)
+/**
+ * 表单提交
+ */
+const onSubmit = Debounce(() => {
+  dataFormRef.value?.validate((valid) => {
+    if (!valid) {
+      return
+    }
+    if (!dataForm.value.imgs) {
+      errorMsg('请选择图片上传')
+      return
+    }
+    if (!dataForm.value.deliveryMode) {
+      errorMsg('请选择配送方式')
+      return
+    }
+    if (dataForm.value.deliveryMode.hasShopDelivery && !dataForm.value.deliveryTemplateId) {
+      errorMsg('请选择运费模板')
+      return
+    }
+    const param = Object.assign({}, dataForm.value)
+    // 设置价格和库存
+    paramSetPriceAndStocks(param)
+
+    param.deliveryMode = undefined
+    param.deliveryModeVo = dataForm.value.deliveryMode
+    // 商品主图
+    param.pic = dataForm.value.imgs.split(',')[0]
+    http({
+      url: http.adornUrl('/prod/prod'),
+      method: param.prodId ? 'put' : 'post',
+      data: http.adornData(param)
+    })
+      .then(() => {
+        ElMessage({
+          message: '操作成功',
+          type: 'success',
+          duration: 1500,
+          onClose: () => {
+            router.push({ name: 'prod-prodList' })
+            emit('refreshDataList')
+          }
+        })
+      })
+  })
+})
+
+const paramSetPriceAndStocks = (param) => {
+  // 商品库存
+  param.totalStocks = 0
+  // 商品价格
+  param.price = 0
+  // 商品原价
+  param.oriPrice = 0
+  // 商品实际库存
+  for (let i = 0; i < param.skuList.length; i++) {
+    const element = param.skuList[i]
+    if (element.status !== 1) {
+      continue
+    }
+    if (param.price === 0) {
+      param.price = element.price ? Number.parseFloat(element.price) : 0
+    }
+    // 商品价格为最低价的那件商品的价格
+    param.price = Math.min(param.price, element.price)
+    if (param.price === element.price) {
+      param.oriPrice = element.oriPrice ? Number.parseFloat(element.oriPrice) : 0
+    }
+    param.totalStocks += element.stocks ? Number.parseInt(element.stocks) : 0
+  }
+  // 如果sku没有商品名称，则使用商品的商品名称
+  if (param.skuList.length === 1) {
+    param.skuList[0].prodName = dataForm.value.prodName
+  }
+}
+const skuTagChangeSkuHandler = (skuList) => {
+  const prodName = dataForm.value.prodName
+  skuList.forEach(sku => {
+    if (sku.properties) {
+      sku.skuName = ''
+      const properties = sku.properties.split(';')
+      for (const propertiesKey in properties) {
+        sku.skuName += properties[propertiesKey].split(':')[1] + ' '
+      }
+      sku.prodName = prodName + ' ' + sku.skuName
+    }
+  })
+  dataForm.value.skuList = skuList
+}
+const errorMsg = (message) => {
+  ElMessage({
+    message,
+    type: 'error',
+    duration: 1500
+  })
+}
+
+/**
+ * 获取所有的分组信息
+ */
+const getTagList = () => {
+  http({
+    url: http.adornUrl('/prod/prodTag/listTagList'),
+    method: 'get',
+    params: http.adornParams()
+  })
+    .then(({ data }) => {
+      tags.value = data
+    })
+}
+</script>

src/views/modules/prod/prodList/index.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="mod-prod">
+    <avue-crud
+      ref="crudRef"
+      :page="page"
+      :data="dataList"
+      :table-loading="dataListLoading"
+      :permission="permission"
+      :option="tableOption"
+      @search-change="onSearch"
+      @selection-change="selectionChange"
+      @on-load="getDataList"
+    >
+      <template #menu-left>
+        <el-button
+          v-if="isAuth('shop:pickAddr:save')"
+          type="primary"
+          icon="el-icon-plus"
+          @click.stop="onAddOrUpdate()"
+        >
+          新增
+        </el-button>
+
+        <el-button
+          v-if="isAuth('shop:pickAddr:delete')"
+          type="danger"
+          :disabled="dataListSelections.length <= 0"
+          @click="onDelete()"
+        >
+          批量删除
+        </el-button>
+      </template>
+
+      <template #status="scope">
+        <el-tag v-if="scope.row.status === 1">
+          上架
+        </el-tag>
+        <el-tag v-else>
+          未上架
+        </el-tag>
+      </template>
+
+      <template #menu="scope">
+        <el-button
+          v-if="isAuth('prod:prod:update')"
+          type="primary"
+          icon="el-icon-edit"
+          @click="onAddOrUpdate(scope.row.prodId)"
+        >
+          修改
+        </el-button>
+        <el-button
+          v-if="isAuth('prod:prod:delete')"
+          type="danger"
+          icon="el-icon-delete"
+          @click="onDelete(scope.row.prodId)"
+        >
+          删除
+        </el-button>
+      </template>
+    </avue-crud>
+  </div>
+</template>
+
+<script setup>
+import { isAuth } from '@/utils'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { tableOption } from '@/crud/prod/prodList.js'
+const permission = reactive({
+  delBtn: isAuth('prod:prod:delete')
+})
+const dataList = ref([])
+const page = reactive({
+  total: 0, // 总页数
+  currentPage: 1, // 当前页数
+  pageSize: 10 // 每页显示多少条
+})
+const dataListLoading = ref(false)
+/**
+ * 获取数据列表
+ */
+const getDataList = (pageParam, params, done) => {
+  dataListLoading.value = true
+  http({
+    url: http.adornUrl('/prod/prod/page'),
+    method: 'get',
+    params: http.adornParams(
+      Object.assign(
+        {
+          current: pageParam == null ? page.currentPage : pageParam.currentPage,
+          size: pageParam == null ? page.pageSize : pageParam.pageSize
+        },
+        params
+      )
+    )
+  })
+    .then(({ data }) => {
+      dataList.value = data.records
+      for (const key in dataList.value) {
+        // eslint-disable-next-line no-prototype-builtins
+        if (dataList.value.hasOwnProperty(key)) {
+          const element = dataList.value[key]
+          element.imgs = element.imgs.split(',')[0]
+        }
+      }
+      page.total = data.total
+      dataListLoading.value = false
+      if (done) done()
+    })
+}
+const router = useRouter()
+/**
+ * 新增 / 修改
+ * @param id
+ */
+const onAddOrUpdate = (id) => {
+  router.push({
+    path: '/prodInfo',
+    query: { prodId: id }
+  })
+}
+/**
+ * 删除和批量删除
+ * @param id
+ */
+const onDelete = (id) => {
+  const prodIds = getSeleProdIds()
+  if (id) {
+    prodIds.push(id)
+  }
+  ElMessageBox.confirm(`确定进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(() => {
+      http({
+        url: http.adornUrl('/prod/prod'),
+        method: 'delete',
+        data: http.adornData(prodIds, false)
+      })
+        .then(() => {
+          ElMessage({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              getDataList(page)
+            }
+          })
+        })
+    })
+    .catch(() => { })
+}
+/**
+ * 条件查询
+ * @param params
+ * @param done
+ */
+const onSearch = (params, done) => {
+  getDataList(page, params, done)
+}
+
+const dataListSelections = ref([])
+/**
+ * 多选变化
+ * @param val
+ */
+const selectionChange = (val) => {
+  dataListSelections.value = val
+}
+/**
+ * 获取选中的商品Id列表
+ */
+const getSeleProdIds = () => {
+  return dataListSelections.value?.map(item => {
+    return item.prodId
+  })
+}
+
+</script>

src/views/modules/prod/prodTag/add-or-update.vue

@@ -0,0 +1,145 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="!dataForm.id ? '新增' : '修改'"
+    :close-on-click-modal="false"
+  >
+    <el-form
+      ref="dataFormRef"
+      :model="dataForm"
+      :rules="dataRule"
+      label-width="80px"
+      @keyup.enter="onSubmit()"
+    >
+      <el-form-item
+        label="标签名称"
+        :rules="[
+          { required: true, message: '标签名称不能为空', trigger: 'blur' },
+          { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的标签名称', trigger: 'blur' }
+        ]"
+        prop="title"
+      >
+        <el-input v-model="dataForm.title" />
+      </el-form-item>
+      <el-form-item
+        label="状态"
+        prop="status"
+      >
+        <el-radio-group v-model="dataForm.status">
+          <el-radio :label="1">
+            正常
+          </el-radio>
+          <el-radio :label="0">
+            禁用
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="列表样式"
+        prop="style"
+      >
+        <el-radio-group v-model="dataForm.style">
+          <el-radio :label="0">
+            一列一个
+          </el-radio>
+          <el-radio :label="1">
+            一列两个
+          </el-radio>
+          <el-radio :label="2">
+            一列三个
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item
+        label="排序"
+        prop="seq"
+      >
+        <el-input-number
+          v-model="dataForm.seq"
+          controls-position="right"
+          :min="0"
+          label="排序号"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="visible = false">
+          取消
+        </el-button>
+        <el-button
+          type="primary"
+          @click="onSubmit()"
+        >
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ElMessage } from 'element-plus'
+import { Debounce } from '@/utils/debounce'
+const emit = defineEmits(['refreshDataList'])
+const visible = ref(false)
+const dataRule = {}
+const dataForm = ref({
+  id: null,
+  title: null,
+  shopId: null,
+  status: 1,
+  isDefault: null,
+  prodCount: null,
+  seq: null,
+  style: 0
+})
+
+const init = (id) => {
+  dataForm.value.id = id || 0
+  visible.value = true
+  nextTick(() => {
+    dataFormRef.value?.resetFields()
+    if (dataForm.value.id) {
+      http({
+        url: http.adornUrl('/prod/prodTag/info/' + dataForm.value.id),
+        method: 'get',
+        params: http.adornParams()
+      })
+        .then(({ data }) => {
+          dataForm.value = data
+        })
+    }
+  })
+}
+defineExpose({ init })
+
+const dataFormRef = ref(null)
+/**
+ * 表单提交
+ */
+const onSubmit = Debounce(() => {
+  dataFormRef.value?.validate((valid) => {
+    if (valid) {
+      http({
+        url: http.adornUrl('/prod/prodTag'),
+        method: dataForm.value.id ? 'put' : 'post',
+        data: http.adornData(dataForm.value)
+      })
+        .then(() => {
+          ElMessage({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              visible.value = false
+              emit('refreshDataList')
+            }
+          })
+        })
+    }
+  })
+})
+
+</script>

src/views/modules/prod/prodTag/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="mod-prod-prodTag">
+    <avue-crud
+      ref="crudRef"
+      :page="page"
+      :data="dataList"
+      :table-loading="dataListLoading"
+      :option="tableOption"
+      @search-change="onSearch"
+      @on-load="getDataList"
+      @refresh-change="refreshChange"
+    >
+      <template #menu-left>
+        <el-button
+          v-if="isAuth('prod:prodTag:save')"
+          type="primary"
+          icon="el-icon-plus"
+          @click="onAddOrUpdate()"
+        >
+          新增
+        </el-button>
+      </template>
+      <template #title="scope">
+        {{ scope.row.title || '-' }}
+      </template>
+      <template #status="scope">
+        <el-tag
+          v-if="scope.row.status === 0"
+          type="danger"
+        >
+          禁用
+        </el-tag>
+        <el-tag v-else>
+          正常
+        </el-tag>
+      </template>
+
+      <template #isDfault="scope">
+        <el-tag v-if="scope.row.isDefault === 0">
+          自定义类型
+        </el-tag>
+        <el-tag v-else>
+          默认类型
+        </el-tag>
+      </template>
+
+      <template #menu="scope">
+        <el-button
+          v-if="isAuth('prod:prodTag:update')"
+          type="primary"
+          icon="el-icon-edit"
+          @click="onAddOrUpdate(scope.row.id)"
+        >
+          修改
+        </el-button>
+        <el-button
+          v-if="isAuth('prod:prodTag:delete')"
+          type="danger"
+          icon="el-icon-delete"
+          @click.stop="onDelete(scope.row.id)"
+        >
+          删除
+        </el-button>
+      </template>
+    </avue-crud>
+    <add-or-update
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdateRef"
+      @refresh-data-list="refreshChange"
+    />
+  </div>
+</template>
+
+<script setup>
+import { isAuth } from '@/utils'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { tableOption } from '@/crud/prod/prodTag.js'
+import AddOrUpdate from './add-or-update.vue'
+
+const dataList = ref([])
+const page = reactive({
+  total: 0, // 总页数
+  currentPage: 1, // 当前页数
+  pageSize: 10 // 每页显示多少条
+})
+const dataListLoading = ref(false)
+
+const getDataList = (pageParam, params, done) => {
+  dataListLoading.value = true
+  http({
+    url: http.adornUrl('/prod/prodTag/page'),
+    method: 'get',
+    params: http.adornParams(Object.assign({
+      current: pageParam == null ? page.currentPage : pageParam.currentPage,
+      size: pageParam == null ? page.pageSize : pageParam.pageSize
+    }, params))
+  })
+    .then(({ data }) => {
+      dataList.value = data.records
+      page.total = data.total
+      dataListLoading.value = false
+      if (done) done()
+    })
+}
+
+const addOrUpdateVisible = ref(false)
+const addOrUpdateRef = ref(null)
+/**
+ * 新增 / 修改
+ * @param id
+ */
+const onAddOrUpdate = (id) => {
+  addOrUpdateVisible.value = true
+  nextTick(() => {
+    addOrUpdateRef.value?.init(id)
+  })
+}
+
+const onDelete = (id) => {
+  ElMessageBox.confirm('确定进行删除操作?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(() => {
+      http({
+        url: http.adornUrl('/prod/prodTag/' + id),
+        method: 'delete',
+        data: http.adornData({})
+      })
+        .then(() => {
+          ElMessage({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              getDataList(page)
+            }
+          })
+        })
+    }).catch(() => { })
+}
+/**
+ * 刷新回调
+ */
+const refreshChange = () => {
+  getDataList(page)
+}
+const onSearch = (params, done) => {
+  getDataList(page, params, done)
+}
+
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/modules/prod/spec/add-or-update.vue

@@ -0,0 +1,190 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="!dataList[0].propId ? '新增' : '修改'"
+    :close-on-click-modal="false"
+  >
+    <el-table
+      :data="dataList"
+      border
+      style="width: 100%;"
+    >
+      <el-table-column
+        prop="propName"
+        header-align="center"
+        align="center"
+        label="属性名称"
+      >
+        <template #default="scope">
+          <el-input
+            v-model="scope.row.propName"
+            placeholder="请输入内容"
+            maxlength="10"
+            show-word-limit
+            clearable
+          />
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="prodPropValues"
+        header-align="center"
+        align="center"
+        label="属性值"
+      >
+        <template #default="scope">
+          <el-col
+            v-for="item in scope.row.prodPropValues"
+            :key="item.valueId"
+            :span="12"
+          >
+            <el-input
+              v-model="item.propValue"
+              placeholder="请输入内容"
+              class="prop-value-input"
+              maxlength="20"
+              show-word-limit
+              clearable
+              @clear="clearProdPropValues"
+            />
+          </el-col>
+          <el-col :span="4">
+            <el-button
+              v-show="scope.row.prodPropValues[scope.row.prodPropValues.length-1].propValue"
+              type="primary"
+              class="add-input"
+              icon="el-icon-circle-plus"
+              @click="addInput()"
+            />
+          </el-col>
+        </template>
+      </el-table-column>
+    </el-table>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="visible = false">
+          取消
+        </el-button>
+        <el-button
+          type="primary"
+          @click="onSubmit()"
+        >
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup>
+import { ElMessage } from 'element-plus'
+import { Debounce } from '@/utils/debounce'
+const emit = defineEmits(['refreshDataList'])
+
+const visible = ref(false)
+const dataList = ref([{ propId: 0, propName: '', prodPropValues: [{ valueId: 0 }] }])
+const page = {
+  total: 0, // 总页数
+  currentPage: 1, // 当前页数
+  pageSize: 10 // 每页显示多少条
+}
+
+const init = (val) => {
+  if (val) {
+    dataList.value = [JSON.parse(JSON.stringify(val))]
+  } else {
+    dataList.value = [
+      { propId: 0, propName: '', prodPropValues: [{ valueId: 0 }] }
+    ]
+  }
+  visible.value = true
+}
+defineExpose({ init })
+
+/**
+ * 表单提交
+ */
+const onSubmit = Debounce(() => {
+  if (dataList.value[0].prodPropValues) {
+    const temp = []
+    for (const key in dataList.value[0].prodPropValues) {
+      // eslint-disable-next-line no-prototype-builtins
+      if (dataList.value[0].prodPropValues.hasOwnProperty(key)) {
+        const element = dataList.value[0].prodPropValues[key]
+        if (element.propValue) {
+          temp.push(dataList.value[0].prodPropValues[key])
+        }
+      }
+    }
+    dataList.value[0].prodPropValues = temp
+  }
+  if (!dataList.value[0].propName.trim()) {
+    dataList.value[0].propName = ''
+    ElMessage.error('属性名不能为空')
+    return
+  }
+  if (dataList.value[0].prodPropValues.length < 1) {
+    dataList.value[0].prodPropValues = [{ valueId: 0 }]
+    ElMessage.error('规格项不能为空')
+    return
+  }
+  if (dataList.value[0].propName.length > 10) {
+    ElMessage.error('属性名称长度不能大于10')
+    return
+  }
+  if (dataList.value[0].prodPropValues.find(el => !el.propValue.trim())) {
+    ElMessage.error('属性值不能为空')
+    return
+  }
+  if (dataList.value[0].prodPropValues.find(el => el.propValue.length > 20)) {
+    ElMessage.error('属性值长度不能大于20')
+    return
+  }
+  http({
+    url: http.adornUrl('/prod/spec'),
+    method: dataList.value[0].propId ? 'put' : 'post',
+    data: http.adornData({
+      propId: dataList.value[0].propId || undefined,
+      propName: dataList.value[0].propName,
+      prodPropValues: dataList.value[0].prodPropValues
+    })
+  })
+    .then(() => {
+      ElMessage({
+        message: '操作成功',
+        type: 'success',
+        duration: 1500,
+        onClose: () => {
+          visible.value = false
+          emit('refreshDataList', page)
+        }
+      })
+    })
+})
+
+const clearProdPropValues = () => {
+  if (dataList.value[0].prodPropValues.length === 1) {
+    return
+  }
+  for (let i = 0; i < dataList.value[0].prodPropValues.length; i++) {
+    const element = dataList.value[0].prodPropValues[i]
+    if (!element.propValue) {
+      dataList.value[0].prodPropValues.splice(i, 1)
+    }
+  }
+}
+
+const addInput = () => {
+  const temp = dataList.value[0].prodPropValues
+  if (temp[temp.length - 1].propValue) {
+    temp.push({})
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.prop-value-input {
+  padding: 3px;
+}
+.add-input {
+  margin: 3px;
+}
+</style>

src/views/modules/prod/spec/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="mod-prod">
+    <avue-crud
+      ref="crudRef"
+      :page="page"
+      :data="dataList"
+      :option="tableOption"
+      :permission="permission"
+      @search-change="onSearch"
+      @on-load="getDataList"
+    >
+      <template #prodPropValues="scope">
+        <el-tag
+          v-for="item in scope.row.prodPropValues"
+          :key="item.valueId"
+        >
+          {{ item.propValue }}
+        </el-tag>
+      </template>
+      <template #menu-left>
+        <el-button
+          v-if="isAuth('shop:pickAddr:save')"
+          type="primary"
+          icon="el-icon-plus"
+
+          @click.stop="onAddOrUpdate()"
+        >
+          新增
+        </el-button>
+      </template>
+      <template #menu="scope">
+        <el-button
+          v-if="isAuth('prod:spec:update')"
+          type="primary"
+          icon="el-icon-edit"
+
+          @click.stop="onAddOrUpdate(scope.row)"
+        >
+          编辑
+        </el-button>
+
+        <el-button
+          v-if="isAuth('prod:spec:delete')"
+          type="danger"
+          icon="el-icon-delete"
+
+          @click.stop="onDelete(scope.row.propId)"
+        >
+          删除
+        </el-button>
+      </template>
+    </avue-crud>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdateRef"
+      @refresh-data-list="getDataList"
+    />
+  </div>
+</template>
+
+<script setup>
+import { isAuth } from '@/utils'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import AddOrUpdate from './add-or-update.vue'
+import { tableOption } from '@/crud/prod/spec.js'
+const permission = ref({
+  delBtn: isAuth('prod:prod:delete')
+})
+const dataList = ref([])
+const dataListLoading = ref(false)
+const dataListSelections = ref([])
+const page = reactive({
+  total: 0, // 总页数
+  currentPage: 1, // 当前页数
+  pageSize: 10 // 每页显示多少条
+})
+/**
+ * 获取数据列表
+ */
+const getDataList = (pageParam, params, done) => {
+  dataListLoading.value = true
+  http({
+    url: http.adornUrl('/prod/spec/page'),
+    method: 'get',
+    params: http.adornParams(
+      Object.assign(
+        {
+          current: pageParam == null ? page.currentPage : pageParam.currentPage,
+          size: pageParam == null ? page.pageSize : pageParam.pageSize
+        },
+        params
+      )
+    )
+  })
+    .then(({ data }) => {
+      dataList.value = data.records
+      page.total = data.total
+      dataListLoading.value = false
+      if (done) done()
+    })
+}
+
+const addOrUpdateVisible = ref(false)
+const addOrUpdateRef = ref(null)
+/**
+ * 新增 / 修改
+ * @param val
+ */
+const onAddOrUpdate = (val) => {
+  addOrUpdateVisible.value = true
+  nextTick(() => {
+    addOrUpdateRef.value?.init(val)
+  })
+}
+
+/**
+ * 删除
+ * @param id
+ */
+const onDelete = (id) => {
+  const ids = id ? [id] : dataListSelections.value?.map(item => {
+    return item.propId
+  })
+  ElMessageBox.confirm(`确定进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(() => {
+      http({
+        url: http.adornUrl(`/prod/spec/${ids}`),
+        method: 'delete',
+        data: http.adornData(ids, false)
+      })
+        .then(() => {
+          ElMessage({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              getDataList(page)
+            }
+          })
+        })
+    })
+    .catch(() => { })
+}
+
+const onSearch = (params, done) => {
+  getDataList(page, params, done)
+}
+
+</script>
+
+<style scoped lang="scss">
+:deep(.prop-value) {
+  display: inline-block;
+  margin: 0 3px 3px 0;
+}
+</style>

src/views/modules/shop/hotSearch/index.vue

@@ -82,8 +82,6 @@ const page = reactive({
   pageSize: 10 // 每页显示多少条
 })
 const dataListLoading = ref(false)
-const dataListSelections = ref([])
-
 /**
  * 获取数据列表
  */
@@ -106,7 +104,7 @@ const getDataList = (pageParam, params, done) => {
       if (done) done()
     })
 }
-
+const dataListSelections = ref([])
 /**
  * 多选回调
  * @param list

src/views/modules/shop/notice/index.vue

@@ -29,7 +29,7 @@
           是
         </el-tag>
       </template>
-      <template #menuLeft>
+      <template #menu-left>
         <el-button
           v-if="isAuth('shop:notice:save')"
           type="primary"

src/views/modules/user/user/add-or-update.vue

@@ -16,10 +16,14 @@
         prop="pic"
       >
         <img
+          v-if="dataForm.pic"
           :src="dataForm.pic"
           class="image"
           alt=""
         >
+        <div v-else>
+          无
+        </div>
       </el-form-item>
       <el-form-item
         label="用户昵称"

src/views/modules/user/user/index.vue

@@ -14,10 +14,7 @@
           v-if="scope.row.pic"
           class="avue-crud__img"
         >
-          <i
+          <el-icon><Document /></el-icon>
-            :src="scope.row.pic"
-            class="el-icon-document"
-          />
         </span>
         <span v-else>-</span>
       </template>