暂存

src/MAR/productManage/index.vue

@@ -10,9 +10,11 @@
         :expanded-keys="expandedKeys" :expand-action="false" :autoExpandParent="true" @select="onClassSelect"
         @expand="onTreeExpand" class="custom-tree">
         <template #title="node">
-          <div class="tree-node-content">
-            <span class="node-title" :class="{ 'disabled-class': node.isenable === 0 }">{{ node.classname }}{{
-              node.remark ? '-' + node.remark : '' }}</span>
+          <div class="tree-node-content" :style="{ width: 240 - node.level * 21 + 'px' }">
+            <!-- 每少一级别，宽度减少21px -->
+            <span class="node-title" :class="{ 'disabled-class': node.isenable === 0 }">{{
+              node.classname }}{{
+                node.remark ? '-' + node.remark : '' }}</span>
             <div class="node-operations">
               <!-- 新建按钮：子分类新建数据，父分类新建下级 -->
               <a-button type="link" size="small" @click="(e) => handleCreate(node, e)"
@@ -51,13 +53,18 @@
 
     <!-- 右侧内容 -->
     <div class="list-content">
-      <listTemp ref="list" @handleData="handleData" keyRouteName="name" :param="param" tableName="productListTable" :searchType="searchType" :detailPage="{name:'productDetail',idname:'sa_fadid'}">
+      <listTemp ref="list" @handleData="handleData" keyRouteName="name" :param="param" tableName="productListTable"
+        :searchType="searchType" :detailPage="{ name: 'productDetail', idname: 'sa_fadid' }">
         <template #operation>
-          <Add ref="addRef" :selectedClass="selectedClassNode" @back="delRow" v-if="utils.hasPermission('insert')"></Add>
+          <Add ref="addRef" :selectedClass="selectedClassNode" @back="delRow" v-if="utils.hasPermission('insert')">
+          </Add>
         </template>
-        <template #tb_cell="{data}">
+        <template #tb_cell="{ data }">
           <template v-if="data.column.dataIndex === 'attinfos'">
-            <a-image v-if="data.record.attinfos && data.record.attinfos.filter(item => item.usetype == 'sa_fad').length" :src=" data.record.attinfos.filter(item => item.usetype == 'sa_fad')[0].fileType=='video' ? data.record.attinfos.filter(item => item.usetype == 'sa_fad')[0].subfiles[0].url:data.record.attinfos.filter(item => item.usetype == 'sa_fad')[0].cover" :preview="{src:data.record.attinfos.filter(item => item.usetype == 'sa_fad')[0].fileType=='video' ? data.record.attinfos.filter(item => item.usetype == 'sa_fad')[0].subfiles[0].url:data.record.attinfos.filter(item => item.usetype == 'sa_fad')[0].url}" style="width:100px;height: 100px;"></a-image>
+            <a-image v-if="data.record.attinfos && data.record.attinfos.filter(item => item.usetype == 'sa_fad').length"
+              :src="data.record.attinfos.filter(item => item.usetype == 'sa_fad')[0].fileType == 'video' ? data.record.attinfos.filter(item => item.usetype == 'sa_fad')[0].subfiles[0].url : data.record.attinfos.filter(item => item.usetype == 'sa_fad')[0].cover"
+              :preview="{ src: data.record.attinfos.filter(item => item.usetype == 'sa_fad')[0].fileType == 'video' ? data.record.attinfos.filter(item => item.usetype == 'sa_fad')[0].subfiles[0].url : data.record.attinfos.filter(item => item.usetype == 'sa_fad')[0].url }"
+              style="width:100px;height: 100px;"></a-image>
           </template>
           <template v-if="data.column.dataIndex === 'qrcode'">
             <a-popover placement="left">
@@ -71,20 +78,23 @@
             </a-popover>
           </template>
           <template v-if="data.column.dataIndex === 'isonsale'">
