更新接口对接

src/api/member-management.js

@@ -0,0 +1,27 @@
+import request from '@/utils/request'
+
+export function getUserList(params) {
+    return request({
+        url: 'user/list',
+        method: 'get',
+        params: params
+    })
+}
+
+
+export function getUserDelete(id) {
+    return request({
+        url: `user/delete/${id}`,
+        method: 'DELETE',
+    })
+}
+
+
+
+export function getUserUpdate(id, params) {
+    return request({
+        url: `user/update/${id}`,
+        method: 'PUT',
+        params: params,
+    })
+}

src/api/sort-management.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+export function getPlatformList() {
+    return request({
+        url: 'platform/index',
+        method: 'get'
+    })
+}
+
+
+export function getCategoryList(params) {
+    return request({
+        url: 'category/index',
+        method: 'get',
+        params: params
+    })
+}
+

src/components/ActionButton/index.vue

@@ -38,7 +38,6 @@
         <span v-if="textBtn2.length > 0">{{ textBtn2 }}</span>
       </el-button>
 
-
       <!-- 按钮3 -->
       <el-button
         v-if="openBtn3"
@@ -67,11 +66,8 @@
         <span v-if="textBtn4.length > 0">{{ textBtn4 }}</span>
       </el-button>
 
-
-
-
-            <!-- 下拉按钮 -->
-      <el-dropdown v-if="openBtn5" style="margin-left: 10px">
+      <!-- 下拉按钮 -->
+      <el-dropdown trigger="click" v-if="openBtn5" style="margin-left: 10px">
         <!-- 按钮2 -->
         <el-button
           :disabled="disabledBtn5"
@@ -87,17 +83,15 @@
             <i class="el-icon-caret-bottom" style="margin-left: 5px" />
           </span>
         </el-button>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item>黄金糕</el-dropdown-item>
-          <el-dropdown-item>狮子头</el-dropdown-item>
-          <el-dropdown-item>螺蛳粉</el-dropdown-item>
-          <el-dropdown-item disabled>双皮奶</el-dropdown-item>
-          <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
+        <el-dropdown-menu slot="dropdown" v-if="dropdownData">
+          <el-dropdown-item v-for="(item, index) in dropdownData" :key="index">
+            <span @click="onCommand(item)">
+              {{ item.name }}
+            </span></el-dropdown-item
+          >
         </el-dropdown-menu>
       </el-dropdown>
     </div>
-
- 
   </div>
 </template>
 
@@ -136,6 +130,10 @@ export default {
       type: String,
       default: "mini",
     },
