From 2b86029e690b5ca7a31cdb65fcb282c1a9a5d921 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=89=E6=9D=A5=E6=8A=80=E6=9C=AF?= <1490493387@qq.com>
Date: Tue, 28 Dec 2021 23:19:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(brand):=20=E6=B7=BB=E5=8A=A0=E5=93=81?=
 =?UTF-8?q?=E7=89=8C=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/pms/brand.ts              |  78 ++++++++
 src/views/pms/brand/index.vue     | 289 ++++++++++++++++++++++++++++++
 src/views/sms/advert/index.vue    |   7 +-
 src/views/system/client/index.vue |  44 ++---
 4 files changed, 393 insertions(+), 25 deletions(-)
 create mode 100644 src/api/pms/brand.ts
 create mode 100644 src/views/pms/brand/index.vue

diff --git a/src/api/pms/brand.ts b/src/api/pms/brand.ts
new file mode 100644
index 00000000..f82b28c7
--- /dev/null
+++ b/src/api/pms/brand.ts
@@ -0,0 +1,78 @@
+import request from '@/utils/request'
+
+/**
+ * 获取品牌分页列表
+ *
+ * @param queryParams
+ */
+export function listBrandsWithPage(queryParams: object) {
+    return request({
+        url: '/mall-pms/api/v1/brands/page',
+        method: 'get',
+        params: queryParams
+    })
+}
+
+/**
+ * 获取品牌列表
+ *
+ * @param queryParams
+ */
+export function listBrands(queryParams: object) {
+    return request({
+        url: '/mall-pms/api/v1/brands',
+        method: 'get',
+        params: queryParams
+    })
+}
+
+/**
+ * 获取品牌详情
+ *
+ * @param id
+ */
+export function getBrandDetail(id: number) {
+    return request({
+        url: '/mall-pms/api/v1/brands/' + id,
+        method: 'get'
+    })
+}
+
+/**
+ * 添加品牌
+ *
+ * @param data
+ */
+export function addBrand(data: object) {
+    return request({
+        url: '/mall-pms/api/v1/brands',
+        method: 'post',
+        data: data
+    })
+}
+
+/**
+ * 修改品牌
+ *
+ * @param id
+ * @param data
+ */
+export function updateBrand(id:number, data:object) {
+    return request({
+        url: '/mall-pms/api/v1/brands/' + id,
+        method: 'put',
+        data: data
+    })
+}
+
+/**
+ * 删除品牌
+ *
+ * @param ids
+ */
+export function deleteBrands(ids: string) {
+    return request({
+        url: '/mall-pms/api/v1/brands/' + ids,
+        method: 'delete'
+    })
+}
\ No newline at end of file
diff --git a/src/views/pms/brand/index.vue b/src/views/pms/brand/index.vue
new file mode 100644
index 00000000..0657cc87
--- /dev/null
+++ b/src/views/pms/brand/index.vue
@@ -0,0 +1,289 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索表单 -->
+    <el-form
+        ref="queryForm"
+        :model="queryParams"
+        :inline="true"
+        size="small"
+    >
+      <el-form-item>
+        <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
+        <el-button type="danger" :icon='Delete' click="handleDelete" :disabled="multiple">删除</el-button>
+      </el-form-item>
+
+      <el-form-item prop="name">
+        <el-input v-model="queryParams.name" placeholder="品牌名称"/>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button :icon="Refresh" @click="handleReset">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 数据表格 -->
+    <el-table
+        ref="dataTable"
+        v-loading="loading"
+        :data="pageList"
+        @selection-change="handleSelectionChange"
+        @row-click="handleRowClick"
+        border
+    >
+      <el-table-column
+          type="selection"
+          min-width="5%"
+      />
+      <el-table-column
+          prop="name"
+          label="品牌名称"
+          min-width="10"
+      />
+      <el-table-column
+          prop="logoUrl"
+          label="LOGO"
+          min-width="10"
+      >
+        <template #default="scope">
+          <el-popover
+              placement="right"
+              :width="400"
+              trigger="hover">
+            <img :src="scope.row.logoUrl" width="400" height="400"/>
+            <template #reference>
+              <img :src="scope.row.logoUrl" style="max-height: 60px;max-width: 60px"/>
+            </template>
+          </el-popover>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+          prop="sort"
+          label="排序"
+          min-width="10"
+      />
+
+      <el-table-column
+          label="操作"
+          width="150">
+        <template #default="scope">
+          <el-button
+              @click="handleUpdate(scope.row)"
+              type="primary"
+              :icon="Edit"
+              size="mini"
+              circle
+              plain
+          />
+          <el-button
+              type="danger"
+              :icon="Delete"
+              size="mini"
+              circle
+              plain
+              @click="handleDelete(scope.row)"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页工具条 -->
+    <pagination
+        v-show="total>0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="handleQuery"
+    />
+
+    <!-- 表单弹窗 -->
+    <el-dialog
+        :title="dialog.title"
+        v-model="dialog.visible"
+        top="5vh"
+        width="600px"
+    >
+      <el-form
+          ref="dataForm"
+          :model="formData"
+          :rules="rules"
+          label-width="100px"
+      >
+        <el-form-item label="品牌名称" prop="name">
+          <el-input v-model="formData.name" auto-complete="off"/>
+        </el-form-item>
+
+        <el-form-item label="LOGO" prop="logoUrl">
+          <single-upload v-model="formData.logoUrl"/>
+        </el-form-item>
+
+        <el-form-item label="排序" prop="sort">
+          <el-input v-model="formData.sort"/>
+        </el-form-item>
+
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {listBrandsWithPage, getBrandDetail, updateBrand, addBrand, deleteBrands} from '@/api/pms/brand'
+import SingleUpload from "@/components/Upload/SingleUpload.vue"
+import {onMounted, reactive, ref, toRefs, unref} from "vue";
+import {ElForm, ElMessage, ElMessageBox} from "element-plus";
+import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
+
+const dataForm = ref(ElForm)  // 属性名必须和元素的ref属性值一致
+const dataTable = ref()
+
+const state = reactive({
+  loading: true,
+  // 选中ID数组
+  ids: [],
+  // 非单个禁用
+  single: true,
+  // 非多个禁用
+  multiple: true,
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    title: undefined
+  },
+  pageList: [],
+  total: 0,
+  dialog: {
+    title: '',
+    visible: false
+  },
+  formData: {
+    id: undefined,
+    name: undefined,
+    logoUrl: undefined,
+    sort: 1
+  },
+  rules: {
+    name: [{
+      required: true, message: '请输入品牌名称', trigger: 'blur'
+    }]
+  }
+})
+
+const {loading, single, multiple, queryParams, pageList, total, dialog, formData, rules} = toRefs(state)
+
+function handleQuery() {
+  state.loading = true
+  listBrandsWithPage(state.queryParams).then(response => {
+    const {data, total} = response as any
+    state.pageList = data
+    state.total = total
+    state.loading = false
+  })
+}
+
+function resetQuery() {
+  state.queryParams = {
+    pageNum: 1,
+    pageSize: 10,
+    title: undefined
+  }
+  handleQuery()
+}
+
+function handleRowClick(row: any) {
+  dataTable.value.toggleRowSelection(row);
+}
+
+function handleSelectionChange(selection: any) {
+  state.ids = selection.map((item: any) => item.id)
+  state.single = selection.length !== 1
+  state.multiple = !selection.length
+}
+
+function handleAdd() {
+  resetForm()
+  state.dialog = {
+    title: '添加品牌',
+    visible: true
+  }
+}
+
+function handleUpdate(row: any) {
+  resetForm()
+  state.dialog = {
+    title: '修改品牌',
+    visible: true,
+  }
+  const advertId = row.id || state.ids
+  getBrandDetail(advertId).then((response) => {
+    state.formData = response.data
+  })
+}
+
+function submitForm() {
+  const form = unref(dataForm)
+  form.validate((valid: any) => {
+    if (valid) {
+      if (state.formData.id) {
+        updateBrand(state.formData.id as any, state.formData).then(response => {
+          ElMessage.success('修改成功')
+          state.dialog.visible = false
+          handleQuery()
+        })
+      } else {
+        addBrand(state.formData).then(response => {
+          ElMessage.success('新增成功')
+          state.dialog.visible = false
+          handleQuery()
+        })
+      }
+    }
+  })
+}
+
+function resetForm() {
+  state.formData = {
+    id: undefined,
+    name: undefined,
+    logoUrl: undefined,
+    sort: 1
+  }
+}
+
+function cancel() {
+  resetForm()
+  state.dialog.visible = false
+}
+
+function handleDelete(row: any) {
+  const ids = [row.id || state.ids].join(',')
+  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    deleteBrands(ids).then(() => {
+      ElMessage.success('删除成功')
+      handleQuery()
+    })
+  }).catch(() =>
+      ElMessage.info('已取消删除')
+  )
+}
+
+onMounted(() => {
+  handleQuery()
+})
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/sms/advert/index.vue b/src/views/sms/advert/index.vue
index d8c39f8d..37698bbd 100644
--- a/src/views/sms/advert/index.vue
+++ b/src/views/sms/advert/index.vue
@@ -5,7 +5,7 @@
         ref="queryForm"
         :model="queryParams"
         :inline="true"
