gin-vue-admin/web/src/view/news/column/classroom.vue

<template>
<!-- 知识库 -->
  <div>
    <div class="gva-table-box">
        <div class="gva-btn-list">
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog('add')">新增</el-button>
        </div>
        <el-table :data="tableData">
            <el-table-column label="栏目名称" prop="columnr_name" />
            <el-table-column label="排序" prop="sort" />
            <el-table-column label="状态" prop="state" center>
                <template #default="scope"> 
                    <div>
                        <el-switch style="display: block" v-model="scope.row.state" active-color="#13ce66" inactive-color="#ff4949" active-text="启用" inactive-text="禁用"></el-switch>
                        <!-- <el-switch :active-value="1" :inactive-value="2" v-model="scope.row.state" disabled /> -->
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="left" fixed="right" label="操作" width="200">
                <template #default="scope">
                    <el-button icon="el-icon-edit" size="small" type="text" @click="editOperate(scope.row)">修改</el-button>
                    <el-button icon="el-icon-delete" size="small" type="text" @click="deleteOperate(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 新增弹窗 -->
    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="新增顶级栏目" width="20%">
      <el-form ref="addForm" :model="addform" :rules="rules" label-width="80px">
        <el-form-item label="栏目名称" prop="user_name">
          <el-input v-model="addform.user_name" />
        </el-form-item>
        <el-form-item label="序号" prop="user_wechat">
          <el-input v-model="addform.user_wechat" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="closeDialog">取 消</el-button>
          <el-button size="small" type="primary" @click="add">确 定</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-dialog v-model="editDialogFormVisible" :before-close="closeEditDialog" title="修改顶级栏目" width="20%">
      <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="80px">
        <el-form-item label="栏目名称" prop="user_name">
          <el-input v-model="editForm.user_name" />
        </el-form-item>
        <el-form-item label="序号" prop="user_wechat">
          <el-input v-model="editForm.user_wechat" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="closeEditDialog">取 消</el-button>
          <el-button size="small" type="primary" @click="edit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索

// import {
//   noticeuserlist,
//   looknoticeusercont,
//   delnoticeuser,
//   eitenoticeuser,
//   addnoticeuser
// } from '@/api/healthy'

export default {
  name: 'Notify',
  
  data() {
    return {
      tableData:[
          {
            // 栏目id
            id:1,
            //   栏目名称
              columnr_name:'精益6S管理',
            //   排序
              sort:'1',
            //   状态
              state:false
          },
          {
              // 栏目id
            id:2,
            //   栏目名称
              columnr_name:'疫情防控',
            //   排序
              sort:'2',
            //   状态
              state:true
          },
          {
              // 栏目id
            id:3,
            //   栏目名称
              columnr_name:'新闻动态',
            //   排序
              sort:'3',
            //   状态
              state:true
          },
          {
              // 栏目id
            id:4,
            //   栏目名称
              columnr_name:'检查通报',
            //   排序
              sort:'4',
            //   状态
              state:true
          },
          {
              // 栏目id
            id:5,
            //   栏目名称
              columnr_name:'通知公告',
            //   排序
              sort:'5',
            //   状态
              state:true
          },
          {
              // 栏目id
            id:6,
            //   栏目名称
              columnr_name:'会议纪要',
            //   排序
              sort:'6',
            //   状态
              state:false
          },
      ],
      editDialogFormVisible:false,
      deleteVisible: false,
      dialogFormVisible: false,
      dialogTitle: '新增通知人',
      apis: [],
      addform: {
        user_name:'',
        user_wechat:''
      },
      editForm: {
        user_name:'',
        user_wechat:''
      },
      type: '',
      rules: {
        user_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        user_wechat: [{ required: true, message: '请输入微信UID', trigger: 'blur' }],
      },
      editRules: {
        user_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        user_wechat: [{ required: true, message: '请输入微信UID', trigger: 'blur' }],
      }
    }
  },
  created() {
    this.getNoticeuserList()
  },
  methods: {
    //   删除操作
    async deleteOperate(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await delnoticeuser({ id: row.id })
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            
            this.getNoticeuserList()
          }
        })
    },
     //   修改操作
    edit(){
        this.$refs.editForm.validate(async valid => {
        if (valid) {
          const res = await eitenoticeuser(this.editForm)
                if (res.code === 0) {
                  this.$message({
                    type: 'success',
                    message: '添加成功',
                    showClose: true
                  })
                }
                this.getNoticeuserList()
                this.closeEditDialog()
        }
      })
    },
    //   新增操作
    add(){
        this.$refs.addForm.validate(async valid => {
        if (valid) {
          const res = await addnoticeuser(this.addform)
                if (res.code === 0) {
                  this.$message({
                    type: 'success',
                    message: '添加成功',
                    showClose: true
                  })
                }
                this.getNoticeuserList()
                this.closeDialog()
        }
      })
    },
    // 新增/编辑
    openDialog(type) {
      switch (type) {
        case 'add':
          this.dialogTitle = '新增通知人'
          break
        case 'edit':
          this.dialogTitle = '编辑通知人'
          break
        default:
          break
      }
      this.type = type
      this.dialogFormVisible = true
    },
    
    // 获取通知人列表
    async getNoticeuserList(){
      const res=await noticeuserlist()
      if(res.code==0){
        this.tableData=res.data
      }
    },
    // 点击修改事件
    async editOperate(row) {
      const res = await looknoticeusercont({ id: row.id })
      this.editForm = res.data
      this.editDialogFormVisible=true
    },
   
    onReset() {
      this.searchInfo = {}
    },
    
    // 新增form清空
    initForm() {
      this.$refs.addForm.resetFields()
      this.addform = {
        user_name:'',
        user_wechat:''
      }
    },
    // 修改form清空
    editInitForm() {
      this.$refs.editForm.resetFields()
      this.editForm = {
        user_name:'',
        user_wechat:''
      }
    },
    // 关闭添加弹框事件
    closeDialog() {
      this.initForm()
      this.dialogFormVisible = false
    },
    // 关闭修改弹框事件
    closeEditDialog() {
      this.editInitForm()
      this.editDialogFormVisible = false
    },
    
  }
}
</script>

<style scoped lang="scss">
.button-box {
  padding: 10px 20px;
  .el-button {
    float: right;
  }
}
.warning {
  color: #dc143c;
}
</style>