活动分类页面完成

src/views/modules/activity/classify.vue

@@ -1,24 +1,209 @@
 <template>
-    <el-card shadow="never" class="aui-card--fill">
-        <div class="mod-home">
-            <h3>活动分类</h3>
+  <el-card shadow="never" class="aui-card--fill">
+      <div class="mod-home">
+          <div class="title">活动分类管理</div>
+          <div class="query adfacjb">
+            <div class="query-left adfac">
+              <div class="text">活动分类</div>
+              <el-input v-model="queryParams.categoryName" placeholder="请输入分类名称" @keyup.enter.native="getList"></el-input>
+            </div>
+            <div class="query-right">
+              <el-button type="default" @click="handleReset">重置</el-button>
+              <el-button type="primary" @click="getList">查询</el-button>
+            </div>
+          </div>
+          <div class="add">
+            <el-button type="primary" @click="handleAdd" v-if="$hasPermission('core:activitycategory:save')">新增活动分类</el-button>
+          </div>
+          <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无活动分类" style="margin-top: 12px;">
+            <el-table-column prop="categoryName" label="分类名称"></el-table-column>
+            <el-table-column prop="categoryNo" label="分类编码"></el-table-column>
+            <el-table-column prop="enable" label="状态">
+              <template #default="scope">
+                <div>{{ scope.row.enable?'启用':'停用' }}</div>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="250">
+                <template #default="scope">
+                    <el-button link type="text" @click="handleEdit(scope.row)" v-if="$hasPermission('core:activitycategory:update')">编辑</el-button>
+                    <el-button link type="text" @click="handleOpenClose(scope.row,1)" v-if="$hasPermission('core:activitycategory:openClose')&&scope.row.enable==0">启用</el-button>
+                    <el-button link type="text" @click="handleOpenClose(scope.row,0)" v-if="$hasPermission('core:activitycategory:openClose')&&scope.row.enable==1">停用</el-button>
+                    <el-button link type="text" @click="handleDelete(scope.row)" v-if="$hasPermission('core:activitycategory:delete')">删除</el-button>
+                </template>
+            </el-table-column>
+          </el-table>
+      </div>
+      <el-dialog width="800px" :visible.sync="show" :title="title" @close="cancel">
+        <el-form ref="typeRef" :model="form" :rules="rules" label-width="100px" style="width: 70%;margin: 0 auto;">
+          <el-form-item label="分类名称" prop="categoryName">
+            <el-input v-model="form.categoryName" placeholder="请输入分类名称"></el-input>
+          </el-form-item>
+          <el-form-item label="分类编码" prop="categoryNo">
+            <el-input v-model="form.categoryNo" placeholder="请输入分类编码"></el-input>
+          </el-form-item>
+          <el-form-item label="状态" prop="enable">
+            <el-radio v-model="form.enable" :label="1">启用</el-radio>
+            <el-radio v-model="form.enable" :label="0">停用</el-radio>
+          </el-form-item>
+        </el-form>
+        <div class="demo-drawer__footer" style="display: flex;justify-content: end;margin-top: 300px;">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
+          <el-button @click="cancel" style="margin-right: 5%;">取 消</el-button>
         </div>
