添加用户标签管理

src/api/admin/user_tag.js

+/******************
+ * 用户标签管理
+ *****************/
+
+// 导入请求公用方法
+import {
+    request
+} from '../../utils/axiosFun';
+
+export const fetchList = (query) => {
+    return request('post', '/api/mgr/userTag/list', query)
+}
+
+export const addObj = (obj) => {
+    return request('post', '/api/mgr/userTag/save', obj)
+}
+export const delObj = (id) => {
+    return request('get', '/api/mgr/userTag/delete/'+id)
+}
+

src/views/admin/userTag/index.vue

+<template>
+  <div class="template_content">
+    <!-- 搜索 -->
+    <div class="search_box">
+      <a-form layout="inline">
+        
+        <a-form-item label="标签名称">
+          <a-input v-model="searchPage.name" placeholder="请输入标签名称" allowClear></a-input>
+        </a-form-item>
+        <a-form-item>
+          <a-button icon="search" type="primary" @click="handleSubmit">查询</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+    <!-- 主体内容 -->
+    <div class="content_box">
+      <!-- 表格操作 -->
+      <div class="table_top">
+        <a-button
+          icon="plus"
+          type="primary"
+          class="btn_right_margin"
+          @click="showModal('')"
+        >添加</a-button>
+      </div>
+      <a-table
+        :columns="columns"
+        :dataSource="data"
+        :loading="loading"
+        :pagination="pagination"
+        bordered
+        size="small"
+        @change="handleTableChange"
+      >
+        <template slot="action" slot-scope="text, record">
+          <a-button
+            icon="delete"
+            type="link"
+            @click="deleteRow({record})"
+          >删除</a-button>
+        </template>
+      </a-table>
+    </div>
+    <!-- 弹窗 -->
+    <a-modal :title="modalTitle" v-model="modalVisible" :footer="null">
+      <a-form :form="modalForm" @submit="modalHandleSubmit">
+        <a-form-item label="标签名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
+          <a-input
+            v-decorator="['name', { rules: [{ required: true, message: '标签名称不能为空' }] }]"
+            placeholder="请输入标签名称"
+          />
+        </a-form-item>
+        
+        <a-form-item :wrapper-col="{ span: 19, offset: 5 }">
+          <a-button type="primary" html-type="submit">保存</a-button>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+<script>
+// 导入接口
+import { addObj, delObj, fetchList} from "@/api/admin/user_tag";
+import { disposereq } from "@/utils/util";
+let columns = [
+  {
+    title: "标签名称",
+    dataIndex: "name",
+    align: "center"
+  },
+  {
+    title: "操作",
+    key: "action",
+    scopedSlots: { customRender: "action" },
+    align: "center",
+    width: 180,
+  }
+];
+
+export default {
+  data() {
+    return {
+      loading: true,
+      searchPage: {
+        name: "",
+        pageIndex: 1,
+        pageSize: 10
+      },
+      columns: columns,
+      data: [],
+      pagination: {
+        showQuickJumper: true,
+        showSizeChanger: true
+      },
+      modalVisible: false,
+      modalTitle: '添加',
+      modalForm: this.$form.createForm(this, { name: "coordinated" }),
+      rowData: {}
+    };
+  },
+  // 创建完毕
+  created() {
+    this.getList(this.searchPage);
+  },
+  // 即将更新渲染
+  beforeUpdate() {
+  },
+  methods: {
+    // 获取字典列表
+    getList(pageData) {
+      fetchList(pageData)
+        .then(res => {
+          this.loading = false;
+          if (res.code == 200) {
+            this.data = res.data;
+            const pager = { ...this.pagination };
+            pager.current = pageData.pageIndex;
+            pager.total = res.count;
+            this.pagination = pager;
+          } else {
+            this.$message.info(res.res_msg);
+          }
+        })
+        .catch(err => {
+          disposereq(this, err);
+        });
+    },
+
+    // 表格数据变化触发事件
+    handleTableChange(pagination, filters, sorter) {
+      const searchPage = { ...this.searchPage };
+      searchPage.pageIndex = pagination.current;
+      searchPage.pageSize = pagination.pageSize;
+      this.loading = true;
+      this.getList(searchPage);
+    },
+    // 搜索事件
+    handleSubmit() {
+      const searchPage = { ...this.searchPage };
+      this.loading = true;
+      this.getList(searchPage);
+    },
+    // 显示对话框
+    showModal(row) {
+      this.modalVisible = true;
+      // 判断添加或者编辑
+      if (row == "") {
+        this.modalTitle = '添加';
+        this.modalType = "add";
+        this.$nextTick(() => {
+          this.modalForm.setFieldsValue({
+            name: ""
+          });
+        });
+      } else {
+        this.modalTitle = '编辑';
+        this.modalType = "edit";
+        this.rowData = row;
+        this.$nextTick(() => {
+          this.modalForm.setFieldsValue({
+            name: row.name
+          });
+        });
+      }
+    },
+    // 删除行数据
+    deleteRow(row) {
+      delObj([row.record.id])
+        .then(res => {
+          this.loading = false;
+          if (res.resp_code == 200) {
+            this.$message.success('删除成功');
+            const searchPage = { ...this.searchPage };
+            this.loading = true;
+            this.getList(searchPage);
+          } else {
+            this.$message.info(res.resp_msg);
+          }
+        })
+        .catch(err => {
+          disposereq(this, err);
+        });
+    },
+    // 对话框
+    modalHandleSubmit(e) {
+      e.preventDefault();
+      this.modalForm.validateFields((err, values) => {
+        if (!err && this.modalType == "add") {
+          addObj(values)
+            .then(res => {
+              if (res.resp_code == 200) {
+                this.modalVisible = false;
+                this.$message.success('保存成功');
+                const searchPage = { ...this.searchPage };
+                this.loading = true;
+                this.getList(searchPage);
+              } else {
+                this.$message.info(res.resp_msg);
+              }
+            })
+            .catch(err => {
+              this.$message.info(err);
+            });
+        } else if (!err && this.modalType == "edit") {
+          values.id = this.rowData.id
+          putObj(values)
+            .then(res => {
+              if (res.resp_code == 200) {
+                this.modalVisible = false;
+                this.$message.success('保存成功');
+                const searchPage = { ...this.searchPage };
+                this.loading = true;
+                this.getList(searchPage);
+              } else {
+                this.$message.info(res.resp_msg);
+              }
+            })
+            .catch(err => {
+              this.$message.info(err);
+            });
+        }
+      });
+    }
+  }
+};
+</script>
+<style>
+.search_box {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 14px;
+  background-color: #fff;
+}
+.template_content {
+  background-color: #f0f2f5;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.content_box {
+  width: 100%;
+  background-color: #fff;
+  margin-top: 10px;
+  padding: 14px;
+}
+.table_top {
+  padding-bottom: 14px;
+}
+.btn_margin {
+  margin: 0px 5px;
+}
+.btn_right_margin {
+  margin-right: 10px;
+}
+</style>
\ No newline at end of file