Jelajahi Sumber

修改产品详情页:去除关联商品,产品介绍放第一位

xiaohaizhao 1 bulan lalu
induk
melakukan
f794806e8d

+ 1 - 1
dist/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="./vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>营销宝</title>
-    <script type="module" crossorigin src="./assets/index-27cb2e76.js"></script>
+    <script type="module" crossorigin src="./assets/index-03630b66.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/vue-8259307b.js">
     <link rel="modulepreload" crossorigin href="./assets/vue-router-55bfd43b.js">
     <link rel="stylesheet" href="./assets/index-b8e2bd64.css">

+ 238 - 2
src/MAR/assetsStore/index.vue

@@ -11,7 +11,49 @@
         <a-tree :tree-data="classList" :field-names="treeFieldNames" :selected-keys="selectedClassKeys"
           :expanded-keys="expandedKeys" :expand-action="false" :autoExpandParent="true" @select="onClassSelect" class="custom-tree">
           <template #title="node">
-            <span>{{ node.classname }}{{ node.remark ? '-' + node.remark : '' }}</span>
+            <div class="tree-node-content">
+              <span class="node-title">{{ node.classname }}{{ node.remark ? '-' + node.remark : '' }}</span>
+              <div class="node-operations">
+                <!-- 新建按钮:子分类新建数据,父分类新建下级 -->
+                <a-button 
+                  type="link" 
+                  size="small" 
+                  @click="(e) => handleCreate(node, e)"
+                  :disabled="node.level >= 3"
+                >
+                  {{ node.level === 1 ? '新建子分类' : '新建' }}
+                </a-button>
+                
+                <!-- 编辑下拉菜单 -->
+                <a-dropdown 
+                  placement="bottomRight"
+                  trigger="hover"
+                >
+                  <template #overlay>
+                    <a-menu>
+                      <!-- 启用/停用分类 -->
+                      <a-menu-item @click="(e) => handleToggleStatus(node, e)">
+                        {{ node.isenable === 1 ? '停用分类' : '启用分类' }}
+                      </a-menu-item>
+                      <!-- 编辑分类 -->
+                      <a-menu-item @click="(e) => handleEdit(node, e)">
+                        编辑分类
+                      </a-menu-item>
+                      <!-- 删除分类 -->
+                      <a-menu-item 
+                        @click="(e) => handleDelete(node, e)"
+                        :disabled="node.children && node.children.length > 0"
+                      >
+                        删除分类
+                      </a-menu-item>
+                    </a-menu>
+                  </template>
+                  <a-button type="link" size="small">
+                    编辑
+                  </a-button>
+                </a-dropdown>
+              </div>
+            </div>
           </template>
         </a-tree>
       </div>
@@ -21,7 +63,12 @@
         <listTemp ref="list" @handleData="handleData" keyRouteName="title" :param="param" tableName="signListTable"
           :searchType="searchType" :detailPage="{ name: 'assetsStoreDetail', idname: 'sat_sharematerialid' }">
           <template #operation>
-            <Add :selectedClass="selectedClassNode" @back="delRow" v-if="utils.hasPermission('insert')"></Add>
+            <Add 
+              ref="addRef" 
+              :selectedClass="selectedClassNode" 
+              @back="delRow" 
+              v-if="utils.hasPermission('insert')"
+            ></Add>
             <setClass @back="getClassList()"></setClass>
           </template>
           <template #tb_cell="{ data }">
@@ -80,6 +127,22 @@
   </template>
 
   <setClass ref="setClassRef" v-model:visible="showSetClass" @back="getClassList()"></setClass>
+  
+  <!-- 新建分类对话框 -->
+  <SetClassAdd 
+    v-if="showCreateClassDialog"
+    :data="createData"
+    @onSuccess="handleCreateSuccess"
+    @back="showCreateClassDialog = false"
+  />
+  
+  <!-- 编辑分类对话框 -->
+  <SetClassEdit 
+    v-if="showEditClassDialog"
+    :data="editData"
+    @onSuccess="handleEditSuccess"
+    @back="showEditClassDialog = false"
+  />
 </template>
 <script setup>
 import listTemp from '@/components/listTemplate/index.vue';
