添加子列表弹框demo

long

2021-07-01 20ba229f91a729995d753063566632b2c60be8f3

添加子列表弹框demo

 src/pages/demo/classList.vue

New file
@@ -0,0 +1,366 @@
<template>
  <div class="app-container">
    <!-- 返回按钮和标题 -->
    <!-- <el-page-header class="mb20" content="xx" @back="$router.go(-1)" /> -->

    <!-- 搜索区 ↓↓↓↓↓↓↓↓↓↓ -->
    <el-form v-show="showSearch" ref="searchForm" :inline="true">
      <el-form-item label="班级名称">
        <el-input
          v-model="keyWord"
          placeholder="请输入班级名称"
          clearable
          size="small"
          style="width: 240px"
          maxlength="50"
          @keyup.enter.native="reGetList"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="reGetList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetHandle">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 搜索区 ↑↑↑↑↑↑↑↑↑↑ -->

    <!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <!-- 权限判断 v-if="getAuthValueFN('xxx_add')" -->
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="showAddDialog"
        >新增</el-button>
      </el-col>
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row>
    <!-- 操作区 ↑↑↑↑↑↑↑↑↑↑ -->

    <el-table :data="list" stripe>
      <el-table-column type="index" label="序号" align="center" width="60" />
      <el-table-column label="班级名称" prop="name" align="center" min-width="120" />
      <el-table-column label="排序号" prop="ranking" align="center" min-width="120" />
      <el-table-column label="是否启用" prop="isUp" align="center" min-width="100">
        <template slot-scope="scope">
          <!-- 权限判断 v-if="getAuthValueFN('school_class_edit')" -->
          <el-switch
            v-model="scope.row.isUp"
            :active-value="1"
            :inactive-value="0"
            :disabled="!getAuthValueFN('school_class_edit')"
            @change="handleUpChange(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" align="center" min-width="160" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
        <template slot-scope="scope">
          <el-button
            v-if="getAuthValueFN('school_class_edit')"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="showEditDialog(scope.row)"
          >编辑</el-button>
          <el-button
            v-if="getAuthValueFN('school_class_bind_teacher')"
            size="mini"
            type="text"
            icon="el-icon-document"
            @click="openClassTeacherDialog(scope.row)"
          >绑定老师</el-button>
          <el-button
            v-if="getAuthValueFN('school_class_del')"
            size="mini"
            type="text warn"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增&编辑 -->
    <el-dialog v-el-drag-dialog :title="(dialogData.type=='add'?'新增':'编辑') + objectName" width="500px" :visible.sync="dialogVisible" append-to-body :before-close="hideDialog" :close-on-click-modal="false">
      <el-form ref="refDialog" :model="dialogData" label-width="110px" :rules="rules" size="small">
        <el-form-item label="名称" prop="name">
          <el-input v-model="dialogData.name" placeholder="请输入名称" maxlength="50" />
        </el-form-item>
        <el-form-item label="排序号" prop="ranking">
          <el-input v-model="dialogData.ranking" placeholder="请输入排序号" maxlength="10" />
        </el-form-item>
        <el-form-item label="是否启用" prop="isUp">
          <el-switch
            v-model="dialogData.isUp"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideDialog">取消</el-button>
        <el-button type="primary" @click="submitHandle">确定</el-button>
      </div>
    </el-dialog>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getList"
    />

    <!-- 绑定老师弹窗 -->
    <classTeacherDialog ref="refClassTeacherDialog" />

    <back-to-top :visibility-height="300" :back-position="50" transition-name="fade" />
  </div>
</template>

