yos_web/src/WebsiteManagement/consultManage/modules/classManage.vue

<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_notice === scope.column.data.sat_notice_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 === 'isused'">
              <el-switch
                  v-model="scope.column.data.isused"
                  :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_notice === scope.data.sat_notice_classid" size="mini" type="text" class="table-button"  @click="saveDate(scope.data)">保 存</el-button>
            <el-button v-if="sat_notice !== scope.data.sat_notice_classid" size="mini" type="text" class="table-button"  @click="updateDate(scope.data)" :disabled="scope.data.isused == 1">编 辑</el-button>
            <el-button v-if="sat_notice !== scope.data.sat_notice_classid" size="mini" type="text" class="table-button"  @click="delDate(scope.data)" :disabled="scope.data.isused == 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'
import {Message} from "element-ui";
export default {
  name: "classManage",
  components:{tableNewLayout},
  data(){
    return {
      drawer:false,
      classData:[],
      tablecols:[],
      list:[],
      sat_notice:0,
      total:0,
      currentPage:0,
      param:{
        "id": "20240727133503",
        "content": {
          "pageNumber": 1,
          "pageSize": 50,
          "where":{
            "condition":""
          }
        }
      }
    }
  },
  methods:{
    addBtn(){
      this.listData(this.param.content.pageNumber = 1)
    },
    addClass(){
      this.sat_notice = 0
      this.list.unshift({
        "sat_notice_classid":0,     //sat_notice_classid<=0时 为新增
        "classname": "",
        "sequence":this.list.length + 1,
        "isused":1
      })
    },
    async saveDate(row){
      const res = await this.$api.requested({
        "id": "20240727133403",
        "content": row
      })
      this.tool.showMessage(res,()=>{
        this.sat_notice = 0
        this.listData()
      })
    },
    async useChange(row){
      const res = await this.$api.requested({
        "id": "20240727133403",
        "content": row
      })
      if (res.code == 0){
        this.tool.showMessage(res,()=>{

        })
      }
      this.listData()

    },
    updateDate(row){
      this.sat_notice = row.sat_notice_classid
    },
    delDate(row){
      this.$confirm('确定删除当前分类吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await this.$api.requested({
          "id": "20240727133603",
          "content": {
            "sat_notice_classids":[row.sat_notice_classid]
          }
        })
        /*this.tool.showMessage(res,()=>{
          this.listData()
        })*/
        if (res.code == 0){
          Message({
            message: res.data[0].errmsg,
            type: 'error',
            duration:3000,
            showClose:true
          });
        }else {
          Message({
            message: '操作成功',
            type: 'success',
            duration:3000,
            showClose:true
          });
        }
        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_notice_classid,
            sequence:item.sequence
          }
        })
        const res = await this.$api.requested({
          id:20221201134901,
          content:{
            ownertable:'sat_notice_class',
            sequencesorts:sequencesorts
          }
        })
      })
      this.listData()
    }
  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).classTable.tablecols
  }
}
</script>

<style scoped>

</style>