@@ -91,12 +154,138 @@ import customBtn from '@/components/customHandleBtn/index.vue'
 import Add from './modules/Add.vue'
 import setClass from './modules/setClass/index.vue'
 import useHistory from '@/MAR/signManage/modules/downcount.vue'
+import SetClassAdd from './modules/setClass/add.vue'
+import SetClassEdit from './modules/setClass/edit.vue'
+import { Modal } from 'ant-design-vue'
 
 import { useAuthStore } from '@/stores/modules/auth'
 const router = useRouter()
 console.log(router);
 const list = ref()
 
+// 操作函数
+const handleCreate = (node, e) => {
+  // 防止事件冒泡,避免触发Tree的select事件
+  if (e) {
+    e.stopPropagation()
+    e.preventDefault()
+  }
+  
+  // 根据节点层级判断是新建分类还是新建数据
+  if (node.level === 1) {
+    // 一级分类(父分类):新建子分类
+    console.log('新建子分类,父分类:', node)
+    showCreateClassDialog.value = true
+    createData.value = node
+  } else if (node.level === 2) {
+    // 二级分类(子分类):新建数据
+    // 使用现有的 Add 组件,传递分类信息
+    console.log('新建数据,分类:', node)
+    // 首先设置当前选中的分类,然后触发新建按钮点击
+    selectedClassNode.value = node
+    selectedClassKeys.value = [node.sat_sharematerial_classid]
+    
+    // 调用新建组件的功能
+    if (addRef.value) {
+      addRef.value.addClass()
+    }
+  }
+}
+
+// 启用/停用分类
+const handleToggleStatus = (node, e) => {
+  if (e) {
+    e.stopPropagation()
+    e.preventDefault()
+  }
+  
+  Modal.confirm({
+    title: `确定要${node.isenable === 1 ? '停用' : '启用'}该分类吗?`,
+    content: node.isenable === 1 ? '停用后该分类下的所有内容将不可见' : '启用后该分类下的所有内容将可见',
+    okText: '确定',
+    okType: 'primary',
+    cancelText: '取消',
+    onOk() {
+      return new Promise((resolve, reject) => {
+        Api.requested({
+          "id": "20240403153602",
+          "content": {
+            "sat_sharematerial_classids": [node.sat_sharematerial_classid],
+            "isenable": node.isenable === 1 ? 0 : 1
+          }
+        }).then(res => {
+          if (res.msg === '成功') {
+            node.isenable = node.isenable === 1 ? 0 : 1
+            utils.message(res, '操作成功')
+            resolve()
+          } else {
+            reject()
+          }
+        }).catch(reject)
+      })
+    },
+    onCancel() {}
+  })
+}
+
+// 编辑分类
+const handleEdit = (node, e) => {
+  if (e) {
+    e.stopPropagation()
+    e.preventDefault()
+  }
+  
+  console.log('编辑分类:', node)
+  showEditClassDialog.value = true
+  editData.value = node
+}
+
+// 删除分类
+const handleDelete = (node, e) => {
+  if (e) {
+    e.stopPropagation()
+    e.preventDefault()
+  }
+  
+  Modal.confirm({
+    title: '确定要删除该分类吗?',
+    content: '删除后该分类下的所有内容将不可恢复',
+    okText: '确定',
+    okType: 'danger',
+    cancelText: '取消',
+    onOk() {
+      return new Promise((resolve, reject) => {
+        Api.requested({
+          "id": "20221102143502",
+          "content": {
+            "sat_sharematerial_classids": [node.sat_sharematerial_classid]
+          }
+        }).then(res => {
+          if (res.msg === '成功') {
+            utils.message(res, '操作成功')
+            getClassList()
+            resolve()
+          } else {
+            reject()
+          }
+        }).catch(reject)
+      })
+    },
+    onCancel() {}
+  })
+}
+
+// 分类操作成功处理函数
+const handleCreateSuccess = () => {
+  showCreateClassDialog.value = false
+  getClassList() // 刷新分类列表
+}
+
+const handleEditSuccess = () => {
+  showEditClassDialog.value = false
+  getClassList() // 刷新分类列表
+}
+
 provide('listqueryidFun', () => list.value.listqueryid)
 
 // 树形字段映射
