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.

547 lines
19 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="load" 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" label="序号"> </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 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=='host_person'">
<div v-for="item in userOptions">
<div v-if='scope.row[column.field]==item.id'>
{{item.name}}
</div>
</div>
</div>
<div v-else-if="column.type=='record_person'">
<div v-for="item in userOptions">
<div v-if='scope.row[column.field]==item.id'>
{{item.name}}
</div>
</div>
</div>
<div v-else-if="column.type=='format'">
<div v-if="column.field=='admin'">
{{scope.row[column.field]?scope.row[column.field].name:""}}
</div>
<div v-if="column.field=='department'">
{{scope.row[column.field]?scope.row[column.field].name:""}}
</div>
</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="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-position="right" :label-width="formLabelWidth">
<el-form-item label="会议名称" prop="name">
<el-input v-model="form.name" placeholder="请填写会议名称" autocomplete="off"></el-input>
</el-form-item>
<el-row>
<el-col :span="8">
<el-form-item label="会议时间" prop="meet_time" label-position="right">
<el-date-picker style="width:100%" v-model="form.meet_time" type="datetime" placeholder="选择会议时间"
format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8" :offset="8">
<el-form-item label="会议主持人" prop="host_person" class="">
<el-select v-model="form.host_person" placeholder="请选择会议主持人" style="width: 100%">
<el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="会议地点" prop="address" label-position="right">
<el-input v-model="form.address" placeholder="请填写会议地点" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8" :offset="8">
<el-form-item label="会议记录人" prop="record_person" class="">
<el-select v-model="form.record_person" placeholder="请选择会议记录人" style="width: 100%">
<el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="附件" prop="files_list">
<el-upload class="upload-demo" :on-success="handlesuccess" :data="uploadOther" :action="action"
: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>
<div style="padding: 20px 0px;" class="form-sub-title">
<span>参会人员
</span>
</div>
<div class="table-tree tableswidth">
<div style="display: flex;justify-content: flex-end;margin-right: 20px;margin-bottom: 10px;">
<Button type="primary" @click="addRow()" size="small" style="margin-left: 10px;" ghost>新增</Button>
</div>
<el-table :data="this.form.joins_list" height="400" class="v-table"
style="width: 100%;margin-bottom: 20px;">
<el-table-column type="index" align="center" label="序号">
</el-table-column>
<el-table-column prop="admin_id" label="参与人员" width="220px">
<template slot-scope="scope">
<el-select v-model="scope.row.admin_id" placeholder="请选择参与人员" style="width: 100%">
<el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="status" align="center" label="状态" width="200px">
<template slot-scope="scope">
<el-select v-model="scope.row.status" placeholder="请选择到会状态" style="width: 100%">
<el-option v-for="item in meetStatus" :key="item.id" :label="item.value" :value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="reason" align="center" label="缺席原因">
<template slot-scope="scope">
<el-input v-model="scope.row.reason" />
</el-input>
</template>
</el-table-column>
<el-table-column label="操作" width="120px" align="center">
<template slot-scope="scope">
<Button type="error" @click="delRow(scope.$index)" size="small" style="margin-left: 10px;"
ghost>删除</Button>
</template>
</el-table-column>
</el-table>
</div>
<el-row>
<el-col :span="8">
<el-form-item label="应到人数" prop="should_count" label-position="right">
<el-input v-model="form.should_count" placeholder="请填写应到人数" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8" :offset="8">
<el-form-item label="实到人数" prop="reality_count" class="">
<el-input v-model="form.reality_count" placeholder="请填写实到人数" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="会议内容" prop="content">
<div style="width: 99.9%;">
<tinymce v-model="form.content" :height="300" />
</div>
</el-form-item>
</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 Tinymce from '@/components/Tinymce'
import {
save,
store,
del,
get,
listtask
} from "../../api/objective/meet.js";
import {
getparameteritem
} from "../../api/system/dictionary.js";
import {
listCommonuser
} from "../../api/common.js";
export default {
components: {
LxHeader,
Tinymce
},
data() {
return {
action: `${process.env.VUE_APP_BASE_API}/api/admin/upload-file`,
checkAll: false,
isIndeterminate: true,
infoFormVisible: false,
parameters: {
safetyStatus: []
},
paginations: {
page: 1,
page_size: 15,
total: 0
},
tableHeight: 0,
dialogFormVisible: false,
formLabelWidth: "120px",
clientHeight: 0,
form: {
name: "",
meet_time: "",
host_person: "",
record_person: "",
address: "",
reality_count: "",
should_count: "",
content: "",
files_list: "",
joins_list: [{
admin_id: "",
status: "",
reason: "",
}],
},
//查询条件字段
searchFields: {
KeyWord: ""
},
fileList: [],
joins_list: [],
tableData: [],
rules: {
name: [{
required: true,
message: '请填写会议名称',
trigger: 'blur'
}],
// address: [{
// message: '请选择会议时间',
// trigger: 'blur'
// }],
// date: [{
// message: '请选择会议主持人',
// trigger: 'blur'
// }],
// build_unit: [{
// message: '请填写会议地点',
// trigger: 'blur'
// }],
// carry_unit: [{
// message: '请填写施工单位',
// trigger: 'blur'
// }],
// remark: [{
// message: '请填写会议记录人',
// trigger: 'blur'
// }],
},
columns: [{
field: "name",
title: "会议名称",
type: "string",
align: "left",
width: 240,
},
{
field: "meet_time",
title: "会议时间",
type: "string",
width: 180,
align: "center"
},
{
field: "host_person",
title: "主持人",
type: "host_person",
align: "center",
width: 120,
},
{
field: "record_person",
title: "记录人",
type: "record_person",
align: "center",
width: 120,
},
{
field: "address",
title: "地点",
type: "string",
align: "left",
width: 240,
},
{
field: "created_at",
title: "创建时间",
type: "string",
width: 180,
align: "center"
},
{
field: "admin",
title: "创建人",
type: "format",
width: 120,
align: "center"
},
{
field: "department",
title: "创建人科室",
type: "format",
width: 120,
align: "center"
},
{
field: "操作",
title: "操作",
width: 220,
type: "opt",
fixed: "right"
}
],
uploadOther: {
token: ""
},
userOptions: [],
meetStatus: [{
id: 1,
value: "正常"
}, {
id: 2,
value: "缺席"
}, {
id: 3,
value: "迟到"
}]
}
},
created() {
this.uploadOther.token = getToken();
this.loadUserOptions();
this.initLoad();
this.load();
},
methods: {
loadUserOptions() {
listCommonuser({page:1,page_size:200}).
then((res) => {
this.userOptions = res.data;
}).catch(error => {
console.log(error)
reject(error)
})
},
addRow() {
var len = this.form.joins_list.length;
this.form.joins_list.push({
admin_id: "",
status: "",
reason: "",
});
},
delRow(index) {
this.form.joins_list.splice(index, 1);
},
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;
//加载自定义参数
getparameteritem("safetyStatus").then(res => {
this.parameters.safetyStatus = res.detail;
});
},
handleCurrentChange(page) {
this.paginations.page = page;
this.load();
},
load() {
listtask({
page: this.paginations.page,
page_size: this.paginations.page_size,
keyword: this.searchFields.KeyWord
}).then(response => {
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.meet_files) {
let m = Object.assign({}, mod["files"]);
m.name = mod["files"].original_name;
_files.push(m);
}
that.fileList = _files;
that.form.joins_list = result.joins;
that.form.host_person = result.host_person.id;
that.form.record_person = result.record_person.id;
}).catch(error => {
//reject(error)
})
},
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;
},
submitForm(formName) {
var that = this;
this.$refs[formName].validate((valid) => {
if (valid) {
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;
}).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)
})
}
} 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.files_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.files_list = listUrl;
},
resetForm(formName) {
var that = this;
this.fileList = [];
this.$refs[formName].resetFields();
that.dialogFormVisible = false;
},
}
}
</script>
<style>
.dialogConcent {
overflow-y: auto;
}
</style>