211 lines
6.5 KiB
Vue
211 lines
6.5 KiB
Vue
<template>
|
|
<el-container>
|
|
<el-header>
|
|
<div class="left-panel">
|
|
<el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-auth="'team.create'">新增</el-button>
|
|
</div>
|
|
<div class="right-panel">
|
|
<div class="right-panel-search">
|
|
<el-select
|
|
v-model="query.belong_dept"
|
|
clearable>
|
|
<el-option v-for="item in deptData"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
|
|
</div>
|
|
</div>
|
|
</el-header>
|
|
<el-main class="nopadding">
|
|
<scTable ref="table" :apiObj="apiObj" row-key="id" hidePagination>
|
|
<el-table-column label="#" type="index" width="50"></el-table-column>
|
|
<el-table-column label="名称" prop="name" min-width="100"></el-table-column>
|
|
<el-table-column label="班长" prop="leader_name" min-width="100"></el-table-column>
|
|
<el-table-column label="所属部门" prop="belong_dept_name" min-width="150"></el-table-column>
|
|
<el-table-column label="创建时间" prop="create_time" min-width="150"></el-table-column>
|
|
<el-table-column label="操作" fixed="right" align="center" width="180">
|
|
<template #default="scope">
|
|
<el-button link size="small" @click="handleMember(scope.row)" v-auth="'team.update'" type="primary">班组人员</el-button>
|
|
<el-divider direction="vertical"></el-divider>
|
|
<el-button link size="small" @click="handleEdit(scope.row)" v-auth="'team.update'" type="primary">编辑</el-button>
|
|
<el-divider direction="vertical"></el-divider>
|
|
<el-popconfirm title="确定删除吗？" @confirm="handleDel(scope.row, scope.$index)">
|
|
<template #reference>
|
|
<el-button link size="small" v-auth="'team.delete'" type="danger">删除</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
</template>
|
|
</el-table-column>
|
|
</scTable>
|
|
</el-main>
|
|
</el-container>
|
|
<el-dialog :title="titleMap[type]" v-model="limitedVisible">
|
|
<el-form :model="form" :rules="rules" ref="addForm" label-width="80px" style="padding: 0 10px;">
|
|
<el-form-item label="班组名称" prop="name">
|
|
<el-input v-model="form.name" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="班组班长" prop="leader_name">
|
|
<span style="display:flex">
|
|
<el-input readonly v-model="form.leader_name"></el-input>
|
|
<ehsUserSelect :multiple="false" @submit="getReceptionist"/>
|
|
</span>
|
|
</el-form-item>
|
|
<el-form-item label="所属部门">
|
|
<el-select
|
|
v-model="form.belong_dept"
|
|
placeholder="所属部门"
|
|
clearable
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="item in deptData"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="limitedVisible=false" >取 消</el-button>
|
|
<el-button v-if="type!=='show'" type="primary" :loading="isSaving" @click="submitHandle()">保 存</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
<member-dialog
|
|
v-if="dialogVisible"
|
|
:team="team"
|
|
ref="memberDialog"
|
|
@success="handleSuccess"
|
|
@closed="dialogVisible = false"
|
|
>
|
|
</member-dialog>
|
|
</template>
|
|
<script>
|
|
import memberDialog from "./team_form.vue";
|
|
const defaultForm = {
|
|
id:"",
|
|
name: "",
|
|
leader:'',
|
|
leader_name:'',
|
|
belong_dept:'',
|
|
};
|
|
export default {
|
|
name: 'dept',
|
|
components: {
|
|
memberDialog
|
|
},
|
|
data() {
|
|
return {
|
|
apiObj: this.$API.mtm.team.list,
|
|
search: {
|
|
keyword: null
|
|
},
|
|
query: {},
|
|
isSaving: false,
|
|
limitedVisible : false,
|
|
dialogVisible:false,
|
|
checkStrictly:true,
|
|
type: "add",
|
|
titleMap: {
|
|
add: '新增班组',
|
|
edit: '编辑班组',
|
|
show: '查看班组'
|
|
},
|
|
|
|
//表单数据
|
|
form: defaultForm,
|
|
//验证规则
|
|
rules: {
|
|
name: [{required: true, message: '请输入班组名称'}],
|
|
leader_name: [{required: true, message: '请输入班组班长'}],
|
|
belong_dept: [{required: true, message: '请选择所属部门'}],
|
|
},
|
|
deptData: [],
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getDeptData();
|
|
},
|
|
methods: {
|
|
//部门数据
|
|
getDeptData() {
|
|
this.$API.system.dept.list.req({ page: 0,type:'dept'}).then(res=>{
|
|
this.deptData = res;
|
|
});
|
|
},
|
|
//添加班组
|
|
handleAdd(){
|
|
this.limitedVisible = true;
|
|
this.type = "add";
|
|
this.form = Object.assign({}, defaultForm);
|
|
},
|
|
getReceptionist(data) {
|
|
this.form.leader=data.id;
|
|
this.form.leader_name=data.name
|
|
},
|
|
submitHandle(){
|
|
let that = this;
|
|
this.$refs.addForm.validate( (valid) => {
|
|
if (valid) {
|
|
this.isSaveing = true;
|
|
let res;
|
|
if(this.type==='add'){
|
|
this.$API.mtm.team.create.req(that.form).then(res=>{
|
|
this.isSaveing = false;
|
|
this.limitedVisible = false;
|
|
this.$refs.table.refresh();
|
|
}).catch(e=>{this.isSaveing = false;})
|
|
}else{
|
|
this.$API.mtm.team.update.req(that.form.id,that.form).then(res=>{
|
|
this.isSaveing = false;
|
|
this.limitedVisible = false;
|
|
this.$refs.table.refresh();
|
|
}).catch(e=>{this.isSaveing = false;})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
//编辑班组
|
|
handleEdit(row){
|
|
this.type='edit';
|
|
this.form=row;
|
|
this.limitedVisible = true;
|
|
},
|
|
//删除班组
|
|
async handleDel(row){
|
|
var id = row.id;
|
|
var res = await this.$API.mtm.team.delete.req(id);
|
|
if(res.err_msg){
|
|
this.$message.error(res.err_msg)
|
|
}else{
|
|
this.$refs.table.refresh();
|
|
this.$message.success("删除成功")
|
|
}
|
|
},
|
|
//搜索
|
|
handleQuery(){
|
|
this.$refs.table.queryData(this.query)
|
|
},
|
|
//本地更新数据
|
|
handleSaveSuccess(){
|
|
this.$refs.table.refresh()
|
|
},
|
|
handleMember(row){
|
|
this.team = row.id;
|
|
this.dialogVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.memberDialog.open('add').setData(row)
|
|
})
|
|
},
|
|
handleSuccess(){},
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.treeMain {width: 100%;height:280px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;}
|
|
</style>
|