339 lines
9.3 KiB
Vue
339 lines
9.3 KiB
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="uc.workersCongressSession"></el-option>
|
||
<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="doSearch"></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 shadow="never" class="mt10">
|
||
<el-table
|
||
:data="tableData"
|
||
size="medium"
|
||
header-align="center"
|
||
v-loading="tableLoading"
|
||
style="width: 100%"
|
||
height="580"
|
||
@sort-change="pageOrder"
|
||
>
|
||
|
||
<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
|
||
sortable
|
||
prop="rolename"
|
||
label="分工"
|
||
header-align="center"
|
||
align="center" show-overflow-tooltip
|
||
>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
sortable
|
||
prop="workersCongressSession"
|
||
label="届次"
|
||
header-align="center"
|
||
align="center" show-overflow-tooltip
|
||
>
|
||
<template scope="{row:{workersCongressSession}}">
|
||
第{{ workersCongressSession }}届
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
prop="state"
|
||
label="状态"
|
||
header-align="center"
|
||
align="center" show-overflow-tooltip
|
||
>
|
||
<template scope="{row}">
|
||
<vi-table-state :state="row"></vi-table-state>
|
||
</template>
|
||
</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" :disabled="!row.can" size="mini" :loading="row.delLoading" type="danger"
|
||
icon="el-icon-delete">
|
||
</el-button>
|
||
</el-popconfirm>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
@size-change="pageSizeChange"
|
||
@current-change="pageNumberChange"
|
||
:current-page="pageForm.pageNumber"
|
||
:page-sizes="[10, 20, 30, 50]"
|
||
:page-size="pageForm.pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="pageForm.totalCount">
|
||
</el-pagination>
|
||
</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="workersCongressSession" label="届次">
|
||
<dict-select v-model="formData.workersCongressSession" style="width: 100%"
|
||
placeholder="届次"
|
||
code="jc"></dict-select>
|
||
</el-form-item>
|
||
<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",
|
||
components: {
|
||
'dict-select': httpVueLoader('/components/plugins/DictSelect.vue?v=1.0.0')
|
||
},
|
||
props: {
|
||
union: String,
|
||
},
|
||
data() {
|
||
return {
|
||
pageForm: {
|
||
searchName: 'uc.workersCongressSession',
|
||
searchKeyword: "",
|
||
pageNumber: 1,
|
||
pageSize: 10,
|
||
totalCount: 0,
|
||
pageOrderName: "",
|
||
pageOrderBy: ""
|
||
},
|
||
|
||
tableLoading: false,
|
||
tableData: [],
|
||
roleOptions: [],
|
||
|
||
addDialogVisible: false,
|
||
userLoading: false,
|
||
userOptions: [],
|
||
formData: {},
|
||
formRules: {
|
||
workersCongressSession: [{required: true, message: '必选', trigger: ['blur', 'change']}],
|
||
roleCode: [{required: true, message: '必选', trigger: ['blur', 'change']}],
|
||
userId: [{required: true, message: '必选', trigger: ['blur', 'change']}],
|
||
},
|
||
submitLoading: false
|
||
}
|
||
},
|
||
watch: {
|
||
union(val) {
|
||
this.pageForm = {
|
||
searchName: 'uc.workersCongressSession',
|
||
searchKeyword: "",
|
||
pageNumber: 1,
|
||
pageSize: 10,
|
||
totalCount: 0,
|
||
pageOrderName: "",
|
||
pageOrderBy: ""
|
||
}
|
||
this.userOptions = []
|
||
this.pageData()
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
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, msg} = await $.post('/platform/union/cadre/createCadre', this.formData)
|
||
|
||
if (code === 0) {
|
||
this.doSearch()
|
||
this.addDialogVisible = false;
|
||
}
|
||
|
||
this.$notify({
|
||
title: code === 0 ? '成功' : '失败',
|
||
type: code === 0 ? 'success' : 'error',
|
||
message: msg,
|
||
});
|
||
|
||
this.submitLoading = false
|
||
}
|
||
})
|
||
},
|
||
|
||
async doDelete(row) {
|
||
const {id} = row
|
||
|
||
this.$set(row, "delLoading", true)
|
||
|
||
const {code} = await $.post('/platform/union/cadre/removeCadre', {id})
|
||
|
||
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 resp = await $.get('/platform/union/cadre/pageData', this.pageForm)
|
||
this.tableLoading = false
|
||
if (resp.code === 0) {
|
||
this.tableData = resp.data.list
|
||
this.pageForm.totalCount = resp.data.totalCount
|
||
} else {
|
||
this.tableData = []
|
||
}
|
||
},
|
||
|
||
doSearch() {
|
||
this.tableKey = new Date().getTime()
|
||
this.pageForm.pageNumber = 1
|
||
this.pageData()
|
||
},
|
||
pageOrder(column) {
|
||
this.pageForm.pageOrderName = column.prop;
|
||
this.pageForm.pageOrderBy = column.order;
|
||
this.pageData();
|
||
},
|
||
pageNumberChange(val) {
|
||
this.pageForm.pageNumber = val;
|
||
this.pageData();
|
||
},
|
||
pageSizeChange(val) {
|
||
this.pageForm.pageSize = val;
|
||
this.pageData();
|
||
},
|
||
|
||
},
|
||
async created() {
|
||
this.doSearch()
|
||
this.roleOptions = await getDictOptions("GrassrootsCadres")
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|