-    </el-card>
+      </el-dialog>
+  </el-card>
 </template>
 
 <script>
 export default {
   data () {
     return {
-
+      queryParams: {
+        page: 1,
+        limit: 10,
+        categoryName: ''
+      },
+      dataList: [],
+      loading: false,
+      show: false,
+      buttonLoading: false,
+      title: '新增活动分类',
+      form: {
+        id: '',
+        categoryName: '',
+        categoryNo: '',
+        enable: 1
+      },
+      rules: {
+        categoryName: [
+          { required: true, message: '请输入分类名称', trigger: 'blur' }
+        ],
+        categoryNo: [
+          { required: true, message: '请输入分类编码', trigger: 'blur' }
+        ],
+        enable: [
+          { required: true, message: '请选择状态', trigger: 'change' }
+        ]
+      }
     }
   },
+  mounted () {
+    this.getList()
+  },
   methods: {
-
+    handleReset () {
+      this.queryParams = {
+        page: 1,
+        limit: 10,
+        categoryName: ''
+      }
+      this.getList()
+    },
+    handleAdd () {
+      this.title = '新增活动分类'
+      this.show = true
+    },
+    handleEdit (row) {
+      this.$http.get('/core/activity/category/' + row.id).then(res => {
+        if (res.data.code !== 0) return this.$message.error(res.msg)
+        this.form = { ...this.form, ...res.data.data }
+        this.$nextTick(() => {
+          this.title = '编辑活动分类'
+          this.show = true
+          this.$refs.typeRef.clearValidate()
+        })
+      })
+    },
+    cancel () {
+      this.show = false
+      this.form = {
+        id: '',
+        categoryName: '',
+        categoryNo: '',
+        enable: 1
+      }
+      this.$refs.typeRef.resetFields()
+    },
+    getList () {
+      this.loading = true
+      this.$http.get('/core/activity/category/page', { params: this.queryParams }).then(res => {
+        if (res.data.code !== 0) return this.$message.error(res.msg)
+        this.dataList = res.data.data.list
+        this.loading = false
+      })
+    },
+    submitForm () {
+      this.$refs.typeRef.validate((valid) => {
+        if (valid) {
+          this.$http[this.form.id ? 'put' : 'post']('/core/activity/category', this.form).then(res => {
+            if (res.data.code !== 0) {
+              return this.$message.error(res.msg)
+            }
+            this.$message.success('保存成功')
+            this.cancel()
+            this.getList()
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    handleOpenClose (row, enable) {
+      let dto = JSON.parse(JSON.stringify(row))
+      dto.enable = enable
+      this.$http.put('/core/activity/category', dto).then(res => {
+        if (res.data.code !== 0) return this.$message.error(res.msg)
+        this.$message.success('操作成功')
+        this.getList()
+      })
+    },
+    handleDelete (row) {
+      this.$confirm(`是否确认删除活动分类【${row.categoryName}】?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http.delete('/core/activity/category', { 'data': [row.id] }).then(res => {
+          if (res.data.code !== 0) return this.$message.error(res.msg)
+          this.$message.success('删除成功')
+          this.getList()
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    }
   }
 }
 </script>
 
 <style scoped lang="scss">
+.title{
+  font-family: PingFang-SC, PingFang-SC;
+  font-weight: bold;
+  font-size: 16px;
+  color: #252525;
+  line-height: 22px;
+}
 
+.query{
+  margin-top: 23px;
+  &-left{
+    .text{
+      width: 80px;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 14px;
+      color: #393939;
+      line-height: 20px;
+      margin-right: 16px;
+    }
+  }
+}
+
+.add{
+  margin-top: 24px;
+}
 </style>

src/views/modules/activity/type.vue

@@ -17,7 +17,7 @@
             </div>
             <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无活动类型" style="margin-top: 12px;">
               <el-table-column prop="typeName" label="类型名称"></el-table-column>
-              <el-table-column prop="typeNo" label="分类编码"></el-table-column>
+              <el-table-column prop="typeNo" label="类型编码"></el-table-column>
               <el-table-column prop="enable" label="状态">
                 <template #default="scope">
                   <div>{{ scope.row.enable?'启用':'停用' }}</div>
@@ -38,8 +38,8 @@
             <el-form-item label="类型名称" prop="typeName">
               <el-input v-model="form.typeName" placeholder="请输入类型名称"></el-input>
             </el-form-item>
-            <el-form-item label="分类编码" prop="typeNo">
-              <el-input v-model="form.typeNo" placeholder="请输入分类编码"></el-input>
+            <el-form-item label="类型编码" prop="typeNo">
+              <el-input v-model="form.typeNo" placeholder="请输入类型编码"></el-input>
             </el-form-item>
             <el-form-item label="状态" prop="enable">
               <el-radio v-model="form.enable" :label="1">启用</el-radio>
@@ -79,7 +79,7 @@ export default {
           { required: true, message: '请输入类型名称', trigger: 'blur' }
         ],
         typeNo: [
-          { required: true, message: '请输入分类编码', trigger: 'blur' }
+          { required: true, message: '请输入类型编码', trigger: 'blur' }
         ],
         enable: [
           { required: true, message: '请选择状态', trigger: 'change' }