案例管理新增分类管理

src/WebsiteManagement/caseManage/index.vue

@@ -9,6 +9,9 @@
         :apiId="{query:20240801133603,del:''}"
         :isExport="false"
     >
+      <template #titleRight>
+        <classManage v-if="tool.checkAuth($route.name,'classManage')"></classManage>
+      </template>
       <template #custom >
         <div class="mt-10">
           <label  class="search__label">类型:</label>
@@ -37,10 +40,11 @@
 </template>
 
 <script>
+import classManage from "./modules/classManage";
 import detailInfo from "./modules/detailInfo"
 export default {
   name: "index",
-  components:{detailInfo},
+  components:{detailInfo,classManage},
   data(){
     return {
       status:""

src/WebsiteManagement/caseManage/modules/classManage.vue

@@ -0,0 +1,198 @@
+<template>
+  <div>
+    <el-button  type="primary" size="small" @click="addBtn(drawer = true)">分类管理</el-button>
+    <el-drawer
+        title="分类管理"
+        :visible.sync="drawer"
+        direction="rtl"
+        size="60%"
+        append-to-body
+        :show-close="false"
+        @close="closeDrawer">
+      <div class="drawer__panel" style="margin-bottom: 0!important;">
+        <el-button style="margin-bottom: 10px" type="primary" size="small" @click="addClass">新增分类</el-button>
+        <tableNewLayout ref="tableRef" :checkbox="false" :custom="true" :data="list" :layout="tablecols"
+                        :opwidth="200" :width="true" height="calc(100vh - 210px)" @rowSort="rowSort">
+          <template v-slot:customcol="scope">
+            <div v-if="scope.column.columnname === 'classname'">
+              <el-input v-if="sat_sharematerial === scope.column.data.sat_sharematerial_classid" size="mini" v-model="scope.column.data.classname" placeholder="输入分类名称"></el-input>
+              <p v-else>{{ scope.column.data.classname }}</p>
+            </div>
+            <div v-else-if="scope.column.columnname === 'isenable'">
+              <el-switch
+                  v-model="scope.column.data.isenable"
+                  :active-value="1"
+                  :inactive-value="0"
+                  @change="useChange(scope.column.data)">
+              </el-switch>
+            </div>
+            <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
+          </template>
+          <template v-slot:opreation="scope">
+            <el-button v-if="sat_sharematerial === scope.data.sat_sharematerial_classid" size="mini" type="text" class="table-button"  @click="saveDate(scope.data)">保 存</el-button>
+            <el-button v-if="sat_sharematerial !== scope.data.sat_sharematerial_classid" size="mini" type="text" class="table-button"  @click="updateDate(scope.data)" :disabled="scope.data.isenable == 1">编 辑</el-button>
+            <el-button v-if="sat_sharematerial !== scope.data.sat_sharematerial_classid" size="mini" type="text" class="table-button"  @click="delDate(scope.data)" :disabled="scope.data.isenable == 1">删 除</el-button>
+          </template>
+        </tableNewLayout>
+        <div  class="container normal-panel" style="text-align:right">
+          <el-pagination
+              background
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-sizes="[50, 100, 150, 200]"
+              :page-size="50"
+              layout="total,sizes, prev, pager, next, jumper"
+              :total="total">
+          </el-pagination>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import tableNewLayout from '@/components/dynamic-newTable/index2'
+export default {
+  name: "classManage",
+  components:{tableNewLayout},
+  data(){
+    return {
+      drawer:false,
+      classData:[],
+      tablecols:[],
+      list:[],
+      sat_sharematerial:0,
+      total:0,
+      currentPage:0,
+      param:{
+        "id": "20240808105003",
+        "content": {
+          "pageNumber": 1,
+          "pageSize": 50,
+          "where":{
+            "condition":""
+          }
+        }
+      }
+    }
+  },
+  methods:{
+    addBtn(){
+      this.listData(this.param.content.pageNumber = 1)
+    },
+    addClass(){
+      this.sat_sharematerial = 0
+      this.list.unshift({
+        "sat_sharematerial_classid":0,     //sat_sharematerial_classid<=0时 为新增
+        "classname": "",
+        "sequence":this.list.length + 1,
+        "isenable":true
+      })
+    },
+    async saveDate(row){
+      const res = await this.$api.requested({
+        "id": "20240808104803",
+        "content": row
+      })
+      this.tool.showMessage(res,()=>{
+        this.sat_sharematerial = 0
+        this.listData()
+      })
+    },
+    async useChange(row){
+      const res = await this.$api.requested({
+        "id": "20240808104803",
+        "content": {
+          "sat_sharematerial_classid":row.sat_sharematerial_classid,     //sat_sharematerial_classid<=0时 为新增
+          "classname":row.classname,
+          "sequence":row.sequence,
+          "isenable":row.isenable
+        }
+      })
+      if (res.code == 0){
+        this.tool.showMessage(res,()=>{
+
+        })
+      }
+      this.listData()
+
+    },
+    updateDate(row){
+      this.sat_sharematerial = row.sat_sharematerial_classid
+    },
+    delDate(row){
+      this.$confirm('确定删除当前分类吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async() => {
+        const res = await this.$api.requested({
+          "id": "20240808104903",
+          "content": {
+            "sat_sharematerial_classid":row.sat_sharematerial_classid
+          }
+        })
+        this.tool.showMessage(res,()=>{
+          this.listData()
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+    },
+    async listData(){
+      const res = await this.$api.requested(this.param)
+      this.list = res.data
+      this.total = res.total
+      this.currentPage = res.pageNumber
+      console.log(this.list,'list')
+    },
+    handleSizeChange(val) {
+      // console.log(`每页 ${val} 条`);
+      this.param.content.pageSize = val
+      this.listData()
+    },
+    handleCurrentChange(val) {
+      // console.log(`当前页: ${val}`);
+      this.param.content.pageNumber = val
+      this.listData()
+    },
+    closeDrawer(){
+      this.drawer = false
+    },
+    rowSort(data){
+      data.forEach((item,index)=>{
+        console.log(item.classname,item.index,item.sequence,index)
+        item.sequence = index
+      })
+      this.$nextTick(async()=>{
+        let sequencesorts = data.map(item=>{
+          console.log(item.sequence,item.classname)
+          return {
+            ownerid:item.sat_sharematerial_classid,
+            sequence:item.sequence
+          }
+        })
+        const res = await this.$api.requested({
+          id:20221201134901,
+          content:{
+            ownertable:'sat_sharematerial_class',
+            sequencesorts:sequencesorts
+          }
+        })
+      })
+      this.listData()
+    }
+  },
+  created() {
+    this.tablecols = this.tool.tabelCol(this.$route.name).classTable.tablecols
+  }
+}
+</script>
+
+<style scoped>
+
+</style>