+    dropdownData: {
+      type: Array,
+      default: ()=> []
+    },
     // 按钮1
     openBtn1: {
       type: Boolean,
@@ -301,8 +299,10 @@ export default {
     handleButton4() {
       this.$emit("handle-button4");
     },
-    handleButton5() {
-      this.$emit("handle-button5");
+    handleButton5() {},
+
+    onCommand(data) {
+      this.$emit("handle-button5", data);
     },
   },
 };

src/views/member-management/components/delete-dialog.vue

@@ -0,0 +1,115 @@
+<template>
+  <Dialog
+    :is-dialog-exist="openDeleteDialog"
+    :title="dialogTitle"
+    :dialog-style="dialogStyle"
+    @close-dialog="handleClose"
+  >
+    <el-container>
+      <el-main>
+        <el-form ref="formData" :model="formData" label-width="auto">
+          <div class="formData-title">是否确认删除该用户?</div>
+          <span style="color:#666666;font-size:14px">删除后该用户信息将永久删除, 且不可复原, 请谨慎操作!</span>
+        </el-form>
+      </el-main>
+      <el-footer>
+        <el-button type="primary" @click="handleSuccess">确定</el-button>
+        <el-button type="info" plain @click="handleClose">取消</el-button>
+      </el-footer>
+    </el-container>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@/components/Dialog/index";
+/**
+ * 站长等级的编辑dialog
+ */
+export default {
+  components: { Dialog },
+  props: {
+    // 弹窗控制参数
+    openDeleteDialog: {
+      type: Boolean,
+      default: false,
+    },
+    // 选中的数据
+    selectItem: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      dialogTitle: "删除提示",
+      // dialog样式
+      dialogStyle: {
+        "--dialog-width": "440px",
+        "--dialog-height": "243px",
+        "--title-height": "51px",
+      },
+      // 提交参数
+      formData: {},
+      // 校验规则
+      rules: {},
+    };
+  },
+  watch: {
+    showDialog(val) {
+      if (val) {
+        this.initDataView();
+      }
+    },
+  },
+  methods: {
+    // 关闭弹窗
+    handleClose() {
+      this.$emit("handle-close");
+    },
+    // 提交弹窗
+    handleSuccess() {
+      this.$emit("handle-success");
+    },
+    // 初始化弹窗参数
+    initDataView() {
+      console.log("初始化弹窗参数");
+    },
+    // 提交表单
+    submitForm() {
+      this.$refs.formData.validate((vaild) => {
+        if (vaild && this.customValidate()) {
+          console.log("提交表单");
+        }
+      });
+    },
+    customValidate() {},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-container {
+  width: 100%;
+  height: 100%;
+  .el-main {
+    height: 90%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .formData-title {
+         text-align: center;
+         margin-bottom: 20px;
+         color: #333333;
+         font-size: 18px;
+    }
+  }
+  .el-footer {
+    height: 10%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>

src/views/member-management/components/memberDialog.vue

@@ -21,30 +21,39 @@
               <div class="item-box">
                 <el-form-item label="头像">
                   <img
+                    v-if="selectItem.avatarUrl"
+                    :src="selectItem.avatarUrl"
+                    class="circle-box size-35"
+                    alt="avatar"
+                    style="width: 70px; height: 70px; border-radius: 5px"
+                  />
+                  <img
+                    v-else
+                    :src="defaultAvatar"
+                    class="circle-box size-35"
+                    alt="avatar"
                     style="width: 70px; height: 70px; border-radius: 5px"
-                    src="https://img1.baidu.com/it/u=4154498888,1222423227&fm=11&fmt=auto&gp=0.jpg"
-                    alt=""
                   />
                 </el-form-item>
 
                 <el-form-item label="会员ID">
-                  <el-input disabled></el-input>
+                  <el-input disabled v-model="selectItem.id"></el-input>
                 </el-form-item>
               </div>
 
               <div class="item-box">
                 <el-form-item label="会员昵称">
-                  <el-input></el-input>
+                  <el-input v-model="selectItem.username"></el-input>
                 </el-form-item>
 
                 <el-form-item label="手机号">
-                  <el-input></el-input>
+                  <el-input v-model="selectItem.mobile"></el-input>
                 </el-form-item>
               </div>
 
               <div class="item-box">
                 <el-form-item label="账号状态">
-                  <el-select v-model="value" placeholder="请选择">
+                  <el-select v-model="selectItem.status" placeholder="请选择">
                     <el-option
                       v-for="item in options"
                       :key="item.value"
@@ -56,63 +65,92 @@
                 </el-form-item>
 
                 <el-form-item label="邀请码">
-                  <el-input></el-input>
+                  <el-input v-model="selectItem.invite_code"></el-input>
                 </el-form-item>
               </div>
 
               <div class="item-box">
                 <el-form-item label="微信号">
-                  <el-input></el-input>
+                  <el-input v-model="selectItem.wx_account"></el-input>
                 </el-form-item>
 
                 <el-form-item label="密码">
-                  <el-input></el-input>
+                  <el-input v-model="selectItem.password"></el-input>
                 </el-form-item>
               </div>
 
               <div class="item-box" style="width: 100%">
                 <el-form-item label="备注">
-                  <el-input style="width: 100%"></el-input>
+                  <el-input style="width: 100%" v-model="selectItem.remark"></el-input>
                 </el-form-item>
               </div>
-
+              <!-- 
               <div class="item-list">
                 <span class="itemSpan1">邀请码</span>
                 <span class="itemSpan2" style="color: #178cf8">YT23694</span>
-                <el-button @click="setInvitation('设置邀请码')" type="primary" size="mini" icon="el-icon-edit" plain
+                <el-button
+                  @click="setInvitation('设置邀请码')"
+                  type="primary"
+                  size="mini"
+                  icon="el-icon-edit"
+                  plain
                   >自定义邀请码</el-button
                 >
-              </div>
+              </div> -->
 
               <div class="item-list">
                 <span class="itemSpan1">支付宝账号</span>
-                <span class="itemSpan2">******</span>
-                <el-button @click="setInvitation('修改绑定的支付宝')"  type="danger" size="mini" icon="el-icon-bank-card" plain
+                <span class="itemSpan2">{{ selectItem.alipay_account || "-" }}</span>
+                <el-button
+                  @click="setInvitation('修改绑定的支付宝')"
+                  type="danger"
+                  size="mini"
+                  icon="el-icon-bank-card"
+                  plain
                   >更改绑定账号</el-button
                 >
               </div>
 
-              <div class="item-list">
+              <!-- <div class="item-list">
                 <span class="itemSpan1">会员等级</span>
                 <span class="itemSpan2" style="color: #178cf8">普通会员</span>
-                <el-button @click="setInvitation('设置等级')"  type="primary" size="mini" icon="el-icon-edit" plain
+                <el-button
+                  @click="setInvitation('设置等级')"
+                  type="primary"
+                  size="mini"
+                  icon="el-icon-edit"
+                  plain
                   >设置等级</el-button
                 >
-              </div>
+              </div> -->
 
               <div class="formTitle">钱包数据</div>
               <div class="item-list">
                 <span class="itemSpan1">余额变动</span>
-                <span class="itemSpan2" style="color: #ff4242">0.0000</span>
-                <el-button @click="setInvitation('调整余额')"  type="primary" size="mini" icon="el-icon-edit" plain
+                <span class="itemSpan2" style="color: #ff4242">{{
+                  selectItem.balance || "0.00"
+                }}</span>
+                <el-button
+                  @click="setInvitation('调整余额')"
+                  type="primary"
+                  size="mini"
+                  icon="el-icon-edit"
+                  plain
                   >调整</el-button
                 >
               </div>
 
               <div class="item-list">
                 <span class="itemSpan1">积分变动</span>
-                <span class="itemSpan2" style="color: #ff4242">0.0000</span>
-                <el-button @click="setInvitation('调整积分')"  type="primary" size="mini" icon="el-icon-edit" plain
+                <span class="itemSpan2" style="color: #ff4242">{{
+                  selectItem.integral || "0.00"
+                }}</span>
+                <el-button
+                  @click="setInvitation('调整积分')"
+                  type="primary"
+                  size="mini"
+                  icon="el-icon-edit"
+                  plain
                   >调整</el-button
                 >
               </div>
@@ -132,7 +170,7 @@
     <OtherSettingsDialog
       :showDialog="isOtherSettings"
       :dialogTitle="othoerItem.title"
-      :selectItem="othoerItem.data"
+      :selectItem="selectItem"
       @handle-close="OtherClose"
     ></OtherSettingsDialog>
   </Dialog>
@@ -174,6 +212,7 @@ export default {
       formData: {},
       // 校验规则
       rules: {},
+      defaultAvatar: "./pic/default/default_avatar.png",
 
       //
       isOtherSettings: false,
@@ -181,24 +220,12 @@ export default {
 
       options: [
         {
-          value: "选项1",
-          label: "黄金糕",
-        },
-        {
-          value: "选项2",
-          label: "双皮奶",
+          value: 1,
+          label: "正常",
         },
         {
-          value: "选项3",
-          label: "蚵仔煎",
-        },
-        {
-          value: "选项4",
-          label: "龙须面",
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭",
+          value: -1,
+          label: "不正常",
         },
       ],
       value: "",
@@ -216,21 +243,15 @@ export default {
     handleClose() {
       this.$emit("handle-close");
     },
-    // 提交弹窗
-    handleSuccess() {
-      this.$emit("handle-success");
-    },
+ 
     // 初始化弹窗参数
     initDataView() {
       console.log("初始化弹窗参数");
     },
     // 提交表单
     submitForm() {
-      this.$refs.formData.validate((valid) => {
-        if (valid && this.customValidate()) {
-          console.log("提交表单");
-        }
-      });
+        this.$emit("handle-success");
+
     },
     customValidate() {
       let rlt = true;
@@ -239,19 +260,18 @@ export default {
     },
 
     // 自定义邀请码
-    setInvitation(title){
-      
-        this.othoerItem = {
-           title: title,
-           data: []
-        }
-        this.isOtherSettings = true  
+    setInvitation(title) {
+      this.othoerItem = {
+        title: title,
+        data: [],
+      };
+      this.isOtherSettings = true;
     },
 
-    OtherClose(){
-      console.log(123)
-      this.isOtherSettings = false
-    }
+    OtherClose() {
+      console.log(123);
+      this.isOtherSettings = false;
+    },
   },
 };
 </script>

src/views/member-management/components/otherSettingsDialog/otherSettingsDialog.vue

@@ -10,14 +10,21 @@
         <el-form ref="formData" :model="formData" :rules="rules" label-width="auto">
           <div class="formData">
             <img
-              src="https://img0.baidu.com/it/u=963870570,3690182722&fm=26&fmt=auto&gp=0.jpg"
-              alt=""
+              v-if="selectItem.avatarUrl"
+              :src="selectItem.avatarUrl"
+              class="circle-box size-35"
+              alt="avatar"
             />
-            <span style="margin-bottom: 20px; color: #333333; font-size: 14px"
-              >15326713918</span
-            >
-            <el-form-item label="等级" v-if="dialogTitle === '设置等级'">
-              <el-select style="width: 360px" v-model="value" placeholder="请选择">
+            <img v-else :src="defaultAvatar" class="circle-box size-35" alt="avatar" />
+            <span style="margin-bottom: 20px; color: #333333; font-size: 14px">{{
+              selectItem.mobile
+            }}</span>
+            <!-- <el-form-item label="等级" v-if="dialogTitle === '设置等级'">
+              <el-select
+                style="width: 360px"
+                v-model="formData.status"
+                placeholder="请选择"
+              >
                 <el-option
                   v-for="item in options"
                   :key="item.value"
@@ -26,32 +33,41 @@
                 >
                 </el-option>
               </el-select>
-            </el-form-item>
+            </el-form-item> -->
 
-            <el-form-item label="支付宝提现账号" v-if="dialogTitle === '修改绑定的支付宝'">
+            <el-form-item
+              label="支付宝提现账号"
+              v-if="dialogTitle === '修改绑定的支付宝'"
+            >
               <el-input
                 style="width: 360px"
                 placeholder="请输入支付宝提现账号"
+                v-model="formData.alipay_account"
               ></el-input>
             </el-form-item>
 
-    
-            <el-form-item label="真实姓名"  v-if="dialogTitle === '修改绑定的支付宝'">
-              <el-input style="width: 360px" placeholder="请输入真实姓名"></el-input>
+            <el-form-item label="真实姓名" v-if="dialogTitle === '修改绑定的支付宝'">
+              <el-input
+                v-model="formData.realName"
+                style="width: 360px"
+                placeholder="请输入真实姓名"
+              ></el-input>
             </el-form-item>
 
-                    
-            <el-form-item label="邀请码" v-if="dialogTitle === '设置邀请码'">
-              <el-input style="width: 360px" placeholder="请输入邀请码"></el-input>
+            <el-form-item label="可提现余额" v-if="dialogTitle === '调整余额'">
+              <el-input
+                style="width: 360px"
+                v-model="formData.balance"
+                placeholder="0.00"
+              ></el-input>
             </el-form-item>
 
-
-            <el-form-item label="可提现余额"  v-if="dialogTitle === '调整余额'">
-              <el-input style="width: 360px" placeholder="0.00"></el-input>
-            </el-form-item>
-            
-            <el-form-item label="积分变动"  v-if="dialogTitle === '调整积分'">
-              <el-input style="width: 360px" placeholder="0.00"></el-input>
+            <el-form-item label="积分变动" v-if="dialogTitle === '调整积分'">
+              <el-input
+                style="width: 360px"
+                v-model="formData.integral"
+                placeholder="0.00"
+              ></el-input>
             </el-form-item>
           </div>
         </el-form>
@@ -79,7 +95,7 @@ export default {
     },
     // 选中的数据
     selectItem: {
-      type: Array,
+      type: Object,
       default: () => {},
     },
     dialogTitle: {
@@ -89,9 +105,7 @@ export default {
       },
     },
   },
-  mounted(){
-      console.log(this.selectItem)
-  },
+  mounted() {},
   data() {
     return {
       // dialog样式
@@ -105,27 +119,16 @@ export default {
       formData: {},
       // 校验规则
       rules: {},
+      defaultAvatar: "./pic/default/default_avatar.png",
 
       options: [
         {
-          value: "选项1",
-          label: "黄金糕",
-        },
-        {
-          value: "选项2",
-          label: "双皮奶",
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎",
-        },
-        {
-          value: "选项4",
-          label: "龙须面",
+          value: 1,
+          label: "正常",
         },
         {
-          value: "选项5",
-          label: "北京烤鸭",
+          value: -1,
+          label: "不正常",
         },
       ],
       value: "",
@@ -141,7 +144,6 @@ export default {
   methods: {
     // 关闭弹窗
     handleClose() {
-    console.log(123)
       this.$emit("handle-close");
     },
     // 提交弹窗
@@ -151,14 +153,30 @@ export default {
     // 初始化弹窗参数
     initDataView() {
       console.log("初始化弹窗参数");
+
+      this.formData = JSON.parse(JSON.stringify(this.selectItem));
     },
     // 提交表单
     submitForm() {
-      this.$refs.formData.validate((valid) => {
-        if (valid && this.customValidate()) {
-          console.log("提交表单");
-        }
-      });
+      if (this.dialogTitle === "修改绑定的支付宝") {
+        this.selectItem.alipay_account = this.formData.alipay_account;
+        this.handleClose();
+        return;
+      }
+
+      if (this.dialogTitle === "调整余额") {
+        this.selectItem.balance = this.formData.balance;
+        this.handleClose();
+        return;
+      }
+
+      if (this.dialogTitle === "调整积分") {
+        this.selectItem.integral = this.formData.integral;
+        this.handleClose();
+        return;
+      }
+
+      console.log(this.dialogTitle);
     },
     customValidate() {
       let rlt = true;

src/views/member-management/index.vue

@@ -29,26 +29,57 @@
       </el-form>
 
       <ActionButton
-        @handle-refresh="refreshData"
+        @handle-refresh="_fetchData(true)"
         @handle-search="isSearchVisible = !isSearchVisible"
       />
 
       <div>
-        <el-table :data="[{}]">
+        <el-table :data="tableData">
           <el-table-column type="index" label="序号" align="center"></el-table-column>
-          <el-table-column label="头像" align="center"></el-table-column>
-          <el-table-column label="会员id" align="center"></el-table-column>
-          <el-table-column label="会员昵称" align="center"></el-table-column>
-          <el-table-column label="手机号" align="center"></el-table-column>
-          <el-table-column label="会员等级" align="center"></el-table-column>
-          <el-table-column label="备注" align="center"></el-table-column>
+          <el-table-column label="头像" max-width="160" align="center">
+            <template slot-scope="scope">
+              <img
+                v-if="scope.row.avatarUrl"
+                :src="scope.row.avatarUrl"
+                class="circle-box size-35"
+                alt="avatar"
+              />
+              <img v-else :src="defaultAvatar" class="circle-box size-35" alt="avatar" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            max-width="200"
+            label="会员id"
+            prop="id"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            label="会员昵称"
+            prop="username"
+            align="center"
+            max-width="230"
+          ></el-table-column>
+          <el-table-column
+            label="手机号"
+            max-width="220"
+            prop="mobile"
+            align="center"
+          ></el-table-column>
+          <!-- <el-table-column label="会员等级" align="center">
+            <template slot-scope="scope"> 会员等级1 </template>
+          </el-table-column> -->
+          <el-table-column label="备注" prop="remark" align="center" max-width="200">
+            <template slot-scope="scope">
+              {{ scope.row.remark || "-" }}
+            </template>
+          </el-table-column>
           <el-table-column prop="address" label="操作" align="center" min-width="200px">
             <template slot-scope="scope">
               <CustomButton
                 tip-text="查看明细"
                 type="primary"
                 icon="el-icon-tickets"
-                @onClick="handleDetalis"
+                @onClick="handleDetalis(scope.$index)"
               ></CustomButton>
               <CustomButton
                 tip-text="删除"
@@ -76,28 +107,48 @@
       </div>
     </el-main>
 
-    <memberDialog :showDialog="isSearchDialog" @handle-close="handleClose"></memberDialog>
+    <memberDialog
+      :selectItem="selectItem"
+      :showDialog="isSearchDialog"
+      @handle-close="handleClose"
+      @handle-success="handleSuccess"
+    ></memberDialog>
+
+    <DeleteDialog
+      :openDeleteDialog="openDeleteDialog"
+      @handle-success="onDetele"
+      @handle-close="deteleClose"
+    ></DeleteDialog>
   </el-container>
 </template>
 
 <script>
 import ActionButton from "@/components/ActionButton/index";
 import CustomButton from "@/components/CustomButton/index";
-
 import memberDialog from "./components/memberDialog.vue";
 
+import DeleteDialog from "./components/delete-dialog.vue";
+
+// delete-dialog
+import { getUserList, getUserDelete, getUserUpdate } from "@/api/member-management";
+
 export default {
   components: {
     ActionButton,
     CustomButton,
     memberDialog,
+    DeleteDialog,
   },
   data() {
     return {
-      formData: {},
+      selectItem: {},
+
       isSearchVisible: false,
 
       isSearchDialog: false,
+      defaultAvatar: "./pic/default/default_avatar.png",
+
+      openDeleteDialog: false,
 
       // 分页数据
       totalCount: 0,
@@ -105,15 +156,48 @@ export default {
       limit: 20,
       // 返回的数据
       tableData: [],
+      i_id: null,
+      select_i: null,
     };
   },
+
+  mounted() {
+    this._fetchData();
+  },
+
   methods: {
-    refreshData() {
-      console.log("刷新");
+    _fetchData(refresh = false) {
+      getUserList({
+        page_size: this.limit,
+        page: this.currentPage,
+      }).then((res) => {
+        if (res.error_code === 0) {
+          this.tableData = res.data.data;
+
+          this.totalCount = res.data.total;
+          refresh && this.$message.success("刷新成功");
+        }
+      });
     },
 
     handleDelete(index) {
-      console.log(index, "删除");
+      this.openDeleteDialog = true;
+      this.i_id = this.tableData[index].id;
+    },
+    onDetele() {
+      getUserDelete(this.i_id)
+        .then(() => {
+          this.$message.success("删除成功");
+          this._fetchData();
+          this.openDeleteDialog = false;
+        })
+        .catch(() => {
+          this.openDeleteDialog = false;
+        });
+    },
+
+    deteleClose() {
+      this.openDeleteDialog = false;
     },
 
     // limit 改变
@@ -129,13 +213,34 @@ export default {
       this._fetchData();
     },
 
-    handleDetalis() {
+    handleDetalis(i) {
       this.isSearchDialog = true;
+      this.selectItem = this.tableData[i];
+      this.select_i = i;
     },
 
     handleClose() {
       this.isSearchDialog = false;
     },
+
+    handleSuccess() {
+      let data = this.tableData[this.select_i];
+
+      getUserUpdate( data.id,{
+        username: data.username,
+        mobile: data.mobile,
+        status: data.status,
+        password: data.password,
+        remark: data.remark,
+      })
+        .then((res) => {
+          console.log(res);
+          this.$message.success("修改成功");
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
   },
 };
 </script>

src/views/sort-management/components/check-books-dialog.vue

@@ -148,7 +148,7 @@ export default {
         '--title-height': '51px'
       },
       dialogTitle: '查看书籍',
-      dialogSubTitle: '笔趣谷',
+      dialogSubTitle: '笔趣阁',
       isSearchVisible: true,
       // 表格数据
       tableData: [

src/views/sort-management/index.vue

@@ -5,43 +5,24 @@
         :open-btn1="true"
         :text-btn1="'新增分类'"
         :open-btn5="true"
-        :text-btn5="'书源'"
+        :text-btn5="btn5Data.name"
         :type-btn5="'warning'"
         :icon-btn5="'el-icon-tickets'"
+        @handle-button5="handleButton5"
         @handle-refresh="refreshData"
         @handle-button1="openEditDialog(null)"
+        :dropdownData="dropdownData"
       />
 
       <div>
-        <el-table
-          :data="[{}]"
-          border
-          fit
-          tooltip-effect="dark"
-        >
-          <el-table-column
-            type="index"
-            label="序号"
-            align="center"
-            width="80"
-          />
-          <el-table-column
-            label="分类"
-            align="center"
-          />
-          <el-table-column
-            label="书源"
-            align="center"
-          />
-          <el-table-column
-            label="采集书籍数量"
-            align="center"
-          />
-          <el-table-column
-            prop="address"
-            label="操作"
-            align="center"
-          >
+        <el-table :data="tableData" border fit tooltip-effect="dark">
+          <el-table-column type="index" label="序号" align="center" width="80" />
+          <el-table-column label="分类" align="center" prop="category_name" />
+          <el-table-column label="书源" align="center">
+            <template slot-scope="scope">{{ btn5Data.name }}</template>
+          </el-table-column>
+          <el-table-column label="采集书籍数量" align="center" />
+          <el-table-column prop="address" label="操作" align="center">
             <template slot-scope="scope">
               <CustomButton
                 tip-text="查看明细"
@@ -85,82 +66,134 @@
       :is-dialog="isEditDialog"
       :dialog-title="editTitleDialog"
       @handle-close="isEditDialog = false"
+      :btn5Data="btn5Data"
+      :CategoryList="CategoryList"
     />
     <!--    查看书籍弹窗-->
-    <CheckBooksDialog
-      :is-dialog="isCheckDialog"
-      @handle-close="isCheckDialog = false"
-    />
+    <CheckBooksDialog :is-dialog="isCheckDialog" @handle-close="isCheckDialog = false" />
   </el-container>
 </template>
 
 <script>
-import ActionButton from '@/components/ActionButton/index'
-import CustomButton from '@/components/CustomButton/index'
-import EditDialog from './components/edit-dialog'
-import CheckBooksDialog from './components/check-books-dialog'
+import ActionButton from "@/components/ActionButton/index";
+import CustomButton from "@/components/CustomButton/index";
+import EditDialog from "./components/edit-dialog";
+import CheckBooksDialog from "./components/check-books-dialog";
+
+import { getPlatformList, getCategoryList } from "@/api/sort-management";
+
 export default {
   components: {
     ActionButton,
     CustomButton,
     EditDialog,
-    CheckBooksDialog
+    CheckBooksDialog,
   },
   data() {
     return {
       isCheckDialog: false,
       isEditDialog: false,
-      editTitleDialog: '',
+      editTitleDialog: "",
       // 分页数据
       totalCount: 0,
       currentPage: 1,
       limit: 20,
       // 返回的数据
-      tableData: []
-    }
+      tableData: [],
+      dropdownData: [],
+      CategoryList: [],
+      btn5Data: {},
+    };
+  },
+  created() {
+    this.init();
   },
   methods: {
+    init() {
+      this.onPlatformList();
+    },
+
+    onPlatformList() {
+      getPlatformList().then((res) => {
+        let obj = res.data;
+        let arr = [];
+
+        for (let i in obj) {
+          arr.push({
+            name: obj[i].name,
+            value: obj[i].value,
+            id: i,
+          });
+        }
+        this.dropdownData = arr;
+        this.btn5Data = arr[0];
+        this.onCategoryList(arr[0].value);
+      });
+    },
+
+    onCategoryList(source_platform) {
+      getCategoryList({
+        source_platform,
+      }).then((res) => {
+        this.tableData = res.data; // 分类列表
+      });
+    },
+
+    handleButton5(data) {
+      console.log(data)
+      this.btn5Data = data;
+        this.onCategoryList(data.value);
+
+      this.$forceUpdate();
+    },
+
     refreshData() {
-      console.log('刷新')
+      console.log("刷新");
     },
     // 打开编辑弹窗操作
     openEditDialog(row) {
-      this.isEditDialog = true
+      this.isEditDialog = true;
       if (row) {
-        this.editTitleDialog = '编辑分类'
+        this.editTitleDialog = "编辑分类";
       } else {
-        this.editTitleDialog = '新增分类'
+        this.editTitleDialog = "新增分类";
       }
     },
     // 打开查看书籍弹窗
     openCheckBooksDialog() {
-      this.isCheckDialog = '编辑分类'
+      this.isCheckDialog = true;
     },
 
     handleDelete(row) {
-      this.$confirm('是否确认删除该分类?删除后该分类信息将永久删除, 且不可复原, 请谨慎操作!', '删除提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.selectItem = row
-      }).catch(() => {})
+      this.$confirm(
+        "是否确认删除该分类?删除后该分类信息将永久删除, 且不可复原, 请谨慎操作!",
+        "删除提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(() => {
+          this.selectItem = row;
+        })
+        .catch(() => {});
     },
 
     // limit 改变
     handleSizeChange(val) {
-      console.log(`每页 ${val} 条`)
-      this.limit = val
-      this._fetchData()
+      console.log(`每页 ${val} 条`);
+      this.limit = val;
+      this._fetchData();
     },
     // 当前页面改变
     handleCurrentChange(val) {
-      console.log(`当前页: ${val}`)
-      this.currentPage = val
-      this._fetchData()
-    }
-  }
-}
+      console.log(`当前页: ${val}`);
+      this.currentPage = val;
+      this._fetchData();
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>