优选集团

src/views/menduner/system/enterprise/message/index.vue

@@ -74,6 +74,7 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true">
+      <el-table-column label="ID" align="center" prop="id" />
       <el-table-column label="企业LOGO" align="center" prop="logoUrl" fixed="left">
         <template #default="scope">
           <div class="h-70px w-80px">

src/views/menduner/system/web/PreferredGroup.vue

@@ -0,0 +1,187 @@
+<template>
+  <Dialog title="优选集团内容编辑" v-model="dialogVisible" style="width: 60%;">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+			<el-form-item label="企业ID" prop="enterpriseId">
+        <el-input v-model="formData.enterpriseId" />
+      </el-form-item>
+      <el-form-item label="企业名称" prop="title">
+        <el-input v-model="formData.title" />
+      </el-form-item>
+      <el-form-item label="企业LOGO" prop="logo">
+        <UploadImg v-model="formData.logo" height="150px" width="150px" />
+      </el-form-item>
+      <el-form-item label="轮播图" prop="carousel">
+        <UploadImgs v-model="formData.carousel" />
+      </el-form-item>
+			<el-form-item label="简介标题" prop="introduce.title">
+        <el-input v-model="formData.introduce.title" />
+      </el-form-item>
+			<el-form-item label="简介内容" prop="introduce.describe">
+        <Editor v-model:modelValue="formData.introduce.describe" />
+      </el-form-item>
+			<el-form-item label="简介小图" prop="introduce.thumbnail">
+        <UploadImgs v-model="formData.introduce.thumbnail" />
+      </el-form-item>
+			<el-form-item label="简介大图" prop="introduce.bigPicture.url">
+        <UploadImg v-model="formData.introduce.bigPicture.url" height="150px" width="300px" />
+      </el-form-item>
+			<el-form-item label="简介大图高度" prop="introduce.bigPicture.height">
+        <el-input v-model="formData.introduce.bigPicture.height" />
+      </el-form-item>
+
+      <el-form-item label="品牌介绍" prop="">
+        <el-button @click="showBrandDialog = true" type="primary">编 辑</el-button>
+      </el-form-item>
+
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+
+  <Dialog title="品牌介绍" v-model="showBrandDialog" style="width: 70%;">
+    <el-table :data="formData.brandIntroduce" :stripe="true">
+      <el-table-column label="品牌名称" align="center" prop="content">
+        <template #default="scope">
+          <el-input type="textarea" :rows="2" v-model="scope.row.content" />
+        </template>
+      </el-table-column>
+      <el-table-column label="品牌图片" align="center" prop="title" width="300">
+        <template #default="scope">
+          <UploadImg v-model="scope.row.url" height="150px" width="280px" />
+        </template>
+      </el-table-column>
+      <el-table-column label="品牌简介" align="center" prop="desc">
+        <template #default="scope">
+          <el-input type="textarea" :rows="6" v-model="scope.row.desc" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="60">
+        <template #default="scope">
+          <el-button link type="danger" @click="handleDeleteBrand(scope.$index)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <template #footer>
+      <el-button @click="handleBrandSubmit" type="primary">确 定</el-button>
+      <el-button @click="showBrandDialog = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { WebContentApi } from '@/api/menduner/system/web'
+
+/** 页面内容 表单 */
+defineOptions({ name: 'WebContentForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const editId = ref()
+const currentKey = ref('')
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+	enterpriseId: '',
+	title: '',
+  logo: '',
+	carousel: [],
+	brandIntroduce: [],
+	introduce: {
+		title: '',
+    describe: '',
+		thumbnail: [],
+		bigPicture: {
+			height: 115,
+			url: ''
+		}
+	}
+})
+
+const showBrandDialog = ref(false)
+
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const result = ref({})
+const open = async (key: string, id?: number) => {
+	currentKey.value = key
+  resetForm()
+  dialogVisible.value = true
+  formLoading.value = true
+
+  try {
+    const data = await WebContentApi.getWebContent(1)
+		result.value = data
+		
+    // 编辑
+    if (id && result.value[key] && Object.keys(result.value[key]).length > 0 && result.value[key][id]) {
+			formData.value = result.value[key][id]
+      editId.value = id
+      formData.value.enterpriseId = id
+    }
+  } finally {
+    formLoading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+// 品牌介绍
+const handleDeleteBrand = (index) => {
+  if (!formData.value.brandIntroduce[index]) return
+  delete formData.value.brandIntroduce[index]
+}
+const handleBrandSubmit = () => {
+  showBrandDialog.value = false
+}
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+	
+	if (!editId.value) {
+		result.value[currentKey.value][formData.value.enterpriseId] = formData.value
+		delete result.value[currentKey.value][formData.value.enterpriseId].enterpriseId
+	}
+
+  // 提交请求
+  formLoading.value = true
+  try {
+    await WebContentApi.updateWebContent(result.value)
+    message.success(t('common.updateSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+		enterpriseId: '',
+		title: '',
+    logo: '',
+		carousel: [],
+		brandIntroduce: [],
+		introduce: {
+			title: '',
+			describe: '',
+			thumbnail: [],
+			bigPicture: {
+				height: 0,
+				url: ''
+			}
+		}
+	}
+  editId.value = ''
+}
+</script>

src/views/menduner/system/web/index.vue

@@ -5,17 +5,19 @@
     </el-tabs>
     <div style="display: flex; justify-content: space-between;">
       <div style="display: flex; color: orange; align-items: center;">
-        <Icon :size="20" icon="ep:warning" class="mr-3px" />
-        图片规格: 
-        <span class="m-l-10px">{{ tabList[tab].size }}</span>
+        <div v-if="tab !== 9">
+          <Icon :size="20" icon="ep:warning" class="mr-3px" />
+          图片规格: 
+          <span class="m-l-10px">{{ tabList[tab].size }}</span>
+        </div>
       </div>
       <div>
         <el-button @click="getList"><Icon icon="ep:refresh" class="mr-5px" /> 刷 新</el-button>
-        <el-button type="primary" @click="handleAdd"><Icon icon="ep:plus" class="mr-5px" />新 增</el-button>
+        <el-button type="primary" @click="handleAdd"><Icon icon="ep:plus" class="mr-5px" v-hasPermi="['menduner:system:web-content:create']" />新 增</el-button>
       </div>
     </div>
-    <el-table v-loading="loading" :data="info[tabList[tab].key]" :stripe="true">
-      <!-- <el-table-column label="排序" align="center" prop="sort" /> -->
+
+    <el-table v-if="tab !== 9" v-loading="loading" :data="info[tabList[tab].key]" :stripe="true">
       <el-table-column label="标题" align="center" prop="title" />
       <el-table-column label="图片" align="center" prop="img">
         <template #default="scope">
@@ -24,7 +26,6 @@
       </el-table-column>
       <el-table-column label="点击跳转链接" align="center" prop="link">
         <template #default="scope">
-          <!-- <el-link v-if="scope.row.link" :href="scope.row.link" type="primary" target="_blank">点击查看</el-link> -->
           {{ scope.row.link }}
         </template>
       </el-table-column>
@@ -35,8 +36,19 @@
       </el-table-column>
       <el-table-column label="操作" align="center" fixed="right" min-width="220">
         <template #default="scope">
-          <el-button link type="primary" @click="handleEdit(scope.row.mark)">编辑</el-button>
-          <el-button link type="danger" @click="handleDelete(scope.row.mark)">删除</el-button>
+          <el-button link type="primary" v-hasPermi="['menduner:system:web-content:update']" @click="handleEdit(scope.row.mark)">编辑</el-button>
+          <el-button link type="danger" v-hasPermi="['menduner:system:web-content:delete']" @click="handleDelete(scope.row.mark)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-table v-else v-loading="loading" :data="preferredGroup(info)" :stripe="true">
+      <el-table-column label="企业ID" align="center" prop="enterpriseId" />
+      <el-table-column label="企业名称" align="center" prop="title" />
+      <el-table-column label="操作" align="center" fixed="right" min-width="220">
+        <template #default="scope">
+          <el-button link type="primary" v-hasPermi="['menduner:system:web-content:update']" @click="handleEditPreferredGroup(scope.row.enterpriseId)">编辑</el-button>
+          <el-button link type="danger" v-hasPermi="['menduner:system:web-content:delete']" @click="handleDeletePreferredGroup(scope.row.enterpriseId)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -45,11 +57,16 @@
   <!-- 表单弹窗：添加/修改 -->
   <WebContentForm ref="formRef" @success="getList" />
 
+  <!-- 优选集团 -->
+  <PreferredGroup ref="preferredGroupRef" @success="getList" />
+
 </template>
 
 <script setup lang="ts">
 import { WebContentApi } from '@/api/menduner/system/web'
 import WebContentForm from './WebContentForm.vue'
+import PreferredGroup from './PreferredGroup.vue'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
 
 /** 页面内容 列表 */
 defineOptions({ name: 'WebContent' })
@@ -59,7 +76,7 @@ const { t } = useI18n() // 国际化
 const loading = ref(false)
 const tab = ref(0)
 let info = reactive({})
-const tabList = [
+const tabList = ref([
   { label: 'PC首页顶部广告图', value: 0, key: 'pcTop', size: '宽1429px*高80px' },
   { label: 'PC首页左侧广告图', value: 1, key: 'pcLeft', size: '宽869px*高1512px' },
   { label: 'PC首页弹窗广告图', value: 2, key: 'pcAdvertisement', size: '宽900px*高530px' },
@@ -69,8 +86,17 @@ const tabList = [
   { label: 'PC登录页背景图', value: 6, key: 'pcLoginBackground', size: '宽1920px*高940px' },
   { label: '小程序首页轮播图', value: 7, key: 'appHomeCarousel', size: '宽750px*高350px' },
   { label: '小程序首页弹窗广告图', value: 8, key: 'appAdvertisement', size: '宽331px*高442px' },
-  // { label: '小程序首页功能模块', value: 9, key: 'appHomeColumn', size: '宽72px*高72px' },
-]
+  // { label: '小程序首页功能模块', value: 10, key: 'appHomeColumn', size: '宽72px*高72px' },
+])
+
+// 只有我们自己用的admin账号显示
+const { wsCache } = useCache()
+let userInfo = wsCache.get(CACHE_KEY.USER)
+if (userInfo && userInfo.user.nickname === 'admin') {
+  const obj = tabList.value.find(e => e.value === 9)
+  if (!obj) tabList.value.push({ label: '优选集团内容', value: 9, key: 'appPreferredGroup' })
+  else tabList.value = tabList.value.filter(e => e.value !== 9)
+} 
 
 /** 查询列表 */
 const getList = async () => {
@@ -83,29 +109,57 @@ const getList = async () => {
   }
 }
 
+// 优选集团
+const preferredGroup = computed(() => (data) => {
+  const list = []
+  for (let i in data.appPreferredGroup) {
+    list.push({ title: data.appPreferredGroup[i].title, enterpriseId: i, data: data.appPreferredGroup[i] })
+  }
+  return list
+})
+
 const tabClick = (val) => {
   tab.value = val.paneName
   getList()
 }
 
 const handleAdd = () => {
-  formRef.value.open('add', tabList[tab.value].key, tabList[tab.value].label)
+  if (tab.value === 9) return preferredGroupRef.value.open(tabList.value[tab.value].key) // 优选集团
+  formRef.value.open('add', tabList.value[tab.value].key, tabList.value[tab.value].label)
 }
 
 const formRef = ref()
 const handleEdit = (mark: string) => {
-  formRef.value.open('edit', tabList[tab.value].key, tabList[tab.value].label, mark)
+  formRef.value.open('edit', tabList.value[tab.value].key, tabList.value[tab.value].label, mark)
 }
 
 /** 删除按钮操作 */
 const handleDelete = async (mark: string) => {
-  const index = info[tabList[tab.value].key].findIndex((item) => item.mark === mark)
+  const index = info[tabList.value[tab.value].key].findIndex((item) => item.mark === mark)
   if (index === -1) return message.warning('图片不存在')
   try {
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    info[tabList[tab.value].key].splice(index, 1)
+    info[tabList.value[tab.value].key].splice(index, 1)
+    await WebContentApi.updateWebContent(info)
+
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+// 优选集团
+const preferredGroupRef = ref()
+const handleDeletePreferredGroup = async (id) => {
+  if (!info[tabList.value[tab.value].key][id]) return message.warning('数据不存在')
+
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    delete info[tabList.value[tab.value].key][id]
     await WebContentApi.updateWebContent(info)
 
     message.success(t('common.delSuccess'))
@@ -113,6 +167,9 @@ const handleDelete = async (mark: string) => {
     await getList()
   } catch {}
 }
+const handleEditPreferredGroup = (id) => {
+  preferredGroupRef.value.open(tabList.value[tab.value].key, id)
+}
 
 /** 初始化 **/
 onMounted(() => {

src/views/menduner/system/web/indexData.vue

@@ -1,188 +0,0 @@
-<template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['menduner:system:web-content:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['menduner:system:web-content:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
-
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true">
-      <el-table-column label="pc顶部" align="center" prop="pcTop" />
-      <el-table-column label="pc左侧" align="center" prop="pcLeft" />
-      <el-table-column label="pc右侧" align="center" prop="pcRight" />
-      <el-table-column label="pc广告" align="center" prop="pcAdvertisement" />
-      <el-table-column label="pc首页轮播图" align="center" prop="pcHomeCarousel" />
-      <el-table-column label="pc登录轮播图" align="center" prop="pcLoginCarousel" />
-      <el-table-column label="pc登录背景" align="center" prop="pcLoginBackground" />
-      <el-table-column label="pc企业端广告" align="center" prop="pcBackendAdvertisement" />
-      <el-table-column label="手机端首页轮播图" align="center" prop="appHomeCarousel" />
-      <el-table-column label="手机端广告" align="center" prop="appAdvertisement" />
-      <el-table-column label="状态（0开启 1关闭）" align="center" prop="status" />
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180px"
-      />
-      <el-table-column label="操作" align="center">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['menduner:system:web-content:update']"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['menduner:system:web-content:delete']"
-          >
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改 -->
-  <WebContentForm ref="formRef" @success="getList" />
-</template>
-
-<script setup lang="ts">
-import { dateFormatter } from '@/utils/formatTime'
-import download from '@/utils/download'
-import { WebContentApi, WebContentVO } from '@/api/menduner/system/web'
-import WebContentForm from './WebContentForm.vue'
-
-/** 页面内容 列表 */
-defineOptions({ name: 'WebContent' })
-
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
-
-const loading = ref(true) // 列表的加载中
-const list = ref<WebContentVO[]>([]) // 列表的数据
-const total = ref(0) // 列表的总页数
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  createTime: []
-})
-const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    const data = await WebContentApi.getWebContentPage(queryParams)
-    console.log(data.list, 'list');
-    
-    list.value = data.list
-    total.value = data.total
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  handleQuery()
-}
-
-/** 添加/修改操作 */
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (id: number) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await WebContentApi.deleteWebContent(id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 导出按钮操作 */
-const handleExport = async () => {
-  try {
-    // 导出的二次确认
-    await message.exportConfirm()
-    // 发起导出
-    exportLoading.value = true
-    const data = await WebContentApi.exportWebContent(queryParams)
-    download.excel(data, '页面内容.xls')
-  } catch {
-  } finally {
-    exportLoading.value = false
-  }
-}
-
-/** 初始化 **/
-onMounted(() => {
-  getList()
-})
-</script>