<script>
import BackToTop from '@/components/BackToTop'
import classTeacherDialog from './components/classTeacherDialog.vue'
export default {
  name: 'ClassList',
  components: { BackToTop, classTeacherDialog },
  data() {
    return {
      showSearch: true, // 是否显示搜索区
      keyWord: '', // 搜索区字段，可自行扩展其余字段

      objectName: '班级', // 对象名称，用于删除提示、启用提示、弹窗标题等

      // 数据列表
      list: [],

      // 弹窗数据
      dialogVisible: false,
      dialogData: {},

      // 富文本编辑器
      // rangenum: null,

      // 分页 ↓↓↓↓↓↓↓↓↓↓
      total: 0,
      pageNum: 1,
      pageSize: 20,
      // 分页 ↑↑↑↑↑↑↑↑↑↑

      // 表单校验
      rules: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'change' }
        ],
        ranking: [
          { required: true, message: '排序号不能为空', trigger: 'change' }
        ],
        isUp: [
          { required: true, message: '是否启用不能为空', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      this.getList()
    },

    // ========== 富文本相关
    // 富文本编辑器的内容赋值
    // catchData(content) {
    //   if (content === '<p><br></p>') content = ''
    //   try {
    //     const currentRange = window.getSelection().getRangeAt(0)
    //     this.rangenum = currentRange
    //   } catch (e) {
    //
    //   }
    //   this.$set(this.dialogData, 'content', content)
    //   this.$refs[this.formName].validateField('content')
    // },
    // ========== 富文本相关

    // 获取列表
    getList() {
      var { pageNum, pageSize, keyWord } = this
      this.postFN({
        url: 'admin/schoolClass/list',
        params: {
          pageNum: pageNum,
          pageSize: pageSize,
          name: keyWord
        },
        mockData: {
          code: 100,
          msg: '',
          data: {
            list: [{
              id: 'xxx',
              ranking: 1,
              isUp: 1,
              name: '5年一班',
              createTime: '2020-08-09 10:10:10'
            }],
            total: 100
          }
        }
      }, (inf) => {
        this.list = inf.list || []
        this.total = inf.total
      })
    },
    // 重新获取列表
    reGetList() {
      this.pageNum = 1
      this.getList()
    },
    // 重置
    resetHandle() {
      this.keyWord = ''
      this.reGetList()
    },
    // 删除
    handleDelete(item) {
      // 打开二次确认弹窗
      this.$confirm('是否确认删除该' + this.objectName + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确定回调
        this.postFN({
          url: 'admin/schoolClass/delete/one',
          params: {
            id: item.id
          },
          mockData: {
            code: 100,
            msg: '',
            data: {}
          }
        }, () => {
          this.getList()
          this.$messageSuc('删除成功')
        })
      }).catch(() => {})
    },
    // 修改是否启用
    handleUpChange(item) {
      const text = item.isUp === 1 ? '启用' : '冻结'
      this.$confirm('确认要' + text + '该' + this.objectName + '吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.postFN({
          url: 'admin/schoolClass/editIsUp',
          params: {
            id: item.id,
            isUp: item.isUp
          },
          mockData: {
            code: 100,
            msg: '',
            data: {}
          }
        }, () => {
          this.$messageSuc(text + '成功')
        }, (res) => {
          item.isUp = item.isUp === 1 ? 0 : 1
          this.$messageError(res.msg)
        })
      }).catch(() => {
        item.isUp = item.isUp === 1 ? 0 : 1
      })
    },

    // 打开领取记录弹窗
    openClassTeacherDialog(item) {
      this.$refs.refClassTeacherDialog.openHandle(item)
    },

    // 打开新增弹窗
    showAddDialog() {
      var dialogData = {
        type: 'add',
        isUp: 1,
        ranking: 1
        // 部分组件需要预设字段，提供给v-model，例如 el-select el-timepicker el-datepicker 上传组件 富文本等
      }
      this.dialogVisible = true
      this.$nextTick(() => {
        this.dialogData = dialogData
        this.$refs['refDialog'].resetFields()
      })
    },
    // 打开编辑弹框
    showEditDialog(item) {
      var dialogData = {
        type: 'edit',
        ...item
      }
      console.log('dialogData', dialogData)
      this.dialogVisible = true
      this.$nextTick(() => {
        this.dialogData = dialogData
        this.$refs['refDialog'].resetFields()
      })
    },
    // 关闭编辑弹窗
    hideDialog() {
      this.dialogData = {}
      this.dialogVisible = false
      // 清空富文本
      // this.rangenum = null
    },
    // 提交新增&编辑
    submitHandle() {
      this.$refs['refDialog'].validate(valid => {
        if (valid) {
          this.submitReq()
        }
      })
    },
    // 提交接口
    submitReq() {
      var { dialogData } = this
      var params = {
        name: dialogData.name,
        isUp: dialogData.isUp,
        ranking: dialogData.ranking
      }

      var isAdd = dialogData.type === 'add'
      // TODO url
      var url = isAdd ? 'admin/schoolClass/add' : 'admin/schoolClass/edit'

      !isAdd && (params.id = dialogData.id)

      this.postFN({
        url: url,
        params: params,
        mockData: {
          code: 100,
          msg: '',
          data: {}
        }
      }, () => {
        this.$messageSuc('保存成功')
        this.hideDialog()
        isAdd ? this.reGetList() : this.getList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

 src/pages/demo/components/classTeacherDialog.vue

New file
@@ -0,0 +1,338 @@
<template>
  <el-dialog v-el-drag-dialog :title="'('+name+')'+objectName+'列表'" width="60%" :visible.sync="isShow" :before-close="closeHandle" :close-on-click-modal="false">
    <!-- 搜索区 ↓↓↓↓↓↓↓↓↓↓ -->
    <el-form v-show="showSearch" ref="searchForm" :inline="true">
      <el-form-item label="老师名称">
        <el-input
          v-model="keyWord"
          placeholder="请输入老师名称"
          clearable
          size="small"
          style="width: 240px"
          maxlength="50"
          @keyup.enter.native="reGetList"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="reGetList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetHandle">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 搜索区 ↑↑↑↑↑↑↑↑↑↑ -->

    <!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="showAddDialog"
        >新增</el-button>
      </el-col>
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row>
    <!-- 操作区 ↑↑↑↑↑↑↑↑↑↑ -->

    <el-table :data="list" max-height="420px">
      <el-table-column type="index" label="序号" align="center" width="60" />
      <el-table-column label="老师名称" prop="teacherName" align="center" min-width="120" />
      <el-table-column label="班级名称" prop="className" align="center" min-width="120" />
      <el-table-column label="创建时间" prop="createTime" align="center" width="160" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
        <template slot-scope="scope">
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="showEditDialog(scope.row)"
          >编辑</el-button> -->
          <el-button
            size="mini"
            type="text warn"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增&编辑 -->
    <el-dialog v-el-drag-dialog :title="(dialogData.type=='add'?'新增':'编辑') + objectName" width="500px" :visible.sync="dialogVisible" append-to-body :before-close="hideDialog" :close-on-click-modal="false">
      <el-form ref="refDialog" :model="dialogData" label-width="110px" :rules="rules" size="small">
        <el-form-item label="绑定老师" prop="teacherIds">
          <el-select v-model="dialogData.teacherIds" clearable multiple placeholder="选择老师" style="width: 100%">
            <el-option
              v-for="item in teacherOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideDialog">取消</el-button>
        <el-button type="primary" @click="submitHandle">确定</el-button>
      </div>
    </el-dialog>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getList"
    />
  </el-dialog>
</template>

<script>

export default {
  data() {
    return {
      isShow: false,
      showSearch: true, // 是否显示搜索区
      keyWord: '',

      name: '',
      id: '',
      list: [],

      objectName: '绑定老师', // 对象名称，用于删除提示、启用提示、弹窗标题等

      // 老师配置下拉
      teacherOptions: [],

      // 弹窗数据
      dialogVisible: false,
      dialogData: {},

      // 分页 ↓↓↓↓↓↓↓↓↓↓
      total: 0,
      pageNum: 1,
      pageSize: 20,
      // 分页 ↑↑↑↑↑↑↑↑↑↑

      // 表单校验
      rules: {
        teacherIds: [
          { required: true, message: '绑定老师不能为空', trigger: 'change' }
        ]
      }

    }
  },
  methods: {
    // 初始化 this.$refs.xxx.openHandle(id)
    openHandle(item) {
      this.id = item.id
      this.name = item.name
      this.getList()
      this.isShow = true
    },

    // 关闭列表
    closeHandle() {
      this.id = ''
      this.list = []
      this.isShow = false
    },

    // 获取列表
    getList() {
      var { pageNum, pageSize, keyWord } = this
      this.postFN({
        url: 'admin/schoolClassTeacher/list',
        params: {
          pageNum: pageNum,
          pageSize: pageSize,
          schoolClassId: this.id,
          name: keyWord
        },
        mockData: {
          code: 100,
          msg: '',
          data: {
            list: [{
              createTime: '2021-04-02 10:21:52',
              teacherName: '崔某',
              className: '五年一班',
              id: '1'
            }],
            total: 100
          }
        }
      }, (inf) => {
        this.list = inf.list || []
        this.total = inf.total
      })
    },
    // 重新获取列表
    reGetList() {
      this.pageNum = 1
      this.getList()
    },
    // 重置
    resetHandle() {
      this.keyWord = ''
      this.reGetList()
    },
    // 删除
    handleDelete(item) {
      // 打开二次确认弹窗
      this.$confirm('是否确认删除该' + this.objectName + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确定回调
        // TODO url
        this.postFN({
          url: 'admin/schoolClassTeacher/delete/one',
          params: {
            id: item.id
          },
          mockData: {
            code: 100,
            msg: '',
            data: {}
          }
        }, () => {
          this.getList()
          this.$messageSuc('删除成功')
        })
      }).catch(() => {})
    },
    // 修改是否上架
    handleUpChange(item) {
      const text = item.isUp === 1 ? '上架' : '下架'
      this.$confirm('确认要' + text + '该' + this.objectName + '吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO url
        this.postFN({
          url: 'xxx',
          params: {
            id: item.id,
            isUp: item.isUp
          },
          mockData: {
            code: 100,
            msg: '',
            data: {}
          }
        }, () => {
          this.$messageSuc(text + '成功')
        }, (res) => {
          item.isUp = item.isUp === 1 ? 0 : 1
          this.$messageError(res.msg)
        })
      }).catch(() => {
        item.isUp = item.isUp === 1 ? 0 : 1
      })
    },

    // 获取老师列表
    getTeacherOptions(callback) {
      this.postFN({
        url: 'admin/common/select/teacher/list',
        params: {},
        mockData: {
          code: 100,
          msg: '',
          data: {
            list: [{
              name: '黄冈',
              id: 1
            }, {
              name: '表莲华',
              id: 2
            }, {
              name: '吴起是',
              id: 3
            }]
          }
        }
      }, (inf) => {
        this.teacherOptions = inf.list || []
        callback && callback()
      })
    },
    // 打开新增弹窗
    showAddDialog() {
      this.getTeacherOptions()
      var dialogData = {
        type: 'add',
        teacherIds: ''
      }
      this.dialogVisible = true
      this.$nextTick(() => {
        this.dialogData = dialogData
        this.$refs['refDialog'].resetFields()
      })
    },
    // 打开编辑弹框
    showEditDialog(item) {
      var dialogData = {
        ...item,
        type: 'edit'
      }
      console.log('dialogData', dialogData)
      this.dialogVisible = true
      this.$nextTick(() => {
        this.dialogData = dialogData
        this.$refs['refDialog'].resetFields()
      })
    },
    // 关闭编辑弹窗
    hideDialog() {
      this.dialogData = {}
      this.dialogVisible = false
    },
    // 提交新增&编辑
    submitHandle() {
      this.$refs['refDialog'].validate(valid => {
        if (valid) {
          this.submitReq()
        }
      })
    },
    // 提交接口
    submitReq() {
      var { dialogData } = this
      var params = {
        teacherIds: dialogData.teacherIds.join(','),
        schoolClassId: this.id
      }

      var isAdd = dialogData.type === 'add'
      var url = isAdd ? 'admin/schoolClassTeacher/add' : 'xxx'

      !isAdd && (params.id = dialogData.id)

      this.postFN({
        url: url,
        params: params,
        mockData: {
          code: 100,
          msg: '',
          data: {}
        }
      }, () => {
        this.$messageSuc('保存成功')
        this.hideDialog()
        isAdd ? this.reGetList() : this.getList()
      })
    }

  }
}
</script>

<style lang="scss" scoped>

</style>

 src/pages/demo/index.vue

@@ -43,7 +43,7 @@
      <el-table-column label="角色名称" prop="name" align="center" min-width="120" />
      <el-table-column label="是否上架" prop="isUp" align="center" min-width="100">
        <template slot-scope="scope">
          <!-- 权限判断 v-if="getAuthValueFN('xxx_edit')" -->
          <!-- 权限判断 :disable="!getAuthValueFN('xxx_edit')" -->
          <el-switch
            v-model="scope.row.isUp"
            :active-value="1"

 src/router/demo_router.js

@@ -34,6 +34,12 @@
      component: () => import('@/pages/demo/detail'), // Parent router-view
      name: 'demoDetail',
      meta: { title: '模板详情' }
    },
    {
      path: 'listDialog',
      component: () => import('@/pages/demo/classList'), // Parent router-view
      name: 'listDialog',
      meta: { title: '子列表弹框例子' }
    }
  ]
}