新增资源管理

src/api/setting.js

@@ -1,4 +1,4 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 /**
  * 支付方式
@@ -6,34 +6,69 @@ import request from '@/utils/request'
  */
 export function tbShopPayTypeGet(params) {
   return request({
-        url: '/api/tbShopPayType',
+    url: "/api/tbShopPayType",
-        method: 'get',
+    method: "get",
     params
-    })
+  });
 }
 
 /**
  * 更改/增加支付方式
  * @returns
  */
-export function tbShopPayType(data, method = 'post') {
+export function tbShopPayType(data, method = "post") {
   return request({
-        url: '/api/tbShopPayType',
+    url: "/api/tbShopPayType",
     method: method,
     data
-    })
+  });
 }
 
-
 /**
  * 增删改查新增字典
  * @returns
  */
-export function dict(data, method = 'get') {
+export function dict(data, method = "get") {
   return request({
-        url: '/api/dict',
+    url: "/api/dict",
     method: method,
     data: data,
     params: data
-    })
+  });
+}
+
+/**
+ * 修改字典
+ * @returns
+ */
+export function dictPut(data) {
+  return request({
+    url: "/api/dict",
+    method: "put",
+    data: data
+  });
+}
+
+/**
+ * 新增/编辑资源
+ * @returns
+ */
+export function tbPlatformDictPostPut(data, method = "post") {
+  return request({
+    url: "/api/tbPlatformDict",
+    method: method,
+    data: data
+  });
+}
+
+/**
+ * 资源列表
+ * @returns
+ */
+export function tbPlatformDictGet(params) {
+  return request({
+    url: "/api/tbPlatformDict",
+    method: "get",
+    params
+  });
 }

src/views/system/dictionaries_manage/components/add.vue

@@ -1,33 +1,30 @@
 <template>
   <el-dialog :title="form.id ? '编辑' : '添加'" :visible.sync="dialogVisible" @close="reset">
     <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