-            <span :style="{color:utils.statusAndColor(data.record.isonsale?'上架':'下架')}">{{ data.record.isonsale?'上架':'下架' }}</span>
+            <span :style="{ color: utils.statusAndColor(data.record.isonsale ? '上架' : '下架') }">{{
+              data.record.isonsale ? '上架' : '下架' }}</span>
           </template>
         </template>
       </listTemp>
     </div>
   </div>
-  <setClass ref="setClassRef" v-model:visible="showSetClass" @back="getClassList()"></setClass>
-  <AddClass ref="addClassRef" :data="createData" @onSuccess="handleCreateSuccess" @back="handleCreateBack" />
-  <EditClass ref="editClassRef" :data="editData" @onSuccess="handleEditSuccess" @back="handleEditBack" />
+  <setClass ref="setClassRef" v-model:visible="showSetClass" @back="getClassList()" :hideButton="true"></setClass>
+  <AddClass ref="addClassRef" :data="createData" @onSuccess="handleCreateSuccess" @back="handleCreateBack"
+    :hideButton="true" />
+  <EditClass ref="editClassRef" :data="editData" @onSuccess="handleEditSuccess" @back="handleEditBack"
+    :hideButton="true" />
 </template>
 <script setup>
 import listTemp from '@/components/listTemplate/index.vue';
 import setClass from './modules/setClass/index.vue'
-import { ref,onMounted, nextTick, provide, reactive } from 'vue'
+import { ref, onMounted, nextTick, provide, reactive } from 'vue'
 import { useRouter } from "vue-router";
 import Api from '@/api/api'
 import utils from '@/utils/utils'
@@ -244,7 +254,7 @@ const handleEditBack = () => {
   console.log('编辑分类对话框关闭')
 }
 
