llh_project/src/views/role/role.vue

<template lang="html">
  <div id="role">
    <el-row class="register">
      <el-col :span="24" class="btn">
        <el-row :gutter="10">
          <el-col :span="20"><h3>角色管理</h3></el-col>
          <!-- 批量导入按钮没加 -->
          <el-col :span="4"><el-button type="success" icon="el-icon-plus" @click="openDialog()">角色添加</el-button></el-col>
        </el-row>
      </el-col>
      <el-col :span="24" class="search">
        <el-col :span="5" class="searchInp"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
        <el-col :span="2" class="searchBtn"><el-button icon="el-icon-search"></el-button></el-col>
      </el-col>
      <el-col :span="24" class="list">
        <el-table :data="tableData" style="width: 100%" border stripe>
          <el-table-column prop="name" align="center" label="角色名称"> </el-table-column>
          <el-table-column label="操作" align="center">
            <template v-slot="scoped">
              <el-row type="flex" justify="center">
                <el-col :span="6">
                  <el-button size="mini" type="text" @click="openDialog(scoped.$index, 'update')">修改</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button size="mini" type="text" @click="openDialog(scoped.$index, 'assign')">分配人员</el-button>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <el-col class="paging">
          <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="角色编辑" :visible.sync="dialog">
      <el-form :model="form" label-position="left" label-width="auto" style="padding: 0 5px;">
        <el-row>
          <el-col :span="24">
            <el-form-item label="角色名称">
              <el-input v-model="form.name" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="分配人员" :visible.sync="dialogAssign" style="padding:0 5rem;">
      <el-transfer v-model="assignFrom.personList" :data="personList" :titles="['未添加', '已添加']" :button-texts="['删除', '添加']"></el-transfer>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAssign = false">取 消</el-button>
        <el-button type="primary" @click="handleAssign">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'role',
  props: {},
  components: {},
  data: () => ({
    input: '',
    textarea: '',
    tableData: [
      {
        name: '角色1',
        personList: [1],
      },
      {
        name: '角色2',
        personList: [2, 3],
      },
      {
        name: '角色3',
      },
      {
        name: '角色4',
      },
    ],
    personList: [],
    value: '',
    dialog: false,
    dialogAssign: false,
    form: {},
    assignFrom: {},
  }),
  created() {
    let list = [];
    for (let i = 0; i < 10; i++) {
      list.push({
        key: i,
        label: `人员${i}`,
      });
    }
    this.$set(this, `personList`, list);
  },
  computed: {},
  methods: {
    handleEdit() {
      let chData = this.form;
      const { index, ...form } = chData;
      form['state'] = 1;
      console.log(index, form);
      if (index !== undefined) {
        this.$set(this.tableData, `${index}`, form);
        this.$message.success('修改成功');
      } else {
        this.tableData.push(form);
      }
      this.handleCancel();
    },
    handleCancel() {
      this.form = {};
      this.dialog = false;
    },
    openDialog(index, type) {
      if (index !== undefined) {
        let data = JSON.parse(JSON.stringify(this.tableData[index]));
        data[`index`] = index;
        if (type === 'update') {
          this.dialog = true;
          this.$set(this, `form`, data);
        } else {
          this.dialogAssign = true;
          this.$set(this, `assignFrom`, data);
        }
      } else {
        this.form = {};
        this.dialog = true;
      }
    },
    handleAssign() {
      let data = this.assignFrom;
      const { index, ...form } = data;
      this.$set(this.tableData[index], `personList`, form.personList);
      this.dialogAssign = false;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
  },
};
</script>

<style lang="scss" scoped>
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
.register {
  width: 100%;
  padding: 20px;
}
.btn {
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin: 20px 0;
}
.search {
  height: 40px;
  line-height: 40px;
  margin: 0 0 20px 0;
}
.searchSel .el-select {
  border-radius: 0;
}
/deep/.searchInp .el-input__inner {
  border-radius: 0;
}
.searchBtn .el-button {
  border-radius: 0;
}
.paging {
  text-align: right;
  margin: 10px 0;
}
.sizeA {
  padding: 30px;
}
</style>