-        size="mini"
+        size="small"
     >
       <el-form-item>
         <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
@@ -40,7 +40,7 @@
         <template #default="scope">
           <el-popover
               placement="right"
-              :width="540"
+              :width="400"
               trigger="hover">
             <img :src="scope.row.picUrl" width="400" height="400"/>
             <template #reference>
@@ -58,7 +58,7 @@
         </template>
       </el-table-column>
       <el-table-column prop="sort" label="排序" min-width="6"/>
-      <el-table-column label="操作" align="center" min-width="10" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" width="150">
         <template #default="scope">
           <el-button
               type="primary"
@@ -206,7 +206,6 @@ const state = reactive({
     picUrl: [
       {required: true, message: '请上传广告图片', trigger: 'blur'}
     ]
-
   }
 })
 
diff --git a/src/views/system/client/index.vue b/src/views/system/client/index.vue
index 31e9c841..9cc115f3 100644
--- a/src/views/system/client/index.vue
+++ b/src/views/system/client/index.vue
@@ -3,18 +3,18 @@
     <!-- 搜索表单 -->
     <el-form
         ref="queryForm"
-        :model="state.queryParams"
+        :model="queryParams"
         :inline="true"
         size="mini"
     >
       <el-form-item>
         <el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
-        <el-button type="danger" :icon='Delete' :disabled="state.multiple" @click="handleDelete">删除</el-button>
+        <el-button type="danger" :icon='Delete' :disabled="multiple" @click="handleDelete">删除</el-button>
       </el-form-item>
 
       <el-form-item prop="clientId">
         <el-input