-provide('listqueryidFun',() => list.value.listqueryid)
+provide('listqueryidFun', () => list.value.listqueryid)
 
 // 树形字段映射
 const treeFieldNames = {
@@ -259,7 +269,6 @@ const selectedClassNode = ref(null) // 当前选中的分类节点数据
 const expandedKeys = ref([]) // 展开的节点keys
 const isLoading = ref(false) // 请求加载状态标志
 const debounceTimer = ref(null) // 防抖定时器
-const showSetClass = ref(false)
 const setClassRef = ref()
 
 // 分类操作对话框
@@ -270,7 +279,7 @@ const editData = ref(null)
 
 // 打开设置分类弹窗
 const openSetClass = () => {
-  showSetClass.value = true
+  setClassRef.value.openDrawer()
 }
 
 // 选择分类节点
@@ -345,12 +354,12 @@ const getAllChildIds = (children, result) => {
 }
 
 let searchType = ref([
-  {label:'状态',key:'isonsale',type:'select',dataSource:[{remarks:'全部',value:''},{remarks:'上架',value:'1'},{remarks:'下架',value:'0'}]},
-  {label:'是否停产',key:'isstop',type:'select',dataSource:[{remarks:'全部',value:''},{remarks:'是',value:'1'},{remarks:'否',value:'0'}]},
-  {label:'分类',key:'sa_fadclassids',multiple:true,type:'cascader',dataSource:[],optionParam:{label:'classname',value:'sa_fadclassid',children:'children'}},
-  {label:'创建时间',key:'dateRange',type:'datepickerRange',objKeys:['begindate_create','enddate_create']},
-  {label:'上架时间',key:'dateRange2',type:'datepickerRange',objKeys:['begindate_onsale','enddate_onsale']},
-  {label:'搜索',key:'condition',type:'input'},
+  { label: '状态', key: 'isonsale', type: 'select', dataSource: [{ remarks: '全部', value: '' }, { remarks: '上架', value: '1' }, { remarks: '下架', value: '0' }] },
+  { label: '是否停产', key: 'isstop', type: 'select', dataSource: [{ remarks: '全部', value: '' }, { remarks: '是', value: '1' }, { remarks: '否', value: '0' }] },
+  { label: '分类', key: 'sa_fadclassids', multiple: true, type: 'cascader', dataSource: [], optionParam: { label: 'classname', value: 'sa_fadclassid', children: 'children' } },
+  { label: '创建时间', key: 'dateRange', type: 'datepickerRange', objKeys: ['begindate_create', 'enddate_create'] },
+  { label: '上架时间', key: 'dateRange2', type: 'datepickerRange', objKeys: ['begindate_onsale', 'enddate_onsale'] },
+  { label: '搜索', key: 'condition', type: 'input' },
 ])
 let param = ref({
   "id": "20240418141302",
@@ -368,10 +377,10 @@ let param = ref({
     }
   }
 })
-const delRow = (id,init) => {
+const delRow = (id, init) => {
   if (init) return list.value.tableData()
   Api.requested({
-    "id":20240418141102,
+    "id": 20240418141102,
     "content": {
       "sa_fadids": [id]
     }
@@ -381,16 +390,16 @@ const delRow = (id,init) => {
 const handleData = (data) => {
   data.data.forEach(item => {
     item.attinfos = item.attinfos.map(v => {
-      v.cover = utils.getSpecifiedImage(v,'compressed')
+      v.cover = utils.getSpecifiedImage(v, 'compressed')
       return v
     })
   })
-  let initID = useAuthStore().nowAccount.userid+'99999'
+  let initID = useAuthStore().nowAccount.userid + '99999'
   let deleteList = [];
   data.data.forEach(v => (initID == v.sequence && v.name == '') ? deleteList.push(v.sa_fadid) : '')
   if (deleteList.length != 0) {
     Api.requested({
-      "id":20240418141102,
+      "id": 20240418141102,
       "content": {
         "sa_fadids": deleteList
       }
@@ -398,7 +407,7 @@ const handleData = (data) => {
       if (res.msg == '成功') list.value.tableData()
     })
   }
-  console.log(data,'数据');
+  console.log(data, '数据');
 }
 
 let classList = ref([])
@@ -406,10 +415,10 @@ const getClassList = async () => {
   let res = await Api.requested({
     "id": "20240418112002",
     "content": {
-        "parentid": 0,
-        "where": {
-            "isenable": "" // 获取所有分类，包括启用和未启用的
-        }
+      "parentid": 0,
+      "where": {
+        "isenable": "" // 获取所有分类，包括启用和未启用的
+      }
     }
   })
   classList.value = res.data
@@ -427,10 +436,10 @@ const getClassList = async () => {
   expandedKeys.value = getAllKeys(res.data)
 
   searchType.value[2].dataSource = classList.value
-  console.log(classList.value,'分类');
+  console.log(classList.value, '分类');
 }
 
-provide('classList',() => classList.value)
+provide('classList', () => classList.value)
 
 // 树节点展开/收起事件处理
 const onTreeExpand = (expandedKeysArray) => {
@@ -451,11 +460,11 @@ onMounted(() => {
 }
 
 .class-sidebar {
-  width: 250px;
   background: #fff;
   padding: 10px;
   border-radius: 4px;
   flex-shrink: 0;
+  box-sizing: border-box;
 }
 
 .sidebar-header {
@@ -476,11 +485,6 @@ onMounted(() => {
   color: #1890ff;
 }
 
-.list-content {
-  flex: 1;
-  overflow: hidden;
-}
-
 /* 树形组件选中样式 */
 .custom-tree :deep(.ant-tree-node-selected) {
   background-color: #e6f7ff !important;
@@ -494,8 +498,7 @@ onMounted(() => {
 .tree-node-content {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  width: 100%;
+  justify-content: flex-end;
 }
 
 .node-title {
@@ -506,22 +509,12 @@ onMounted(() => {
   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;
+  align-items: center;
+  justify-content: flex-end;
+  white-space: nowrap;
 }
 
 /* 下拉菜单样式 */

src/MAR/productManage/modules/setClass/add.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="inline-16">
-    <a-button type="primary" @click="showDrawer" v-if="!props.data">新建</a-button>
-    <a-button type="link" @click="showDrawer" v-else>新建下级</a-button>
+    <a-button v-if="!hideButton && !props.data" type="primary" @click="showDrawer">新建</a-button>
+    <a-button v-if="!hideButton && props.data" type="link" @click="showDrawer">新建下级</a-button>
     <a-drawer
       v-model:open="visible"
       class="custom-class"
@@ -60,7 +60,7 @@ import Upload from '@/MAR/archivesMag/modules/workManage/fileUpload.vue'
 
 
 const router = useRouter()
-const props = defineProps(['data','disabled'])
+const props = defineProps(['data','disabled','hideButton'])
 const emit = defineEmits(['onSuccess'])
 const visible = ref(false)
 let bindData = ref({})

src/MAR/productManage/modules/setClass/edit.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="inline-16">
-    <a-button type="link" @click="showDrawer" :disabled="disabled">编辑</a-button>
+    <a-button v-if="!hideButton" type="link" @click="showDrawer" :disabled="disabled">编辑</a-button>
     <a-drawer
       v-model:open="visible"
       class="custom-class"
@@ -60,7 +60,7 @@ import Upload from '@/MAR/archivesMag/modules/workManage/fileUpload.vue'
 
 
 const router = useRouter()
-const props = defineProps(['data','disabled'])
+const props = defineProps(['data','disabled','hideButton'])
 const emit = defineEmits(['onSuccess','back'])
 const visible = ref(false)
 let bindData = ref({})

src/MAR/productManage/modules/setClass/index.vue

@@ -1,40 +1,31 @@
 <template>
   <div>
-    <a-button @click="modeVisible=true" type="primary" size="samll">设置分类</a-button>
-    <a-drawer
-      ref="drawer"
-      v-model:open="modeVisible"
-      class="custom-class"
-      :title="'设置分类'"
-      placement="right"
-      :width="'70%'"
-      :closable="false"
-      v-if="modeVisible"
-      >
+    <a-button v-if="!hideButton" @click="modeVisible = true" type="primary" size="samll">设置分类</a-button>
+    <a-drawer ref="drawer" v-model:open="modeVisible" class="custom-class" :title="'设置分类'" placement="right"
+      :width="'70%'" :closable="false" v-if="modeVisible">
       <div style="margin-bottom: 10px" class="inline-16">
         <Add @onSuccess="$refs.table.listData()" v-if="utils.hasPermission('setClass')"></Add>
         <!-- <a-input style="width: 150px;margin-left: 10px;" v-model:value="param.content.where.condition" @keyup.enter="search"  placeholder="请输入搜索内容" autocomplete="off"></a-input> -->
       </div>
-      <normalTable :sequence="true" @listData="listData" rowKey="sa_fadclassid" :is-select="false" ref="table" size="small" :columns="utils.TBLayout('tableSCChildclass')" :param="param">
-        <template #tb_cell="{data}">
+      <normalTable :sequence="true" @listData="listData" rowKey="sa_fadclassid" :is-select="false" ref="table"
+        size="small" :columns="utils.TBLayout('tableSCChildclass')" :param="param">
+        <template #tb_cell="{ data }">
           <template v-if="data.column.dataIndex === 'issecret'">
-            <a-switch
-              v-model:checked="data.record.isenable"
-              :checkedValue="1"
-              :unCheckedValue="0"
-              unCheckedChildren="停用"
-              checkedChildren="启用"
-              @change="typeChange($event,data)"
-              >
+            <a-switch v-model:checked="data.record.isenable" :checkedValue="1" :unCheckedValue="0"
+              unCheckedChildren="停用" checkedChildren="启用" @change="typeChange($event, data)">
             </a-switch>
           </template>
           <template v-if="data.column.dataIndex === 'attinfos'">
-            <a-image v-if="data.record.parentid == 0 && data.record.attinfos[0]" :src="data.record.attinfos[0].url" style="width: 100px;"></a-image>
+            <a-image v-if="data.record.parentid == 0 && data.record.attinfos[0]" :src="data.record.attinfos[0].url"
+              style="width: 100px;"></a-image>
           </template>
           <template v-else-if="data.column.dataIndex == 'operation'">
-            <Edit @onSuccess="$refs.table.listData()" :data="data.record" @back="$refs.table.listData()" v-if="utils.hasPermission('setClass')" :disabled=" data.record.isenable"></Edit>
-            <Add @onSuccess="$refs.table.listData()" :data="data.record" v-if="data.record.level != 4 && utils.hasPermission('setClass')" :disabled="data.record.isenable"></Add>
-            <a-button :disabled="data.record.isenable" v-if="utils.hasPermission('setClass')" size="samll" type="link" @click="delClass(data.record)">删 除</a-button>
+            <Edit @onSuccess="$refs.table.listData()" :data="data.record" @back="$refs.table.listData()"
+              v-if="utils.hasPermission('setClass')" :disabled="data.record.isenable"></Edit>
+            <Add @onSuccess="$refs.table.listData()" :data="data.record"
+              v-if="data.record.level != 4 && utils.hasPermission('setClass')" :disabled="data.record.isenable"></Add>
+            <a-button :disabled="data.record.isenable" v-if="utils.hasPermission('setClass')" size="samll" type="link"
+              @click="delClass(data.record)">删 除</a-button>
           </template>
         </template>
       </normalTable>
@@ -45,32 +36,34 @@
 <script setup>
 import { EditOutlined } from '@ant-design/icons-vue';
 import normalTable from '@/template/MARnormalTable/index.vue'
-import {ref, defineProps, defineEmits,watch, nextTick} from 'vue'
+import { ref, defineProps, defineEmits, watch, nextTick, defineExpose } from 'vue'
 import Api from '@/api/api'
 import utils from '@/utils/utils'
 import { message, Modal } from 'ant-design-vue';
 import Add from './add.vue'
 import Edit from './edit.vue'
 let modeVisible = ref(false)
-const emit = defineEmits(['onSuccess','back'])
+const props = defineProps(['hideButton'])
+const emit = defineEmits(['onSuccess', 'back'])
+
 
 let param = ref({
   "id": "20240418112002",
   "content": {
     "parentid": 0,
-    "pageSize":20,
-    "pageNumber":1,
+    "pageSize": 20,
+    "pageNumber": 1,
     "where": {
-        "isenable": ''
+      "isenable": ''
     }
   }
 })
 let table = ref()
-watch(() => modeVisible.value,(val) => {
+watch(() => modeVisible.value, (val) => {
   if (!val) emit('back')
 })
 
-const typeChange = async (e,data) => {
+const typeChange = async (e, data) => {
   let arr = []
   function isChild(nodes) {
     for (let index = 0; index < nodes.length; index++) {
@@ -78,17 +71,17 @@ const typeChange = async (e,data) => {
       if (nodes[index].children && nodes[index].children.length) isChild(nodes[index].children)
     }
   }
-  if(data.record.children) isChild(data.record.children)
+  if (data.record.children) isChild(data.record.children)
   arr.push(data.record.sa_fadclassid)
   let res = await Api.requested({
     "id": "20240418112102",
     "content": {
       "sa_fadclassids": arr,
-      "isenable":e
+      "isenable": e
     }
   })
-  utils.message(res,'操作成功',() => {
-    data.record = Object.assign({},data.record,res.data)
+  utils.message(res, '操作成功', () => {
+    data.record = Object.assign({}, data.record, res.data)
   })
 }
 
@@ -111,26 +104,33 @@ const listData = (res) => {
 //删除板块
 const delClass = (data) => {
   Modal.confirm({
-    title:'确定删除当前分类吗?',
-    okText:'确认',
+    title: '确定删除当前分类吗?',
+    okText: '确认',
     async onOk() {
       let res = await Api.requested({
         "id": "20240418111902",
         "content": {
           "sa_fadclassids": [
-              data.sa_fadclassid
+            data.sa_fadclassid
           ]
         }
       })
-      utils.message(res,'操作成功',() => {
+      utils.message(res, '操作成功', () => {
         table.value.listData()
       })
     },
-    onCancel() {},
+    onCancel() { },
   })
 }
-</script>
 
-<style scoped>
 
-</style>
+let openDrawer = () => {
+  modeVisible.value = true
+}
+
+defineExpose({
+  openDrawer
+})
+</script>
+
+<style scoped></style>