You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

594 lines
20 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="container">
<!-- 查询配置 -->
<div style="padding: 0px 20px">
<div ref="lxHeader">
<LxHeader icon="md-apps" text="科室活动记录" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<div slot="content"></div>
<slot>
<div>
<Input style="width: 200px; margin-right: 10px" v-model="searchFields.KeyWord" placeholder="关键字搜索" />
<Button type="primary" @click="search" style="margin-left: 10px">查询</Button>
<Button type="primary" @click="edit()" style="margin-left: 10px">新增</Button>
</div>
</slot>
</LxHeader>
</div>
<div ref="lxTable">
<el-table :data="tableData" class="v-table" :height="tableHeight" style="width: 100%">
<el-table-column type="index" width="50" align="center" fixed="left"> </el-table-column>
<el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columns"
:label="column.title" :width="column.width" :fixed="column.fixed">
<template slot-scope="scope">
<div v-if="column.type=='opt'">
<Button v-if="scope.row['status']==1" ghost size="small" @click="show(scope.row)" type="primary"
style="margin-left: 10px;">查看</Button>
<Button v-if="scope.row['status']==0" ghost size="small" @click="edit(scope.row)" type="primary"
style="margin-left: 10px;">编辑</Button>
<Button ghost size="small" @click="del(scope.row)" type="error" style="margin-left: 10px;">删除</Button>
</div>
<div v-else-if="column.type=='status'">
<el-tag :type="scope.row[column.field]==1?'':'warning'">{{scope.row['statusName']}}</el-tag>
</div>
<div v-else-if="column.type=='format'">
<div v-if="column.field=='admin'||column.field=='department'||column.field=='maintenance_department'">
{{scope.row[column.field]?scope.row[column.field].name:""}}
</div>
</div>
<div v-else-if="column.type=='peoples'">
<el-tag style="margin-right:5px" v-for="item in scope.row[column.field]">{{item}}</el-tag>
</div>
<div v-else>{{scope.row[column.field]}}</div>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination @current-change="handleCurrentChange" :current-page="paginations.page"
:page-size="paginations.page_size" background layout="prev, pager, next" :total="paginations.total">
</el-pagination>
</div>
</div>
</div>
<el-dialog title="科室活动记录" :visible.sync="dialogShowFormVisible" fullscreen width="90%">
<div class="dialogConcent" :style="{height:clientHeight+'px'}">
<el-scrollbar style="flex: 1">
<el-form :model="form" ref="form" :label-width="formLabelWidth">
<el-row>
<el-col :span="24">
<div class="form-sub-title">基本信息</div>
</el-col>
<el-col :span="24">
<el-form-item label="活动名称" prop="name">
{{form.name}}
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="活动日期" prop="date">
{{form.date}}
</el-form-item>
</el-col>
<el-col :span="10" :offset="4">
<el-form-item label="活动地点" prop="address">
{{form.address}}
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="活动内容" prop="content">
{{form.content}}
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="参与人员" prop="joins_list">
<el-tag style="margin-right:5px" v-for="item in peoplesshow">{{item}}</el-tag>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="附件" prop="file_list" label-position="top">
<el-link type="primary" v-for="item in fileList">{{item.name}}</el-link>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="form-sub-title">活动结果</div>
</el-col>
<el-col :span="24">
<el-form-item label="是否办结" prop="status" label-position="top">
<el-tag type="" v-if="form.status==1">已办结</el-tag>
<el-tag type="warning" v-if="form.status==0">未办结</el-tag>
</el-form-item>
</el-col>
<el-col :span="24" v-if="form.status==1">
<el-form-item label="已办结" prop="end_content" label-position="top">
{{form.end_content}}
</el-form-item>
</el-col>
<el-col :span="24" v-if="form.status==0">
<el-form-item label="未办结" prop="no_end_content" label-position="top">
{{form.no_end_content}}
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-scrollbar>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="resetForm('form')">关 闭</el-button>
</div>
</el-dialog>
<el-dialog title="科室活动记录编辑" :visible.sync="dialogFormVisible" fullscreen width="90%">
<div class="dialogConcent" :style="{height:clientHeight+'px'}">
<el-scrollbar style="flex: 1">
<el-form :model="form" :rules="rules" ref="form" :label-width="formLabelWidth">
<el-row>
<el-col :span="24">
<div class="form-sub-title">基本信息</div>
</el-col>
<el-col :span="24">
<el-form-item label="活动名称" prop="name">
<el-input v-model="form.name" placeholder="请填写活动名称" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="活动日期" prop="date">
<el-date-picker style="width:100%" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
v-model="form.date" placeholder="请填写活动日期" autocomplete="off">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="10" :offset="4">
<el-form-item label="活动地点" prop="address">
<el-input v-model="form.address" placeholder="请填写活动地点" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="活动内容" prop="content">
<el-input v-model="form.content" placeholder="请填写活动内容" type="textarea" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="参与人员" prop="joins_list">
<el-transfer filterable :titles="['待选择', '已选择']" :props="{key: 'id',label: 'name'}"
:filter-method="filterMethod" :format="{ noChecked: '${total}',hasChecked: '${checked}/${total}' }"
filter-placeholder="请选择参与人员" v-model="form.joins_list" :data="userdata">
</el-transfer>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="附件" prop="file_list" label-position="top">
<el-upload class="upload-demo" :on-success="handlesuccess" :data="uploadOther"
action="/api/admin/upload-file" :on-remove="handleRemove" :before-remove="beforeRemove"
:on-exceed="handleExceed" :file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="form-sub-title">活动结果</div>
</el-col>
<el-col :span="24">
<el-form-item label="是否办结" prop="status" label-position="top">
<el-radio-group v-model="form.status">
<el-radio :label="1">已办结</el-radio>
<el-radio :label="0"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24" v-if="form.status==1">
<el-form-item label="已办结" prop="end_content" label-position="top">
<el-input v-model="form.end_content" type="textarea" placeholder="请填写培训效果评估" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="24" v-if="form.status==0">
<el-form-item label="未办结" prop="no_end_content" label-position="top">
<el-input v-model="form.no_end_content" type="textarea" placeholder="请填写评估人" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-scrollbar>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="resetForm('form')">取 消</el-button>
<el-button type="primary" v-preventReClick @click="submitForm('form')"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getToken
} from '@/utils/auth';
import LxHeader from "@/components/LxHeader/index.vue";
import {
listevent,
store,
save,
get,
del
} from "../../api/training/event.js";
import {
listCommondepartment,
listCommonuser
} from "../../api/common.js"
export default {
components: {
LxHeader
},
data() {
return {
paginations: {
page: 1,
page_size: 15,
total: 0
},
userdata: [],
filterMethod(query, item) {
return item.name.indexOf(query) > -1;
},
tableHeight: 0,
dialogFormVisible: false,
dialogShowFormVisible:false,
formLabelWidth: "120px",
clientHeight: 0,
form: {
status:1,
name: "",
date: "",
address: "",
content: "",
end_content: "",
no_end_content: "",
joins_list: [],
file_list:''
},
fileList: [],
tableData: [],
rules: {
name: [{
required: true,
message: '请填写活动名称',
trigger: 'blur'
}],
date: [{
required: true,
message: '请选择活动时间',
trigger: 'change'
}],
address: [{
required: true,
message: '请填写活动地点',
trigger: 'blur'
}]
},
tableHeight: 900,
searchFields: {
KeyWord: ""
},
columns: [{
field: "name",
title: "活动名称",
type: "string",
width:240
},
{
field: "date",
title: "活动时间",
type: "string",
align:"center",
width: 180
},
{
field: "address",
title: "活动地点",
type: "string",
width: 240
},
{
field: "peoples",
title: "参与人员",
type: "peoples",
width: 300,
align: "left"
},
{
field: "status",
title: "办结状态",
type: "status",
width: 180,
align: "center"
},
{
field: "created_at",
title: "创建时间",
type: "string",
width: 180,
align: "center"
},
{
field: "admin",
title: "创建人",
type: "format",
width: 180,
align: "center"
},
{
field: "department",
title: "创建人科室",
type: "format",
width: 180,
align: "center"
},
{
field: "操作",
title: "操作",
width: 220,
type: "opt",
fixed:"right"
}
],
uploadOther: {
token: ""
},
deptOptions: [],
peoplesshow:[]
}
},
created() {
this.uploadOther.token = getToken();
this.loadDeptOptions();
this.loadUser();
this.initLoad();
this.load();
},
methods: {
loadDeptOptions() {
listCommondepartment().
then((res) => {
this.deptOptions = res.data;
}).catch(error => {
console.log(error)
reject(error)
})
},
loadUser() {
listCommonuser({
page_size: 999
}).
then((res) => {
this.userdata = res.data;
}).catch(error => {
console.log(error)
})
},
initLoad() {
var that = this;
var clientHeight = document.documentElement.clientHeight
var lxHeader_height = 96.5; //查询 头部
var paginationHeight = 37; //分页的高度
var topHeight = 50; //页面 头部
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
that.tableHeight = tableHeight;
},
handleCurrentChange(page) {
this.paginations.page = page;
this.load();
},
search() {
this.paginations.page = 1;
this.load();
},
load() {
listevent({
page: this.paginations.page,
page_size: this.paginations.page_size,
keyword:this.searchFields.KeyWord
}).then(response => {
for(var m of response.data){
let list = []
if(m.department_activity_joins){
for(var k of m.department_activity_joins){
list.push(k.admin.name)
}
m.peoples = list
}
m.statusName = m.status==0?"未办结":"已办结"
}
this.tableData = response.data;
this.paginations.total = response.total;
}).catch(error => {
console.log(error)
reject(error)
})
},
del(obj) {
var that = this;
if (obj) {
this.$Modal.confirm({
title: '确认要删除数据?',
onOk: () => {
del(obj.id).then(response => {
this.$Message.success('操作成功');
that.load();
}).catch(error => {
console.log(error)
reject(error)
})
},
onCancel: () => {
//this.$Message.info('Clicked cancel');
}
});
}
},
info(obj) {
var that = this;
get(obj.id).then(res => {
let result = Object.assign(that.form, res);
that.form = result;
let _files = [];
for (var mod of result.department_activity_files) {
let m = Object.assign({}, mod["files"]);
m.name = mod["files"].original_name;
m.id=mod["files"].i;
_files.push(m);
}
that.fileList = _files;
for (var m of result.department_activity_joins) {
if (m.admin)
that.form.joins_list.push(m.admin.id)
that.peoplesshow.push(m.admin.name)
}
}).catch(error => {
//reject(error)
})
},
show(obj){
this.form = this.$options.data().form;
this.clientHeight = document.documentElement.clientHeight - 84 - 110;
var that = this;
that.info(obj);
this.dialogShowFormVisible = true;
this.dialogFormVisible = false
},
edit(obj) {
this.form = this.$options.data().form;
this.clientHeight = document.documentElement.clientHeight - 84 - 110;
if (obj) {
var that = this;
that.info(obj);
} else {}
this.dialogFormVisible = true;
this.dialogShowFormVisible = false;
},
submitForm(formName) {
var that = this;
this.$refs[formName].validate((valid) => {
if (valid) {
var arr = [];
console.log(this.form.joins_list)
for (var m of this.form.joins_list) {
arr.push({
admin_id: m
})
}
this.form.joins_list = arr;
console.log(that.form)
// return
if (that.form.id) {
that.form.id = that.form.id;
save(that.form).then(response => {
//console.log(response)
this.$Message.success('操作成功');
that.load();
that.dialogFormVisible = false;
that.dialogShowFormVisible = false
}).catch(error => {
//reject(error)
})
} else {
store(that.form).then(response => {
//console.log(response)
this.$Message.success('操作成功');
that.load();
that.dialogFormVisible = false;
}).catch(error => {
//reject(error)
})
}
that.fileList = [];
} else {
this.$Message.error('数据校验失败');
console.log('error submit!!');
return false;
}
});
},
handleRemove(file, fileList) {
let listUrl = [];
for (var m of fileList) {
if (m.response)
listUrl.push({
"upload_id": m.response.id
});
else
listUrl.push({
"upload_id": m.id
});
}
this.form.file_list = listUrl;
},
handleExceed(files, fileList) {},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }`);
},
handlesuccess(response, file, fileList) {
let listUrl = [];
for (var m of fileList) {
if (m.response)
listUrl.push({
"upload_id": m.response.id
});
else
listUrl.push({
"upload_id": m.id
});
}
this.form.file_list = listUrl;
},
resetForm(formName) {
var that = this;
that.fileList = [];
that.peoplesshow = [];
this.$refs[formName].resetFields();
that.dialogFormVisible = false;
that.dialogShowFormVisible = false
},
}
}
</script>
<style>
.dialogConcent {
overflow-y: auto;
}
.form-sub-title {
padding: 20px 0px;
}
</style>