UNION_HUTB/target/classes/static/components/sys/union/UnionCadreMange.vue

<template>
  <div>
    <el-card shadow="never">
      <div class="btn-group tool-button mt5">
        <el-input placeholder="请输入内容" clearable v-model="pageForm.searchKeyword"
                  @keyup.enter.native="doSearch">
          <el-select v-model="pageForm.searchName" slot="prepend"
                     placeholder="查询类型"
                     style="width: 120px;">
            <el-option label="角色" value="role.name"></el-option>
            <el-option label="姓名" value="u.username"></el-option>
            <el-option label="工号" value="u.loginname"></el-option>
          </el-select>
        </el-input>
      </div>
      <div class="btn-group tool-button mt5">
        <el-button type="primary" icon="el-icon-search"
                   @click="pageData"></el-button>
      </div>
      <div class="pull-right offscreen-right mt5">
        <el-button size="medium" @click="openAdd"><i class="ti-plus"></i> 添加
        </el-button>
      </div>
    </el-card>
    <el-card class="mt10" shadow="never">
      <el-row class="el-table-container">
        <el-table
            :data="tableData"
            size="medium"
            header-align="center"
            v-loading="tableLoading"
            style="width: 100%"
        >
          <el-table-column
              prop="rolename"
              label="角色"
              header-align="center"
              align="center" show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
              prop="username"
              label="姓名"
              header-align="center"
              align="center" show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
              prop="loginname"
              label="工号"
              header-align="center"
              align="center" show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
              prop="mobile"
              label="联系方式"
              header-align="center"
              align="center" show-overflow-tooltip
          >
          </el-table-column>


          <el-table-column
              prop="userOnline"
              label="操作"
              header-align="center"
              align="center"
              width="150">
            <template scope="{row}">
              <el-popconfirm
                  title="确定要删除吗？"
                  @confirm="doDelete(row)"
              >
                <el-button slot="reference" size="mini" :loading="row.delLoading" type="danger" icon="el-icon-delete">
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>

    <el-dialog
        title="添加"
        :visible.sync="addDialogVisible" width="40%">

      <el-form :model="formData" ref="addForm" :rules="formRules" label-width="80px">
        <el-form-item prop="roleCode" label="角色">

          <el-select v-model="formData.roleCode"
                     placeholder="角色" filterable
                     style="width: 100%">
            <el-option
                v-for="item in roleOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code">
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item prop="userId" label="人员">

          <el-select
              style="width: 100%"
              v-model="formData.userId"
              filterable
              remote
              reserve-keyword
              placeholder="请输入姓名或工号查找"
              :remote-method="(k)=>{userRemoteMethod(k)}"
              :loading="userLoading">
            <el-option
                v-for="i in userOptions"
                :key="i.id"
                :label="i.username+'（'+i.loginname+'）'"
                :value="i.id">
            </el-option>
          </el-select>

        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false" :disabled="submitLoading">取 消</el-button>
                    <el-button type="primary" :loading="submitLoading" @click="doAdd">确 定</el-button>
                  </span>
    </el-dialog>

  </div>
</template>

<script>
module.exports = {
  name: "UnionCadreange",
  props: {
    union: String,
  },
  data() {
    return {
      pageForm: {
        searchName: 'role.name'
      },

      tableLoading: false,
      tableData: [],
      roleOptions: [],

      addDialogVisible: false,
      userLoading: false,
      userOptions: [],
      formData: {},
      formRules: {
        roleCode: [{required: true, message: '必选', trigger: ['blur', 'change']}],
        userId: [{required: true, message: '必选', trigger: ['blur', 'change']}],
      },
      submitLoading: false
    }
  },
  watch: {
    union(val) {
      this.pageForm = {
        searchName: 'role.name'
      }
      this.userOptions = []
      this.pageData()
    }
  },
  methods: {
    doSearch(){
      this.pageData();
    },

    openAdd() {
      this.formData = {};
      if (this.$refs["addForm"])
        this.$refs["addForm"].resetFields();
      this.addDialogVisible = true;
    },

    async doAdd() {
      this.$refs["addForm"].validate(async (valid) => {
        if (valid) {
          this.formData.type = 1
          this.formData.unionid = this.union

          this.submitLoading = true

          const {code} = await $.post(loc() + '/changeSchoolUnionRole', this.formData)

          if (code == 0) {
            this.pageData()
            this.addDialogVisible = false;
          }

          this.$notify({
            title: code == 0 ? '成功' : '失败',
            type: code == 0 ? 'success' : 'error'
          });

          this.submitLoading = false
        }
      })
    },

    async doDelete(row) {
      const {id, roleid} = row

      this.$set(row, "delLoading", true)

      const {code} = await $.post(loc() + '/changeSchoolUnionRole', {
        unionid: this.union,
        roleId: roleid,
        userId: id,
        type: 2
      })

      if (code == 0) {
        this.pageData()
      }

      this.$notify({
        title: code == 0 ? '成功' : '失败',
        type: code == 0 ? 'success' : 'error'
      });

      this.$set(row, "delLoading", false)
    },

    async userRemoteMethod(query) {
      if (!query) {
        this.userOptions = []
        return
      }
      this.userLoading = true
      const users = await searchUser(query, this.union)
      this.userOptions = users
      this.userLoading = false
    },

    async pageData() {
      this.tableLoading = true
      this.pageForm.unionid = this.union
      const {code, data} = await $.get('/platform/sys/union/mange/schoolUnionRoles', this.pageForm)
      if (code == 0) {
        this.tableData = data
      } else {
        this.tableData = []
      }
      this.tableLoading = false
    },


  },
  async created() {
    this.pageData()
    if (this.union) {
      this.roleOptions = await getDictOptions("GrassrootsCadres")
    } else {
      this.roleOptions = await getDictOptions("SchoolRoles")
    }
  },
}
</script>

<style scoped>

</style>