|
|
@@ -1,10 +1,201 @@
|
|
|
<template>
|
|
|
- <div class="app-content"></div>
|
|
|
+ <div class="app-list-content">
|
|
|
+ <cl-crud class="liu-crud-wrap" @load="onLoad">
|
|
|
+ <template #table-column-status="{scope}"
|
|
|
+ ><el-switch
|
|
|
+ v-model="scope.row.status"
|
|
|
+ active-value="1"
|
|
|
+ inactive-value="0"
|
|
|
+ @change="changeStatus(scope.row)"
|
|
|
+ ></el-switch>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 编辑 -->
|
|
|
+ <template #slot-poster="{scope}">
|
|
|
+ <el-button type="text" @click="getPosterBtnFn(scope.row)">获取海报</el-button>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 删除 -->
|
|
|
+ <template #slot-modify="{scope}">
|
|
|
+ <el-button type="text" @click="modifyBtnFn(scope.row)">修改</el-button>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 添加 -->
|
|
|
+ <template #slot-add-ad-btn="{scope}">
|
|
|
+ <el-button type="primary" size="mini" @click="addBtnFn">添加</el-button>
|
|
|
+ </template>
|
|
|
+ </cl-crud>
|
|
|
+ <el-dialog
|
|
|
+ :title="`${addOrModify == 1 ? '添加' : '修改'}分类`"
|
|
|
+ :visible.sync="addDialog"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ width="400px"
|
|
|
+ >
|
|
|
+ <div class="ad-modal-content">
|
|
|
+ <el-form
|
|
|
+ :model="adForm"
|
|
|
+ :rules="adForm"
|
|
|
+ ref="adForm"
|
|
|
+ label-width="100px"
|
|
|
+ class="demo-form"
|
|
|
+ >
|
|
|
+ <el-form-item label="分类名称" prop="categoryName">
|
|
|
+ <el-input
|
|
|
+ v-model="adForm.categoryName"
|
|
|
+ placeholder="请输入名称"
|
|
|
+ size="small"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分类图片" prop="img">
|
|
|
+ <cl-upload v-model="adForm.img"></cl-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="马上启用" prop="status">
|
|
|
+ <el-switch
|
|
|
+ v-model="adForm.status"
|
|
|
+ active-value="1"
|
|
|
+ inactive-value="0"
|
|
|
+ ></el-switch>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="small" @click="resetForm">取 消</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="confirmFn">确认</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- name: 'goods-category'
|
|
|
+ name: 'goods-category',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 修改弹窗
|
|
|
+ modifyData: {},
|
|
|
+ // 新增弹窗
|
|
|
+ addOrModify: 1,
|
|
|
+ addDialog: false,
|
|
|
+ adForm: {
|
|
|
+ categoryName: '',
|
|
|
+ img: '',
|
|
|
+ status: '1'
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // operate
|
|
|
+ addBtnFn() {
|
|
|
+ this.addDialog = true;
|
|
|
+ this.addOrModify = 1;
|
|
|
+ },
|
|
|
+ modifyBtnFn(item) {
|
|
|
+ this.modifyData = item;
|
|
|
+ this.addOrModify = 2;
|
|
|
+ this.addDialog = true;
|
|
|
+ },
|
|
|
+ changeStatus(item) {
|
|
|
+ this.$service.category.updateStatus({ id: item.id, status: item.status }).then(res => {
|
|
|
+ this.$message.success('操作成功!');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addOrModifyFn() {
|
|
|
+ let host = null;
|
|
|
+ if (this.addOrModify == 1) {
|
|
|
+ host = () => {
|
|
|
+ return this.$service.category.add(form);
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ host = () => {
|
|
|
+ return this.$service.category.update({
|
|
|
+ categoryId: this.modifyData.id,
|
|
|
+ ...this.form
|
|
|
+ });
|
|
|
+ };
|
|
|
+ }
|
|
|
+ host().then(res => {
|
|
|
+ this.$message.success('操作成功!');
|
|
|
+ this.resetForm();
|
|
|
+ this.app.refresh({ type: this.tabIndex });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ confirmFn() {
|
|
|
+ this.addOrModify();
|
|
|
+ },
|
|
|
+ resetForm() {
|
|
|
+ this.$refs['adForm'].resetFields();
|
|
|
+ this.addDialog = false;
|
|
|
+ },
|
|
|
+ getPosterBtnFn() {
|
|
|
+ this.$message('提示功能开发中!');
|
|
|
+ },
|
|
|
+ // cl-crud 组件ad
|
|
|
+ onLoad({ ctx, app }) {
|
|
|
+ this.app = app;
|
|
|
+ ctx.service(this.$service.category)
|
|
|
+ .set('table', {
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ prop: 'id',
|
|
|
+ label: 'id',
|
|
|
+ align: 'center',
|
|
|
+ 'min-width': 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'categoryName',
|
|
|
+ label: '分类名称',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'img',
|
|
|
+ label: '图片',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'goodsNum',
|
|
|
+ label: '商品数',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'sold',
|
|
|
+ label: '销量',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'status',
|
|
|
+ label: '启用状态',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'inTurn',
|
|
|
+ label: '排序',
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 操作列
|
|
|
+ op: {
|
|
|
+ visible: false, // 是否显示
|
|
|
+ // 同 element-ui Table-column Attributes
|
|
|
+ props: {
|
|
|
+ width: 100,
|
|
|
+ align: 'center',
|
|
|
+ fixed: 'right',
|
|
|
+ label: '操作'
|
|
|
+ },
|
|
|
+ // 布局,请移步 `layout`
|
|
|
+ layout: []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .set('layout', [
|
|
|
+ ['slot-tabs'],
|
|
|
+ ['flex1', 'refresh-btn', 'slot-add-ad-btn'],
|
|
|
+ ['data-table'],
|
|
|
+ ['flex1', 'pagination']
|
|
|
+ ])
|
|
|
+ .done();
|
|
|
+ app.refresh({ type: this.tabIndex });
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|