+      <el-form-item label="类型" v-if="!form.releId">
+        <el-radio-group v-model="form.type">
+          <el-radio :label="item.value" v-for="item in typeList" :key="item.value">{{ item.label }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
       <el-form-item label="字典名称" prop="name">
         <el-input v-model="form.name" placeholder="请输入分类名称"></el-input>
       </el-form-item>
-      <el-form-item label="字典描述" prop="description">
+      <el-form-item label="字典描述" prop="value">
-        <el-input v-model="form.description" placeholder="请输入分类名称"></el-input>
+        <el-input v-model="form.value" placeholder="请输入分类名称"></el-input>
       </el-form-item>
       <el-form-item label="字典标签" prop="dictName">
         <el-input v-model="form.dictName" placeholder="请输入分类名称"></el-input>
       </el-form-item>
-      <!-- <el-form-item label="开关">
+      <el-form-item label="状态">
-        <el-switch
+        <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
-          v-model="form.isShow"
-          :active-value="1"
-          :inactive-value="0"
-        ></el-switch>
       </el-form-item>
       <el-form-item label="排序">
-        <el-input-number
+        <el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
-          v-model="form.sort"
+      </el-form-item>
-          controls-position="right"
-          :min="0"
-        ></el-input-number>
-      </el-form-item> -->
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
-      <el-button type="primary" @click="onSubmitHandle">确 定</el-button>
+      <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
     </span>
   </el-dialog>
 </template>
@@ -38,13 +35,31 @@ export default {
   data() {
     return {
       dialogVisible: false,
+      loading: false,
       form: {
         id: "",
-        pid: "",
+        releId: '',
         dictName: "",
-        description: "",
+        value: "",
-        name: ""
+        name: "",
+        type: 'common',
+        status: 1,
+        sort: 0
       },
+      typeList: [
+        {
+          value: 'common',
+          label: '通用'
+        },
+        {
+          value: 'home',
+          label: '首页'
+        },
+        {
+          value: 'hot',
+          label: '热销'
+        }
+      ],
       resetForm: "",
       rules: {
         dictName: [
@@ -54,7 +69,7 @@ export default {
             trigger: "blur"
           }
         ],
-        description: [
+        value: [
           {
             required: true,
             message: " ",
@@ -76,11 +91,12 @@ export default {
   },
   methods: {
     onSubmitHandle() {
-      console.log(this.form);
       this.$refs.form.validate(async valid => {
         if (valid) {
           try {
+            this.loading = true
             this.form.shopId = localStorage.getItem("shopId");
+            this.form.releId && (this.form.type = '')
             let res = await dict(this.form, this.form.id ? "put" : "post");
             this.$emit("success", res);
             this.close();
@@ -89,6 +105,7 @@ export default {
               message: `${this.form.id ? "编辑" : "添加"}成功`,
               type: "success"
             });
+            this.loading = false
           } catch (error) {
             console.log(error);
           }
@@ -99,7 +116,7 @@ export default {
       // console.log(obj)
       this.dialogVisible = true;
       if (obj && obj.pid) {
-        this.form.pid = obj.pid;
+        this.form.releId = obj.pid;
       }
       if (obj && obj.id) {
         this.form = { ...obj };

src/views/system/dictionaries_manage/index.vue

@@ -20,16 +20,21 @@
     </div>
     <div class="head-container">
       <el-table :data="tableData.list" v-loading="tableData.loading" row-key="id"
-        :tree-props="{ children: 'childrenList' }">
+        :tree-props="{ children: 'dictDetails' }">
-        <el-table-column type="index" width="50">
+        <!-- <el-table-column type="index" width="50"></el-table-column> -->
-        </el-table-column>
         <el-table-column label="名称" prop="name"></el-table-column>
-        <el-table-column label="描述" prop="description"></el-table-column>
+        <el-table-column label="描述" prop="value"></el-table-column>
         <el-table-column label="标签" prop="dictName"></el-table-column>
+        <el-table-column label="状态" prop="status">
+          <template v-slot="scope">
+            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
+              @change="changeHot($event, scope.row)"></el-switch>
+          </template>
+        </el-table-column>
         <el-table-column label="操作" width="300">
           <template v-slot="scope">
             <el-button type="text" size="mini" round icon="el-icon-plus"
-              @click="$refs.addRef.show({ pid: scope.row.id })" v-if="!scope.row.pid">添加下级字典</el-button>
+              @click="$refs.addRef.show({ pid: scope.row.id })" v-if="!scope.row.releId">添加下级字典</el-button>
             <el-button type="text" size="mini" round icon="el-icon-edit"
               @click="$refs.addRef.show(scope.row)">编辑</el-button>
             <el-popconfirm title="确定删除吗？" @confirm="delHandle([scope.row.id])">
@@ -50,7 +55,7 @@
 
 <script>
 import add from "./components/add";
-import { dict } from "@/api/setting";
+import { dict, dictPut } from "@/api/setting";
 export default {
   components: {
     add
@@ -71,8 +76,16 @@ export default {
     this.getTableData();
   },
   methods: {
-    // 添加子分类
+    // 切换状态
-    addChildGatgory(row) { },
+    async changeHot(e, row) {
+      try {
+        this.tableData.loading = true
+        await dictPut({ ...row })
+        this.getTableData()
+      } catch (error) {
+        console.log(error);
+      }
+    },
     // 查询table
     toQuery() {
       this.getTableData();

src/views/system/resource_manage/components/add.vue

@@ -0,0 +1,194 @@
+<template>
+  <el-dialog :title="form.id ? '编辑' : '添加'" :visible.sync="dialogVisible" @close="reset">
+    <div class="div_h">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
+        <el-form-item label="展示图">
+          <uploadImg ref="uploadImg2" @success="res => form.coverImg = res[0]" @remove="form.coverImg = ''" />
+        </el-form-item>
+        <el-form-item label="描述" prop="name">
+          <el-input v-model="form.name" placeholder="请输入描述"></el-input>
+        </el-form-item>
+        <el-form-item label="值" prop="value">
+          <el-input v-model="form.value" placeholder="请输入值"></el-input>
+        </el-form-item>
+        <el-form-item label="字体色">
+          <el-color-picker v-model="form.fontColor"></el-color-picker>
+        </el-form-item>
+        <el-form-item label="背景色">
+          <el-color-picker v-model="form.backColor"></el-color-picker>
+        </el-form-item>
+        <el-form-item label="资源类型" prop="type">
+          <el-select v-model="form.type" placeholder="请选择资源类型">
+            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="跳转类型" prop="jumpType">
+          <el-select v-model="form.jumpType" placeholder="请选择资源类型">
+            <el-option v-for="item in jumpTypeList" :key="item.value" :label="item.label"
+              :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="相对跳转地址" prop="value">
+          <el-input v-model="form.relUrl" placeholder="请输入相对跳转地址"></el-input>
+        </el-form-item>
+        <el-form-item label="绝对跳转地址" prop="value">
+          <el-input v-model="form.absUrl" placeholder="请输入绝对跳转地址"></el-input>
+        </el-form-item>
+        <el-form-item label="标签前小图标">
+          <uploadImg ref="uploadImg1" @success="res => form.shareImg = res[0]" @remove="form.shareImg = ''" />
+        </el-form-item>
+        <el-form-item label="APP端展示">
+          <el-radio-group v-model="form.isShowApp">
+            <el-radio :label="1">展示</el-radio>
+            <el-radio :label="0">不展示</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="收银端展示">
+          <el-radio-group v-model="form.isShowCash">
+            <el-radio :label="1">展示</el-radio>
+            <el-radio :label="0">不展示</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="小程序端展示">
+          <el-radio-group v-model="form.isShowMall">
+            <el-radio :label="1">展示</el-radio>
+            <el-radio :label="0">不展示</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
+        </el-form-item>
+      </el-form>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { tbPlatformDictPostPut } from "@/api/setting";
+import uploadImg from '@/components/uploadImg'
+import enumData from '../enumData.js'
+export default {
+  components: {
+    uploadImg
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      loading: false,
+      form: {
+        id: "",
+        shareImg: '',
+        name: "",
+        value: "",
+        fontColor: "",
+        backColor: '',
+        type: '',
+        jumpType: '',
+        relUrl: '',
+        absUrl: '',
+        coverImg: '',
+        isShowApp: 0,
+        isShowCash: 0,
+        isShowMall: 0,
+        sort: 0
+      },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: " ",
+            trigger: "blur"
+          }
+        ],
+        type: [
+          {
+            required: true,
+            message: " ",
+            trigger: "change"
+          }
+        ],
+        jumpType: [
+          {
+            required: true,
+            message: " ",
+            trigger: "change"
+          }
+        ]
+      },
+      jumpTypeList: enumData.jumpTypeList,
+      typeList: enumData.typeList,
+      resetForm: "",
+    };
+  },
+  mounted() {
+    this.resetForm = { ...this.form };
+  },
+  methods: {
+    // 提交
+    onSubmitHandle() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            this.loading = true
+            this.form.shopId = localStorage.getItem("shopId");
+            this.form.releId && (this.form.type = '')
+            let res = await tbPlatformDictPostPut(this.form, this.form.id ? "put" : "post");
+            this.$emit("success", res);
+            this.close();
+            this.$notify({
+              title: "成功",
+              message: `${this.form.id ? "编辑" : "添加"}成功`,
+              type: "success"
+            });
+            this.loading = false
+          } catch (error) {
+            console.log(error);
+          }
+        }
+      });
+    },
+    show(obj) {
+      console.log(obj);
+      this.dialogVisible = true;
+      if (obj && obj.id) {
+        this.form = { ...obj };
+        if (obj.shareImg) {
+          setTimeout(() => {
+            this.$refs.uploadImg1.fileList = [
+              {
+                url: obj.shareImg
+              }
+            ]
+          }, 100)
+        }
+        if (obj.coverImg) {
+          setTimeout(() => {
+            this.$refs.uploadImg2.fileList = [
+              {
+                url: obj.coverImg
+              }
+            ]
+          }, 100)
+        }
+      }
+    },
+    close() {
+      this.dialogVisible = false;
+    },
+    reset() {
+      this.form = { ...this.resetForm };
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.div_h {
+  max-height: 50vh;
+  overflow-y: auto;
+}
+</style>

src/views/system/resource_manage/enumData.js

@@ -0,0 +1,54 @@
+export default {
+  jumpTypeList: [
+    {
+      value: "scan",
+      label: "特殊跳转"
+    },
+    {
+      value: "relative",
+      label: "内部页面"
+    },
+    {
+      value: "absolute",
+      label: "外链"
+    }
+  ],
+  typeList: [
+    {
+      value: "homeDistrict",
+      label: "金刚区"
+    },
+    {
+      value: "carousel",
+      label: "轮播图"
+    },
+    {
+      value: "proTag",
+      label: "商品标签"
+    },
+    {
+      value: "shopTag",
+      label: "店铺标签"
+    },
+    {
+      value: "icon",
+      label: "小图标"
+    },
+    {
+      value: "subShop",
+      label: "预约到店顶部图"
+    },
+    {
+      value: "ownMenu",
+      label: "个人中心菜单"
+    },
+    {
+      value: "group",
+      label: "团购卷"
+    },
+    {
+      value: "custom",
+      label: "自定义"
+    }
+  ]
+};

src/views/system/resource_manage/index.vue

@@ -0,0 +1,208 @@
+<template>
+    <div class="app-container">
+        <div class="head-container">
+            <el-row :gutter="20">
+                <el-col :span="6">
+                    <el-input v-model="query.blurry" size="small" clearable placeholder="请输入名称或描述" style="width: 100%;"
+                        class="filter-item" @keyup.enter.native="getTableData" />
+                </el-col>
+                <el-col :span="6">
+                    <el-button type="primary" @click="getTableData">查询</el-button>
+                    <el-button @click="resetHandle">重置</el-button>
+                </el-col>
+            </el-row>
+        </div>
+        <div class="head-container">
+            <el-button type="primary" icon="el-icon-plus" @click="$refs.addRef.show()">
+                添加资源
+            </el-button>
+            <add ref="addRef" @success="getTableData" />
+        </div>
+        <div class="head-container">
+            <el-table :data="tableData.list" v-loading="tableData.loading">
+                <el-table-column label="描述" prop="name"></el-table-column>
+                <el-table-column label="类型" prop="type">
+                    <template v-slot="scope">
+                        {{ scope.row.type | typeFilter }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="跳转类型" prop="jumpType">
+                    <template v-slot="scope">
+                        {{ scope.row.jumpType | jumpFilter }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="展示图" prop="coverImg">
+                    <template v-slot="scope">
+                        <el-image :src="scope.row.coverImg" style="width: 40px;height: 40px;" />
+                    </template>
+                </el-table-column>
+                <el-table-column label="标签前小图标" prop="shareImg">
+                    <template v-slot="scope">
+                        <el-image :src="scope.row.shareImg" style="width: 40px;height: 40px;" />
+                    </template>
+                </el-table-column>
+                <el-table-column label="背景色" prop="backColor">
+                    <template v-slot="scope">
+                        <div class="color_wrap">
+                            <div class="dot" :style="{ backgroundColor: scope.row.backColor }"></div>
+                            <span>{{ scope.row.backColor }}</span>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="字体颜色" prop="fontColor">
+                    <template v-slot="scope">
+                        <div class="color_wrap">
+                            <div class="dot" :style="{ backgroundColor: scope.row.fontColor }"></div>
+                            <span>{{ scope.row.fontColor }}</span>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="相对跳转地址" prop="relUrl"></el-table-column>
+                <el-table-column label="绝对跳转地址" prop="absUrl"></el-table-column>
+                <el-table-column label="APP端展示" prop="isShowApp">
+                    <template v-slot="scope">
+                        <el-switch v-model="scope.row.isShowApp" :active-value="1" :inactive-value="0"
+                            @change="changeHot($event, scope.row)"></el-switch>
+                    </template>
+                </el-table-column>
+                <el-table-column label="收银端展示" prop="isShowCash">
+                    <template v-slot="scope">
+                        <el-switch v-model="scope.row.isShowCash" :active-value="1" :inactive-value="0"
+                            @change="changeHot($event, scope.row)"></el-switch>
+                    </template>
+                </el-table-column>
+                <el-table-column label="小程序端展示" prop="isShowMall">
+                    <template v-slot="scope">
+                        <el-switch v-model="scope.row.isShowMall" :active-value="1" :inactive-value="0"
+                            @change="changeHot($event, scope.row)"></el-switch>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="200">
+                    <template v-slot="scope">
+                        <el-button type="text" size="mini" round icon="el-icon-edit"
+                            @click="$refs.addRef.show(scope.row)">编辑</el-button>
+                        <el-popconfirm title="确定删除吗？" @confirm="delHandle([scope.row.id])">
+                            <el-button type="text" size="mini" round icon="el-icon-delete" slot="reference">
+                                删除
+                            </el-button>
+                        </el-popconfirm>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="head-container">
+            <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
+                @current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+        </div>
+    </div>
+</template>
+
+<script>
+import enumData from './enumData.js'
+import add from "./components/add";
+import { tbPlatformDictGet, tbPlatformDictPostPut } from "@/api/setting";
+export default {
+    components: {
+        add
+    },
+    data() {
+        return {
+            query: {
+                name: "",
+                type: ''
+            },
+            tableData: {
+                page: 0,
+                size: 10,
+                total: 0,
+                loading: false,
+                list: []
+            }
+        };
+    },
+    filters: {
+        typeFilter(t) {
+            return enumData.typeList.find(item => item.value == t).label
+        },
+        jumpFilter(t) {
+            return t ? enumData.jumpTypeList.find(item => item.value == t).label : ''
+        }
+    },
+    mounted() {
+        this.getTableData();
+    },
+    methods: {
+        // 切换状态
+        async changeHot(e, row) {
+            try {
+                this.tableData.loading = true
+                await tbPlatformDictPostPut({ ...row }, 'put')
+                this.getTableData()
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        // 查询table
+        toQuery() {
+            this.getTableData();
+        }, // 重置查询
+        resetHandle() {
+            this.tableData.page = 0;
+            this.query.blurry = "";
+            this.getTableData();
+        },
+        // 分页回调
+        paginationChange(e) {
+            this.tableData.page = e - 1;
+            this.getTableData();
+        },
+        // 删除
+        async delHandle(ids) {
+            try {
+                await tbPlatformDictPostPut(ids, "delete");
+                this.$notify({
+                    title: "成功",
+                    message: `删除成功`,
+                    type: "success"
+                });
+                this.getTableData();
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        // 获取商品列表
+        async getTableData() {
+            this.tableData.loading = true;
+            try {
+                const res = await tbPlatformDictGet(
+                    {
+                        page: this.tableData.page,
+                        size: this.tableData.size,
+                        ...this.query,
+                        sort: 'id'
+                    }
+                );
+                this.tableData.loading = false;
+                this.tableData.list = res.content;
+                this.tableData.total = res.totalElements;
+            } catch (error) {
+                console.log(error);
+            }
+        }
+    }
+};
+</script>
+
+<style scoped lang="scss">
+.color_wrap {
+    display: flex;
+    align-items: center;
+
+    .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        margin-right: 8px;
+    }
+}
+</style>