优化列表、回到顶部组件、优化样式

long

2021-02-02 36b71142347dc524e18fa24c5ffdffff0d02287a

 src/pages/demo/index.vue

@@ -9,6 +9,7 @@
          clearable
          size="small"
          style="width: 240px"
          maxlength="50"
          @keyup.enter.native="reGetList"
        />
      </el-form-item>
@@ -26,22 +27,34 @@
          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">
    <el-table :data="list" max-height="500px" 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="createTime" align="center" min-width="180" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="100">
      <el-table-column label="是否上架" prop="isUp" align="center" min-width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isUp"
            :active-value="1"
            :inactive-value="0"
            @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
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="showEditDialog(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
@@ -52,6 +65,26 @@
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增&编辑 -->
    <el-dialog v-el-drag-dialog :title="dialogData.type=='add'?'新增医院科室':'编辑医院科室'" width="500px" :visible.sync="dialogVisible" append-to-body :before-close="hideDialog">
      <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="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"
@@ -66,7 +99,7 @@
<script>

export default {
  name: 'Role',
  name: 'Demo',
  data() {
    return {
      showSearch: true, // 是否显示搜索区
@@ -74,11 +107,25 @@

      list: [],

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

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

      // 表单校验
      rules: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'change' }
        ],
        isUp: [
          { required: true, message: '是否上架不能为空', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
@@ -97,7 +144,7 @@
        url: 'xxx',
        params: {
          pageNum: pageNum,
          rowCount: pageSize,
          pageSize: pageSize,
          keyWord: keyWord
        },
        mockData: {
@@ -152,6 +199,99 @@
          this.$messageSuc('删除成功')
        })
      }).catch(() => {})
    },
    // 修改是否上架 todo
    handleUpChange(item) {
      const text = item.isUp === 1 ? '上架' : '下架'
      this.$confirm('确认要' + text + '该角色吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.postFN({
          url: 'xxx',
          params: {
            id: item.id
          },
          mockData: {
            code: 100,
            msg: '',
            data: {}
          }
        }, () => {
          this.$messageSuc(text + '成功')
        })
      }).catch(() => {
        item.isUp = item.isUp === 1 ? 0 : 1
      })
    },

    // 打开新增弹窗
    showAddDialog() {
      var dialogData = {
        type: 'add',
        isUp: 1
      }
      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
    },
    // 提交新增&编辑
    submitHandle() {
      this.$refs['refDialog'].validate(valid => {
        if (valid) {
          this.submitReq()
        }
      })
    },
    // 提交接口
    submitReq() {
      var { dialogData } = this
      var params = {
        name: dialogData.name,
        isUp: dialogData.isUp
      }

      if (dialogData.password) params.password = dialogData.password

      var isAdd = dialogData.type === 'add'
      var url = isAdd ? 'admin/hospital/department/add' : 'admin/hospital/department/edit'

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

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