482 lines
14 KiB
Vue
482 lines
14 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="openBatch"><i class="ti-plus"></i> 批量导入
|
||
</el-button>
|
||
<el-button size="medium" @click="openAdd"><i class="ti-plus"></i> 添加
|
||
</el-button>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card shadow="never" class="mt10">
|
||
<el-row class="el-table-container">
|
||
<el-table
|
||
:data="tableData"
|
||
size="medium"
|
||
header-align="center"
|
||
v-loading="tableLoading"
|
||
style="width: 100%"
|
||
@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-row>
|
||
<el-row class="el-pagination-container" style="margin-bottom: 0px">
|
||
<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-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="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>
|
||
<el-dialog
|
||
title="管理员导入"
|
||
:visible.sync="batchDialogVisible"
|
||
:close-on-click-modal="false"
|
||
width="50%"
|
||
>
|
||
<el-timeline>
|
||
<el-timeline-item timestamp="下载模板" placement="top">
|
||
<el-card>
|
||
<el-button size="medium" type=""
|
||
style="width: 200px"
|
||
@click="location.href='/platform/basics/downloadTemplate?filePath=jdh/JdhTwoGlyImport.xls&fileName=管理员导入模板.xls'"
|
||
icon="el-icon-download">下载模板
|
||
</el-button>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
<el-timeline-item timestamp="上传文件" placement="top">
|
||
<el-card>
|
||
<el-upload
|
||
name="file"
|
||
ref="upload"
|
||
:on-remove="(file, fileList) => {
|
||
importData.fileList = fileHandleRemove(file, fileList)
|
||
}"
|
||
:on-change="(file, fileList) => {
|
||
importData.fileList = fileHandleChange(file, fileList,{type:['xls']})
|
||
}"
|
||
:auto-upload="false"
|
||
:limit="1"
|
||
:file-list="importData.fileList">
|
||
<el-button size="medium" type="" icon="el-icon-upload" style="width: 200px">选择文件
|
||
</el-button>
|
||
<div slot="tip" class="el-upload__tip">只能上传xls文件</div>
|
||
</el-upload>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="batchDialogVisible = false" :disabled="importLoading">取 消</el-button>
|
||
<el-button type="primary" @click="doImport" :loading="importLoading">确定</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: [],
|
||
|
||
batchDialogVisible: false,
|
||
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,
|
||
importLoading: false,
|
||
importData: {},
|
||
}
|
||
},
|
||
watch: {
|
||
union(val) {
|
||
this.pageForm = {
|
||
searchName: 'uc.workersCongressSession',
|
||
searchKeyword: "",
|
||
pageNumber: 1,
|
||
pageSize: 10,
|
||
totalCount: 0,
|
||
pageOrderName: "",
|
||
pageOrderBy: ""
|
||
}
|
||
this.userOptions = []
|
||
this.pageData()
|
||
}
|
||
},
|
||
methods: {
|
||
fileHandleRemove(file, fileList) {
|
||
return fileList;
|
||
},
|
||
fileHandleChange(file, fileList, {type, size}) {
|
||
const removeFile = () => {
|
||
fileList.splice(fileList.findIndex(v => v === file))
|
||
}
|
||
|
||
if (!file.size) {
|
||
this.$notify({
|
||
title: '警告',
|
||
message: "您选择的是空文件！",
|
||
type: 'warning'
|
||
});
|
||
removeFile()
|
||
}
|
||
|
||
if (type && type.length && !type.includes(file.name.split('.').pop().toLowerCase())) {
|
||
this.$notify({
|
||
title: '警告',
|
||
message: `文件只能是 ${type.map(v => v.toUpperCase()).join('/')} 格式！`,
|
||
type: 'warning'
|
||
});
|
||
removeFile()
|
||
}
|
||
|
||
if (size && !file.size < size) {
|
||
this.$notify({
|
||
title: '警告',
|
||
message: `文件大小不能超过 ${size / 1024 / 1024}MB！`,
|
||
type: 'warning'
|
||
});
|
||
removeFile()
|
||
}
|
||
|
||
return fileList;
|
||
},
|
||
openBatch() {
|
||
this.importData = {}
|
||
this.batchDialogVisible = true;
|
||
},
|
||
doImport() {
|
||
if ($.isEmptyObject(this.importData) || this.importData.fileList.length === 0) {
|
||
this.$notify({
|
||
title: '警告',
|
||
message: "请选择文件！",
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
const data = new FormData();
|
||
this.importData.fileList.forEach((val) => {
|
||
data.append("file", val.raw, val.raw.name);
|
||
});
|
||
this.importLoading = true
|
||
$.ajax({
|
||
url: loc() + "/importGly",
|
||
type: "post",
|
||
data: data,
|
||
processData: false,
|
||
contentType: false,
|
||
success: (data) => {
|
||
console.log(data)
|
||
if (!data.code) {
|
||
this.$notify({
|
||
title: '成功',
|
||
message: data.msg,
|
||
type: 'success'
|
||
});
|
||
this.pageData();
|
||
this.batchDialogVisible = false
|
||
} else {
|
||
this.$notify({
|
||
title: '警告',
|
||
message: data.msg,
|
||
type: 'warning'
|
||
});
|
||
}
|
||
this.importLoading = false
|
||
},
|
||
error: (data) => {
|
||
this.$notify({
|
||
title: '警告',
|
||
message: data.msg,
|
||
type: 'warning'
|
||
});
|
||
this.batchDialogVisible = false
|
||
this.importLoading = false
|
||
}
|
||
});
|
||
},
|
||
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)
|
||
requestLaterFun(resp, ({list, totalCount}) => {
|
||
this.tableData = list
|
||
this.pageForm.totalCount = totalCount
|
||
}, () => {
|
||
this.tableData = []
|
||
})
|
||
this.tableLoading = false
|
||
},
|
||
|
||
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> |