feat 添加商品上下架功能

2023-06-28 14:47:13 +08:00 · 2023-06-28 14:47:13 +08:00 · 55e205da04
commit 55e205da04
parent 3433ceb4c4
5 changed files with 111 additions and 9 deletions
--- a/src/api/business/GoodsManager/Goodss/goods.js
+++ b/src/api/business/GoodsManager/Goodss/goods.js
@ -45,6 +45,15 @@ export function addOrUpdateGoods(data) {
  })
 }

+// 上下架商品
+export function shelfGoods(data) {
+  return request({
+    url: '/business/Goods/shelfGoods',
+    method: 'put',
+    data: data,
+  })
+}
+
 // 商品删除
 export function delGoods(ids) {
  return request({
--- a/src/views/business/GoodsManager/Goodss/components/AddDialog.vue
+++ b/src/views/business/GoodsManager/Goodss/components/AddDialog.vue
@ -52,7 +52,7 @@
            </el-col>
            <el-col :lg="24">
              <el-form-item :label-width="labelWidth" label="图片" prop="goodsPicture">
-                <UploadImage ref="uploadRef" v-model="formData.goodsPicture" :data=imgData :limit="5" :fileSize="5"
+                <UploadImage ref="uploadRef" v-model="formData.goodsPicture" :data=imgData :limit="10" :fileSize="5"
                  :drag="true" :isShowTip="false" />
              </el-form-item>
            </el-col>
@ -173,6 +173,9 @@
          <el-row :gutter="20">
            <el-col :lg="24">
              <el-form-item :label-width="labelWidth" label="详情" prop="goodsDetails">
+                <div class="copy-btn-box">
+                  <el-button @click="handleCopyRichText" class="copy-btn">获取富文本内容</el-button>
+                </div>
                <editor v-model="formData.goodsDetails" />
              </el-form-item>
            </el-col>
@ -503,6 +506,12 @@ async function getGoodsServicesList() {
  })
 }

+async function handleCopyRichText() {
+  let text = await navigator.clipboard.writeText(formData.goodsDetails);
+    modal.msgSuccess("富文本内容复制成功")
+}
+
+

 // 基础信息表单
 const baseFormRef = ref();
@ -646,4 +655,12 @@ const handleResetClick = async (formElList) => {
 .el-divider {
  margin: 50px 0;
 }
+
+
+.copy-btn-box{
+  width: 100%;
+  display: flex;
+  justify-content: right;
+  margin-bottom: 15px;
+}
 </style>
--- a/src/views/business/GoodsManager/Goodss/components/EditDialog.vue
+++ b/src/views/business/GoodsManager/Goodss/components/EditDialog.vue
@ -48,7 +48,7 @@
            </el-col>
            <el-col :lg="24">
              <el-form-item :label-width="labelWidth" label="图片" prop="goodsPicture">
-                <UploadImage ref="uploadRef" v-model="formData.goodsPicture" :data=imgData :limit="5" :fileSize="5"
+                <UploadImage ref="uploadRef" v-model="formData.goodsPicture" :data=imgData :limit="10" :fileSize="5"
                  :drag="true" :isShowTip="false" />
              </el-form-item>
            </el-col>
@ -169,6 +169,9 @@
          <el-row :gutter="20">
            <el-col :lg="24">
              <el-form-item :label-width="labelWidth" label="详情" prop="goodsDetails">
+                <div class="copy-btn-box">
+                  <el-button @click="handleCopyRichText" class="copy-btn">获取富文本内容</el-button>
+                </div>
                <editor v-model="formData.goodsDetails" />
              </el-form-item>
            </el-col>
@ -199,7 +202,7 @@
            <el-col :lg="12">
              <el-form-item :label-width="labelWidth" label="主图视频" prop="goodsMainImageVideo">
                <div style="display: block;">
-                  <UploadFile v-model="formData.goodsMainImageVideo" :limit="1" :fileSize="100" :data=imgData
+                  <UploadFile v-model="formData.goodsMainImageVideo" :limit="10" :fileSize="100" :data=imgData
                    :isShowTip="false" />
                  <div class="input-intro">建议视频宽高比19:9，建议时长8-45秒</div>
                </div>
@ -504,6 +507,11 @@ async function getGoodsSkuListFun() {
  })
 }

