From d857c1a953d9258ae65a3e6311b517a4cede3493 Mon Sep 17 00:00:00 2001
From: wanglihui <1769794040@qq.com>
Date: Sat, 9 Sep 2023 23:21:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=E6=96=B0=E5=A2=9E=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E5=88=A0=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../configuration/components/Banner.vue       | 67 +++++++++---------
 .../configuration/components/BannerDialog.vue | 68 ++++++++++++++++---
 .../workplace/manage/components/Apply.vue     |  2 +-
 src/pages/workplace/manage/index.vue          | 45 +++++++++++-
 4 files changed, 131 insertions(+), 51 deletions(-)

diff --git a/src/pages/workplace/configuration/components/Banner.vue b/src/pages/workplace/configuration/components/Banner.vue
index 753def6..724c960 100644
--- a/src/pages/workplace/configuration/components/Banner.vue
+++ b/src/pages/workplace/configuration/components/Banner.vue
@@ -5,9 +5,6 @@
         <div class="bd-title-left"></div>
         <div class="flex items-center h-50px">
           <el-form inline>
-            <el-form-item class="mb-0 !mr-16px">
-              <el-input v-model="queryFrom.keyword" placeholder="轮播名称" clearable />
-            </el-form-item>
             <el-form-item class="mb-0 !mr-0">
               <el-button type="primary" @click="onBannerDialogValue">新增轮播</el-button>
             </el-form-item>
@@ -30,29 +27,21 @@
               <template v-else-if="item.formatter">
                 <slot :name="item.prop" :row="scope.row">{{ item.formatter(scope.row) }}</slot>
               </template>
-              <template v-else>
-                <slot :name="item.prop" :row="scope.row">{{ scope.row[item.prop] }}</slot>
+              <template v-else-if="item.prop">
+                <slot :name="item.prop" :row="scope.row">{{ scope.row[item.prop!] }}</slot>
               </template>
             </template>
           </el-table-column>
         </el-table>
       </div>
-      <div class="bd-card-footer pl-12px pr-12px mb-12px flex items-center justify-between">
-        <div></div>
-        <el-pagination
-          v-model:current-page="queryFrom.page_index"
-          v-model:page-size="queryFrom.page_size"
-          :page-sizes="[15, 20, 30, 50, 100]"
-          :background="true"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="total"
-          @size-change="onSizeChange"
-          @current-change="onCurrentChange"
-        />
-      </div>
     </div>
     <!-- 轮播 -->
-    <BannerDialog v-model:value="bannerDialogValue" />
+    <BannerDialog
+      v-model:value="bannerDialogValue"
+      :title="bannerDialogTitle"
+      :type="bannerDialogType"
+      :data="bannerDialogData"
+    />
   </bd-page>
 </template>
 
@@ -63,6 +52,7 @@ import { BU_DOU_CONFIG } from '@/config';
 
 // API接口
 import { bannerGet, bannerDelete } from '@/api/workplace/banner';
+
 /**
  * 表格
  */