@@ -115,6 +304,13 @@ const debounceTimer = ref(null) // 防抖定时器
 const showSetClass = ref(false)
 const setClassRef = ref()
 const enableNewLayout = ref(true) // 是否启用新布局
+const addRef = ref(null) // Add组件引用
+
+// 分类操作对话框
+const showCreateClassDialog = ref(false)
+const showEditClassDialog = ref(false)
+const createData = ref(null)
+const editData = ref(null)
 
 // 打开设置分类弹窗
 const openSetClass = () => {
@@ -332,4 +528,44 @@ onMounted(() => {
 .custom-tree :deep(.ant-tree-node-selected .ant-tree-title) {
   color: #1890ff;
 }
+
+/* 树节点内容布局 */
+.tree-node-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.node-title {
+  flex: 1;
+  padding: 2px 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.node-operations {
+  display: flex;
+  gap: 4px;
+}
+
+/* 操作按钮样式 */
+.custom-tree :deep(.ant-tree-title) {
+  display: block;
+  width: 100%;
+}
+
+.custom-tree :deep(.ant-btn) {
+  padding: 0 8px;
+  font-size: 12px;
+  height: auto;
+  line-height: 1.5715;
+}
+
+/* 下拉菜单样式 */
+.custom-tree :deep(.ant-dropdown-menu-item) {
+  padding: 8px 16px;
+  font-size: 12px;
+}
 </style>

+ 5 - 0
src/MAR/assetsStore/modules/Add.vue

@@ -634,6 +634,11 @@ const enterpriseHandleUploadApi = async (uploadApi,data) => {
   }
 }
 
+// 暴露 addClass 方法
+defineExpose({
+  addClass
+})
+
 onMounted(() => {
 })
 </script>

+ 9 - 1
src/MAR/assetsStore/modules/setClass/add.vue

@@ -82,9 +82,17 @@ const form = ref({
   "remarks":''
 })
 const showDrawer = ()=>{
-  if (props.data) form.value.isenable = props.data.isenable
+  if (props.data) {
+    form.value.isenable = props.data.isenable
+    form.value.parentid = props.data.sat_sharematerial_classid
+  }
   visible.value = true
 }
+
+// 暴露方法供外部调用
+defineExpose({
+  showDrawer
+})
 const formRef = ref()
 let upload = ref()
 const submit = async () => {

+ 5 - 0
src/MAR/assetsStore/modules/setClass/edit.vue

@@ -92,6 +92,11 @@ const showDrawer = ()=>{
   })
   console.log(form.value);
 }
+
+// 暴露方法供外部调用
+defineExpose({
+  showDrawer
+})
 const formRef = ref()
 
 const submit = async () => {

+ 5 - 8
src/MAR/productManage/detail/index.vue

@@ -3,7 +3,7 @@
     <detail-template 
       :headData="mainAreaData" 
       :title="mainData.name" 
-      :tabs="['图集管理','关联商品','产品介绍','详细信息']" 
+      :tabs="['产品介绍','图集管理','详细信息']" 
       ownertable="sa_fad"
       :disable="utils.isDisabled(mainData.isonsale,['1'])"
       :delParam="{id:20240418141102,content:{sa_fadids:[router.currentRoute.value.query.id]}}"
@@ -49,6 +49,9 @@
         </a-descriptions>
       </template>
       <template #tab0>
+        <div id="contentTxt"></div>
+      </template>
+      <template #tab1>
         <photoWall
           :attinfos="mainData.attinfos_pic"
           pic
@@ -57,13 +60,7 @@
           :ownerid="mainData.sa_fadid"
         />
       </template>
-      <template #tab1>
-        <ProductManage :rowData="mainData"></ProductManage>
-      </template>
       <template #tab2>
-        <div id="contentTxt"></div>
-      </template>
-      <template #tab3>
         <span class="normal-title" style="margin-bottom: 10px">基本信息</span>
         <defaultInfo :data="baseInfo">
           <template #封面图>
@@ -148,7 +145,7 @@ const mianData = async ()=>{
 }
 
 const changeTab = (key) => {
-  if (key == 2) {
+  if (key == 0) {
     nextTick(() => {
       document.querySelector('#contentTxt').innerHTML = mainData.value.content
     })