+async function handleCopyRichText() {
+  let text = await navigator.clipboard.writeText(formData.goodsDetails);
+    modal.msgSuccess("富文本内容复制成功")
+}
+

 // -基础参数
 const props = defineProps({
@ -615,3 +623,27 @@ const closeDialog = () => {
 };

 </script>
+
+
+<style>
+.divider-title {
+  font-size: 18px;
+}
+
+.input-intro {
+  color: #8c8c8c;
+  font-size: 12px;
+}
+
+.el-divider {
+  margin: 50px 0;
+}
+
+
+.copy-btn-box {
+  width: 100%;
+  display: flex;
+  justify-content: right;
+  margin-bottom: 15px;
+}
+</style>
--- a/src/views/business/GoodsManager/Goodss/index.vue
+++ b/src/views/business/GoodsManager/Goodss/index.vue
@ -56,6 +56,16 @@
          {{ $t('btn.add') }}
        </el-button>
      </el-col>
+      <el-col :span="1.5">
+        <el-button type="success" :disabled="multiple" plain icon="Top" @click="handleShelf(1)">
+          上架
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" :disabled="multiple" plain icon="Bottom" @click="handleShelf(2)">
+          下架
+        </el-button>
+      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" :disabled="multiple" v-hasPermi="['business:goods:delete']" plain icon="delete"
          @click="handleDelete">
@ -110,6 +120,10 @@
            v-hasPermi="['business:goods:addOrUpdate']">编辑</el-button>
          <el-button type="danger" size="small" icon="delete" @click="handleDelete(scope.row)"
            v-hasPermi="['business:goods:delete']">删除</el-button>
+          <el-button v-if="scope.row.goodsShelfStatus == 2" type="success" size="small" icon="Top"
+            @click="handleShelf(1, scope.row)">上架</el-button>
+          <el-button v-if="scope.row.goodsShelfStatus == 1" type="danger" size="small" icon="Bottom"
+            @click="handleShelf(2, scope.row)">下架</el-button>
          <!-- <el-button size="small" icon="view" @click="handleDetail(scope.row)">查看</el-button> -->
        </template>
      </el-table-column>
@ -131,7 +145,7 @@
 <script setup name="goods">
 import { ElMessageBox } from 'element-plus'
 import modal from '@/plugins/modal.js'
-import { exportGoods, goodsList, delGoods } from '@/api/business/GoodsManager/Goodss/goods.js'
+import { exportGoods, goodsList, delGoods, shelfGoods } from '@/api/business/GoodsManager/Goodss/goods.js'
 import { goodsCategoryTreeList } from '@/api/business/GoodsManager/GoodsCategorys/goodsCategory.js'
 import { shopGoodsCategoryTreeList } from '@/api/business/GoodsManager/ShopGoodsCategorys/shopGoodsCategory.js'
 import AddDialog from "./components/AddDialog.vue";
@ -279,7 +293,6 @@ function getList() {

 // 多选框选中数据
 function handleSelectionChange(selection) {
-  console.log(selection,'检查 selection 中的内容'); // 检查 selection 中的内容
  ids.value = selection.map((item) => item.goodsId)
  single.value = selection.length != 1
  multiple.value = !selection.length
@ -337,6 +350,40 @@ function handleExport(row) {
    })
 }

+/** 上下架按钮操作 */
+const ShelfData = reactive({
+  ids: null,
+  goodsShelfStatus: null,
+})
+function handleShelf(status, row) {
+  const Ids = row?.goodsId || ids.value.toString()
+  let str = status == 1 ? "上" : "下"
+  ElMessageBox.confirm("是否将商品" + str + "架？", "系统提示", {
+    distinguishCancelAndClose: true,
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: "warning",
+  })
+    .then(async () => {
+      ShelfData.goodsShelfStatus = status
+      ShelfData.ids = Ids
+      Shelf()
+    })
+}
+async function Shelf() {
+  shelfGoods(ShelfData).then((res) => {
+    if (res.code == 200) {
+      handleQuery()
+      let str = ShelfData.goodsShelfStatus == 1 ? "上" : "下"
+      ElMessageBox.alert(res.data, str + "架信息", {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: "确定",
+      });
+    } else {
+      ElMessage.error(res.data);
+    }
+  })
+}

 // 修改
 function handleUpdate(row) {
--- a/src/views/business/GoodsManager/ShopGoodsCategorys/components/EditDialog.vue
+++ b/src/views/business/GoodsManager/ShopGoodsCategorys/components/EditDialog.vue
@ -122,10 +122,7 @@ const imgData = ref({

 // 验证
 const rules = reactive({
-  shopGoodsCategoryGuid: [{ required: true, message: "不能为空", trigger: "blur", type: "number" }],
-  shopGuid: [{ required: true, message: "店铺guid不能为空", trigger: "blur", type: "number" }],
-  shopGoodsCategoryParentGuid: [{ required: true, message: "父级guid不能为空", trigger: "blur", type: "number" }],
-  shopGoodsCategoryAncestralGuid: [{ required: true, message: "祖级guid不能为空", trigger: "blur" }],
+  shopGoodsCategoryParentGuid: [{ required: true, message: "上级菜单不能为空", trigger: "blur", type: "number" }],
  shopGoodsCategoryName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
  shopGoodsCategoryDisplayStatus: [{ required: true, message: "显示状态不能为空", trigger: "blur", type: "number" }],
  shopGoodsCategorySort: [{ required: true, message: "排序不能为空", trigger: "blur", type: "number" }],