@@ -105,12 +95,17 @@ const column = reactive<Column.ColumnOptions[]>([
   {
     prop: 'operation',
     label: '操作',
+    width: 150,
     align: 'center',
     render: (scope: any) => {
       return (
         <ElSpace>
-          <ElButton type="primary">编辑</ElButton>
-          <ElButton onClick={() => onDelBanner(scope.row)}>删除</ElButton>
+          <ElButton type="primary" onClick={() => onBannerEidt(scope.row)}>
+            编辑
+          </ElButton>
+          <ElButton type="danger" onClick={() => onDelBanner(scope.row)}>
+            删除
+          </ElButton>
         </ElSpace>
       );
     }
@@ -118,8 +113,6 @@ const column = reactive<Column.ColumnOptions[]>([
 ]);
 const tableData = ref<any[]>([]);
 const loadTable = ref<boolean>(false);
-// 分页
-const total = ref(0);
 
 // 查询
 const queryFrom = reactive({
@@ -135,21 +128,23 @@ const getTableList = () => {
   });
 };
 
-// 分页page-size
-const onSizeChange = (size: number) => {
-  queryFrom.page_size = size;
-  getTableList();
-};
-
-// 分页page-size
-const onCurrentChange = (current: number) => {
-  queryFrom.page_index = current;
-  getTableList();
-};
-
 // 新增轮播
 const bannerDialogValue = ref(false);
+const bannerDialogTitle = ref('新增轮播');
+const bannerDialogType = ref<'add' | 'edit'>('add');
 const onBannerDialogValue = () => {
+  bannerDialogTitle.value = `新增轮播`;
+  bannerDialogType.value = 'add';
+  bannerDialogValue.value = true;
+};
+
+// 编辑轮播
+
+const bannerDialogData = ref({});
+const onBannerEidt = (item: any) => {
+  bannerDialogTitle.value = `编辑${item.title}`;
+  bannerDialogData.value = item;
+  bannerDialogType.value = 'edit';
   bannerDialogValue.value = true;
 };
 
@@ -170,7 +165,7 @@ const onDelBanner = (item: any) => {
           getTableList();
           ElMessage({
             type: 'success',
-            message: `轮播群组成功！`
+            message: `轮播删除成功！`
           });
         })
         .catch(err => {
diff --git a/src/pages/workplace/configuration/components/BannerDialog.vue b/src/pages/workplace/configuration/components/BannerDialog.vue
index 07f90b2..7c85a9e 100644
--- a/src/pages/workplace/configuration/components/BannerDialog.vue
+++ b/src/pages/workplace/configuration/components/BannerDialog.vue
@@ -7,7 +7,7 @@
     :close-on-press-escape="false"
     :draggable="true"
     :z-index="99"
-    title="新增轮播"
+    :title="title"
     @close="onClose"
   >
     <el-form :model="formData" label-width="96px">
@@ -50,7 +50,7 @@
     <template #footer>
       <el-space>
         <el-button @click="onClose">取消</el-button>
-        <el-button type="primary" :loading="loaging" @click="onSend">保存</el-button>
+        <el-button type="primary" :loading="loaging" @click="onConfirm">保存</el-button>
       </el-space>
     </template>
   </el-dialog>
@@ -62,23 +62,28 @@ import { ElMessage } from 'element-plus';
 import { Plus } from '@element-plus/icons-vue';
 import { useUserStore } from '@/stores/modules/user';
 // API 接口
-import { bannerPost } from '@/api/workplace/banner';
+import { bannerPost, bannerPut } from '@/api/workplace/banner';
 import { feileGet } from '@/api/file';
 
 import { BU_DOU_CONFIG } from '@/config';
 
 interface IProps {
   value: boolean;
+  title: string;
+  type: 'add' | 'edit';
+  data: object;
 }
 
 const userStore = useUserStore();
 const props = withDefaults(defineProps<IProps>(), {
-  value: false
+  value: false,
+  title: '新增轮播',
+  type: 'add'
 });
 
 const content = ref('');
 const loaging = ref<boolean>(false);
-const formData = reactive({
+const formData = ref({
   cover: '',
   title: '',
   description: '',
@@ -94,7 +99,18 @@ const emits = defineEmits<{
 watch(
   () => props.value,
   (n, _o) => {
-    props.value = n;
+    if (n && props.type === 'edit') {
+      formData.value = props.data as any;
+    }
+    if (!n) {
+      formData.value = {
+        cover: '',
+        title: '',
+        description: '',
+        route: '',
+        jump_type: 0
+      };
+    }
   }
 );
 // 上传图片
@@ -116,17 +132,17 @@ const beforeAvatarUpload = async (rawFile: any) => {
   }
 };
 const handleAvatarSuccess = (response: any, _uploadFile: any) => {
-  console.log(response);
-  formData.cover = response.path;
+  formData.value.cover = response.path;
 };
 // 取消
 const onClose = () => {
   emits('update:value', false);
 };
-// 发送
-const onSend = () => {
+
+// 新增轮播
+const addBanner = () => {
   loaging.value = true;
-  bannerPost(formData)
+  bannerPost(formData.value)
     .then((res: any) => {
       loaging.value = false;
       if (res.status == 200) {
@@ -143,6 +159,36 @@ const onSend = () => {
       }
     });
 };
+
+// 编辑轮播
+const editBanner = () => {
+  loaging.value = true;
+  bannerPut(formData.value)
+    .then((res: any) => {
+      loaging.value = false;
+      if (res.status == 200) {
+        ElMessage.success('编辑成功！');
+        content.value = '';
+        onClose();
+        emits('ok', true);
+      }
+    })
+    .catch(err => {
+      loaging.value = false;
+      if (err.status == 400) {
+        ElMessage.error(err.msg);
+      }
+    });
+};
+// 发送
+const onConfirm = () => {
+  if (props.type === 'add') {
+    addBanner();
+  }
+  if (props.type === 'edit') {
+    editBanner();
+  }
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/pages/workplace/manage/components/Apply.vue b/src/pages/workplace/manage/components/Apply.vue
index 96ff63a..13d9df7 100644
--- a/src/pages/workplace/manage/components/Apply.vue
+++ b/src/pages/workplace/manage/components/Apply.vue
@@ -187,7 +187,7 @@ const editApp = () => {
     .then((res: any) => {
       loaging.value = false;
       if (res.status == 200) {
-        ElMessage.success('新增成功！');
+        ElMessage.success('编辑成功！');
         content.value = '';
         onClose();
         emits('ok', true);
diff --git a/src/pages/workplace/manage/index.vue b/src/pages/workplace/manage/index.vue
index bdbaaa2..9a95052 100644
--- a/src/pages/workplace/manage/index.vue
+++ b/src/pages/workplace/manage/index.vue
@@ -10,6 +10,9 @@
             <el-form-item class="mb-0 !mr-16px">
               <el-input v-model="queryFrom.keyword" placeholder="应用名称/APP ID" clearable />
             </el-form-item>
+            <el-form-item class="mb-0 !mr-16px">
+              <el-button type="primary" @click="getTableList">查询</el-button>
+            </el-form-item>
             <el-form-item class="mb-0 !mr-0">
               <el-button type="primary" @click="onAppVersionAdd">新增应用</el-button>
             </el-form-item>
@@ -65,12 +68,12 @@ meta:
 </route>
 
 <script lang="tsx" setup>
-import { ElButton, ElSpace, ElImage } from 'element-plus';
+import { ElButton, ElMessageBox, ElMessage, ElSpace, ElImage } from 'element-plus';
 import Apply from './components/Apply.vue';
 import { BU_DOU_CONFIG } from '@/config';
 
 // API接口
-import { appGet } from '@/api/workplace/app';
+import { appGet, appDelete } from '@/api/workplace/app';
 /**
  * 新增应用
  */
@@ -139,7 +142,9 @@ const column = reactive<Column.ColumnOptions[]>([
           <ElButton type="primary" onClick={() => oApplyEidt(scope.row)}>
             编辑
           </ElButton>
-          <ElButton>删除</ElButton>
+          <ElButton type="danger" onClick={() => onDelApply(scope.row)}>
+            删除
+          </ElButton>
         </ElSpace>
       );
     }
@@ -173,6 +178,40 @@ const oApplyEidt = (item: any) => {
   applyAddValue.value = true;
 };
 
+// 删除应用
+const onDelApply = (item: any) => {
+  ElMessageBox.confirm(`确定要对该应用吗?`, `操作提示`, {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    closeOnClickModal: false,
+    type: 'warning'
+  })
+    .then(() => {
+      const fromLiftban = {
+        banner_no: item.banner_no
+      };
+      appDelete(fromLiftban)
+        .then((_res: any) => {
+          getTableList();
+          ElMessage({
+            type: 'success',
+            message: `应用删除成功！`
+          });
+        })
+        .catch(err => {
+          if (err.status == 400) {
+            ElMessage.error(err.msg);
+          }
+        });
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消成功！'
+      });
+    });
+};
+
 // 分页page-size
 const onSizeChange = (size: number) => {
   queryFrom.page_size = size;