推广素材分类管理

src/HManagement/archives_ad/archives_adclass/index.vue

@@ -1,12 +1,109 @@
 <template>
-    <div>这里是class</div>
+    <div>
+        <list ref="list">
+            <Header slot="add">
+                <el-button slot="save" icon="el-icon-plus" type="primary" size="small" @click="openDialog('新增分类')">新建分类
+                </el-button>
+            </Header>
+
+            <template v-slot:release="scope">
+                <release :value="scope.data.column.data.isenable == '1' ? true : false"
+                    :data="scope.data.column.data" />
+            </template>
+
+            <template v-slot:edit="scope">
+                <el-button type="text" size="mini" @click="openDialog('编辑分类', scope.data.data)">编辑</el-button>
+            </template>
+
+            <template v-slot:insert="scope">
+                <el-button type="text" size="mini" @click="openDialog('新增分类', scope.data.data)">新增子类</el-button>
+            </template>
+
+            <template v-slot:del="scope">
+                <on-del :data="scope.data.data" @onSuccess="onSuccess" />
+            </template>
+        </list>
+
+        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
+
+            <el-form :model="form">
+                <el-form-item label="分类名称：" :label-width="'120px'">
+                    <el-input v-model="form.classname" size="small" autocomplete="off"></el-input>
+                </el-form-item>
+            </el-form>
+
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="dialogFormVisible = false">取 消</el-button>
+                <el-button type="warning" @click="handleRequest">确 定</el-button>
+            </div>
+
+        </el-dialog>
+    </div>
 </template>
 
 <script>
+
+import Header from '@/SManagement/archives_upload/components/Header';//业务端上传
+
+import list from './modules/list';
+import onDel from './modules/delete.vue';
+import release from './modules/release.vue';
+
+
 export default {
+    components: { list, Header, onDel, release },
+    data() {
+        return {
+            dialogFormVisible: false,
+            dialogTitle: "",
+            form: {
+                classname: "",
+                parentid: 0,
+                "sat_sharematerial_classid": 0,
+                issystem: true,
+                isenable: true
+            }
 
+        }
+    },
+    methods: {
+        onSuccess() {
+            this.$refs.list.selectList();
+        },
+        openDialog(title, data) {
+            this.dialogTitle = title;
+            this.dialogFormVisible = true;
+            if (title == '新增分类') {
+                this.form.parentid = (data) ? data.sat_sharematerial_classid : 0;
+                this.form.sat_sharematerial_classid = 0;
+                this.form.classname = '';
+
+            } else {
+                if (data) {
+                    this.form = { ...data, issystem: true };
+                };
+            }
+        },
+        handleRequest() {
+            if (this.form.classname == '') return this.$message.error('分类名称不可为空!');
+
+            this.$api.requested({
+                "classname": "webmanage.saletool.sharematerial.sharematerialClass",
+                "method": "insertOrUpdate",
+                "content": this.form
+            }).then(res => {
+                this.tool.showMessage(res);
+                this.dialogFormVisible = false;
+                res.code === 1 ? this.onSuccess() : '';
+            })
+        },
+    }
 }
 </script>
 
-<style>
+
+<style scoped>
+/deep/.header .left .el-button .el-icon-plus {
+    margin-left: -6px;
+}
 </style>

src/HManagement/archives_ad/archives_adclass/modules/delete.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-button slot="reference" size="small" type="text" @click="open">删除</el-button>
+</template>
+
+<script>
+export default {
+  props: ['data'],
+  methods: {
+    open() {
+      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => this.deleteRow())
+    },
+    deleteRow() {
+      this.$api.requested({
+        "classname": "webmanage.saletool.sharematerial.sharematerialClass",
+        "method": "delete",
+        "content": {
+          "sat_sharematerial_classid": this.data.sat_sharematerial_classid
+        }
+      }).then(res => {
+        this.tool.showMessage(res)
+        res.code === 1 ? this.$emit('onSuccess') : ''
+      })
+    },
+  }
+}
+
+</script>

src/HManagement/archives_ad/archives_adclass/modules/list.vue

@@ -0,0 +1,94 @@
+<template>
+    <div>
+        <slot name="add"></slot>
+        <div class="table-box">
+            <div class="classname">
+                <tableLayout :layout="tablecols1" @rowClick="rowClick" :data="classList1" :custom="true"
+                    height="calc(100vh - 174px)">
+                    <template v-slot:customcol="scope">
+                        <div v-if="scope.column.columnname == 'isenable'">
+                            <slot name="release" :data="scope"></slot>
+                        </div>
+                        <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
+                    </template>
+
+                    <template v-slot:opreation="scope">
+                        <slot name="edit" :data="scope"></slot>
+                        <slot name="insert" :data="scope"></slot>
+                        <slot name="del" :data="scope"></slot>
+                    </template>
+                </tableLayout>
+            </div>
+            <div style="width:16px;"></div>
+            <div class="classname">
+                <tableLayout :layout="tablecols2" :data="classList2" :custom="true" height="calc(100vh - 174px)">
+                    <template v-slot:customcol="scope">
+                        <div v-if="scope.column.columnname === 'status'">
+                            <span :style="scope.column.data.status === '审核' ? 'color:#52C41A' : ''">{{
+                                    scope.column.data.status == '审核' ? '发布' : scope.column.data.status
+                            }}</span>
+                        </div>
+                        <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
+                    </template>
+
+                    <template v-slot:opreation="scope">
+                        <slot name="edit" :data="scope"></slot>
+                        <slot name="del" :data="scope"></slot>
+                    </template>
+                </tableLayout>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            tablecols1: [],
+            tablecols2: [],
+            classList1: [],
+            classList2: [],
+        }
+    },
+    created() {
+        this.tablecols1 = this.tool.tabelCol(this.$route.name)['classname1'].tablecols;
+        this.tablecols2 = this.tool.tabelCol(this.$route.name)['classname2'].tablecols;
+        this.selectList();
+    },
+    methods: {
+        rowClick({ children }) {
+            this.classList2 = children;
+        },
+        changeData(e) {
+            console.log(e)
+        },
+        selectList() {
+            this.$api.requested({
+                "classname": "webmanage.saletool.sharematerial.sharematerialClass",
+                "method": "select",
+                "content": {
+                    "parentid": 0
+                }
+            }).then(res => {
+                console.log("分类", res)
+                this.classList1 = res.data;
+                if (res.data.length > 0) this.classList2 = res.data[0].children;
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+.table-box {
+    display: flex;
+    width: 100%;
+}
+
+.classname {
+    flex: 1;
+    background: #fff;
+    padding: 0 16px;
+}
+</style>

src/HManagement/archives_ad/archives_adclass/modules/release.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-switch v-model="value" active-color="#3874F6" inactive-color="#ff4949" @change="releaseNotice">
+  </el-switch>
+</template>
+
+<script>
+export default {
+  props: ['value', "data"],
+  data() {
+    return {}
+  },
+  methods: {
+    async releaseNotice() {
+      let params = this.data;
+      delete (params.children);
+      params.isenable = params.isenable == 1 ? 0 : 1;
+      params.issystem = true;
+
+      const res = await this.$api.requested({
+        "classname": "webmanage.saletool.sharematerial.sharematerialClass",
+        "method": "insertOrUpdate",
+        "content": { ...params }
+      })
+
+      this.tool.showMessage(res)
+      res.code === 1 ? this.$emit('onSuccess') : ''
+    }
+  }
+}
+</script>