-            v-model="state.queryParams.clientId"
+            v-model="queryParams.clientId"
             placeholder="输入客户端ID"
             clearable
             style="width: 240px"
@@ -30,8 +30,8 @@
 
     <!-- 数据表格 -->
     <el-table
-        v-loading="state.loading"
-        :data="state.pageList"
+        v-loading="loading"
+        :data="pageList"
         border
         @selection-change="handleSelectionChange"
     >
@@ -68,30 +68,30 @@
 
     <!-- 分页工具条 -->
     <pagination
-        v-show="state.total>0"
-        :total="state.total"
-        v-model:page="state.queryParams.pageNum"
-        v-model:limit="state.queryParams.pageSize"
+        v-show="total>0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
         @pagination="handleQuery"
     />
 
     <!-- 表单弹窗 -->
     <el-dialog
-        :title="state.dialog.title"
-        v-model="state.dialog.visible"
+        :title="dialog.title"
+        v-model="dialog.visible"
         width="700px"
     >
       <el-form ref="dataForm"
-               :model="state.formData"
-               :rules="state.rules"
+               :model="formData"
+               :rules="rules"
                label-width="100px"
       >
         <el-form-item label="客户端ID" prop="clientId">
-          <el-input v-model="state.formData.clientId" placeholder="请输入客户端ID"/>
+          <el-input v-model="formData.clientId" placeholder="请输入客户端ID"/>
         </el-form-item>
 
         <el-form-item label="客户端密钥" prop="clientSecret">
-          <el-input v-model="state.formData.clientSecret" placeholder="请输入客户端密钥"/>
+          <el-input v-model="formData.clientSecret" placeholder="请输入客户端密钥"/>
         </el-form-item>
       </el-form>
 
@@ -112,7 +112,7 @@
 <script setup lang="ts">
 import {listClientsWithPage, detail, update, add, del} from '@/api/system/client'
 import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
-import {onMounted, reactive, getCurrentInstance, ref, unref} from 'vue'
+import {onMounted, reactive, getCurrentInstance, ref, unref, toRefs} from 'vue'
 import {ElForm, ElMessage, ElMessageBox} from "element-plus"
 
 const dataForm = ref(ElForm)
@@ -154,8 +154,10 @@ const state = reactive({
   }
 })
 
+const {loading, ids, single, multiple, queryParams, pageList, total, dialog, formData, rules} = toRefs(state)
+
 function handleQuery() {
-  listClientsWithPage(state.queryParams).then(response => {
+  listClientsWithPage(queryParams).then(response => {
     const {data, total} = response as any
     state.pageList = data
     state.total = total
@@ -194,7 +196,7 @@ function handleUpdate(row: any) {
     visible: true,
     type: 'edit'
   }
-  const clientId = row.clientId || state.ids
+  const clientId = row.clientId || ids
   detail(clientId).then(response => {
     state.formData = response.data
   })
@@ -206,13 +208,13 @@ function submitForm() {
   form.validate((valid: any) => {
     if (valid) {
       if (state.dialog.type == 'edit') {
-        update(state.formData.clientId as any, state.formData).then(response => {
+        update(state.formData.clientId as any, formData).then(response => {
           ElMessage.success('修改成功')
           state.dialog.visible = false
           handleQuery()
         })
       } else {
-        add(state.formData).then(response => {
+        add(formData).then(response => {
           ElMessage.success('新增成功')
           state.dialog.visible = false
           handleQuery()
@@ -242,7 +244,7 @@ function cancel() {
 }
 
 function handleDelete(row: any) {
-  const clientIds = [row.clientId || state.ids].join(',')
+  const clientIds = [row.clientId || ids].join(',')
   ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',