<template>
|
<div class="container">
|
<div class="title" v-if="!editId">
|
新建商务日志
|
<span class="back" @click="back" v-if="!meetingId"> <i class="iconfont icon-fanhui"></i> 返回 </span>
|
</div>
|
<div class="title" v-else>
|
<span>修改商务日志</span>
|
<span class="back" @click="back" v-if="!meetingId"> <i class="iconfont icon-fanhui"></i> 返回 </span>
|
</div>
|
|
<div class="wrap">
|
<el-row>
|
<el-col :lg="16" :md="20" :sm="24" :xs="24">
|
<el-form :model="businessDaily" status-icon ref="form" label-width="auto" @submit.prevent :rules="rules">
|
<el-form-item label="所属项目" prop="project_id">
|
<el-select v-model="businessDaily.project_id" placeholder="所属项目" clearable filterable>
|
<el-option v-for="item in projectInfoArr" :key="item.id" :label="item.project_name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="会议日期" prop="business_date">
|
<el-date-picker
|
v-model="businessDaily.business_date"
|
type="date"
|
placeholder="请输入会议日期"
|
size="default"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
/>
|
</el-form-item>
|
|
<el-form-item label="会议时间" prop="date_range">
|
<el-date-picker
|
v-model="businessDaily.date_range"
|
type="daterange"
|
range-separator="到"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
/>
|
</el-form-item>
|
<el-form-item label="负责人" prop="user_ids">
|
<el-select v-model="businessDaily.user_ids" placeholder="负责人" clearable filterable multiple>
|
<el-option v-for="item in userList" :key="item.id" :label="item.nickname" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="会议内容" prop="business_content">
|
<div class="lin-wrap">
|
<tinymce @change="handleContentChange" :defaultContent="businessDaily.business_content" />
|
</div>
|
</el-form-item>
|
|
<el-form-item label="甘特图" prop="gante_img_list">
|
<upload-imgs
|
ref="ganteImgRef"
|
:value="gante_img_list"
|
:rules="ganteRules"
|
:multiple="false"
|
:min-num="0"
|
:max-num="1"
|
/>
|
</el-form-item>
|
|
<el-form-item label="备注" prop="remark">
|
<el-input
|
type="textarea"
|
:autosize="{ minRows: 4, maxRows: 8 }"
|
placeholder="请输入备注"
|
v-model="businessDaily.remark"
|
>
|
</el-input>
|
</el-form-item>
|
|
<el-form-item class="submit">
|
<el-button type="primary" @click="submitForm">保 存</el-button>
|
<el-button @click="resetForm">重 置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { reactive, ref, onMounted, computed } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import ProjectInfo from '@/model/projectInfo'
|
import ProjectDaily from '@/model/projectDaily'
|
import sysDictItemModel from '@/model/sysDictItem'
|
import BusinessDaily from '@/model/businessDaily'
|
import Tinymce from '@/component/base/tinymce'
|
import dayjs from 'dayjs'
|
import UploadImgs from '@/component/base/upload-image'
|
import { camelToSnake, camelToSnakeObj, snakeToCamelObj } from '@/utils/camelToSnake'
|
|
export default {
|
components: {
|
Tinymce,
|
UploadImgs,
|
},
|
props: {
|
editId: {
|
type: String,
|
default: null,
|
},
|
meetingId: {
|
type: String,
|
default: null,
|
},
|
},
|
setup(props, context) {
|
console.log('props')
|
console.log(props)
|
|
const form = ref(null)
|
const loading = ref(false)
|
const business_content = ref(null)
|
const userList = ref([])
|
|
const businessDaily = reactive({
|
id: '',
|
project_id: '',
|
business_date: `${dayjs().format('YYYY-MM-DD')} 00:00:00`,
|
business_content: '',
|
remark: '',
|
date_range: [],
|
business_start_time: '',
|
business_end_time: '',
|
user_ids: [],
|
meeting_id: '',
|
businessDaily: [],
|
})
|
|
businessDaily.meeting_id = props.meetingId
|
|
const projectInfoArr = ref([])
|
|
const listAssign = (a, b) => Object.keys(a).forEach(key => {
|
a[key] = b[key] || a[key]
|
})
|
|
/**
|
* 表单规则验证
|
*/
|
const { rules } = getRules()
|
|
onMounted(() => {
|
if (props.editId) {
|
getBusinessDaily()
|
}
|
loadDictDitems()
|
})
|
|
// 根据字典类型查询字典
|
const loadDictDitems = async () => {
|
projectInfoArr.value = await ProjectInfo.getProjectInfoList({})
|
// 获取所有用户信息
|
userList.value = await ProjectDaily.getAllUsers()
|
}
|
|
const getBusinessDaily = async () => {
|
loading.value = true
|
const res = await BusinessDaily.getBusinessDaily(props.editId)
|
// businessDaily=res
|
listAssign(businessDaily, res)
|
|
const tmp_date_range = []
|
tmp_date_range.push(res.business_start_time)
|
tmp_date_range.push(res.business_end_time)
|
businessDaily.date_range = tmp_date_range
|
|
// 甘特圖转成驼峰
|
gante_img_list.value = snakeToCamelObj(res.gante_img_list)
|
|
loading.value = false
|
}
|
|
// 重置表单
|
const resetForm = () => {
|
form.value.resetFields()
|
}
|
|
const submitForm = async formName => {
|
// 甘特图图片
|
businessDaily.gante_img_list = []
|
const gante_img_list_tmp = await ganteImgRef.value.getValue()
|
if (gante_img_list_tmp) {
|
businessDaily.gante_img_list = camelToSnakeObj(gante_img_list_tmp)
|
}
|
|
// businessDaily.gante_img_list=await ganteImgRef.value.getValue()
|
form.value.validate(async valid => {
|
if (valid) {
|
let res = {}
|
businessDaily.business_start_time = businessDaily.date_range[0]
|
businessDaily.business_end_time = businessDaily.date_range[1]
|
if (props.editId) {
|
res = await BusinessDaily.editBusinessDaily(props.editId, businessDaily)
|
context.emit('editClose')
|
} else {
|
res = await BusinessDaily.createBusinessDaily(businessDaily)
|
resetForm(formName)
|
if (props.meetingId) {
|
context.emit('editClose')
|
}
|
}
|
if (res.code < window.MAX_SUCCESS_CODE) {
|
ElMessage.success(`${res.message}`)
|
}
|
} else {
|
console.error('error submit!!')
|
ElMessage.error('请将信息填写完整')
|
}
|
})
|
}
|
|
const back = () => {
|
context.emit('editClose')
|
}
|
|
const handleContentChange = val => {
|
businessDaily.business_content = val
|
}
|
|
// 甘特图
|
const gante_img_list = ref([])
|
const ganteImgRef = ref(null)
|
const ganteRules = {
|
// maxSize: 5,
|
// minWidth: 100,
|
// minHeight: 100,
|
}
|
|
return {
|
back,
|
businessDaily,
|
form,
|
rules,
|
resetForm,
|
submitForm,
|
|
projectInfoArr,
|
business_content,
|
handleContentChange,
|
userList,
|
|
// 追加甘特图相关
|
ganteImgRef,
|
ganteRules,
|
gante_img_list,
|
}
|
},
|
}
|
|
/**
|
* 表单验证规则
|
*/
|
function getRules() {
|
/**
|
* 验证回调函数
|
*/
|
const checkInfo = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error('信息不能为空'))
|
}
|
callback()
|
}
|
const rules = {
|
project_id: [{ message: '项目不能为空', trigger: 'blur', required: true }],
|
business_date: [{ message: '会议日期不能为空', trigger: 'blur', required: true }],
|
date_range: [{ message: '会议时间不能为空', trigger: 'blur', required: true }],
|
business_content: [{ message: '会议内容不能为空', trigger: 'blur', required: true }],
|
user_ids: [{ message: '项目负责人不能为空', trigger: 'blur', required: true }],
|
}
|
return { rules }
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
.title {
|
height: 59px;
|
line-height: 59px;
|
color: $parent-title-color;
|
font-size: 16px;
|
font-weight: 500;
|
text-indent: 40px;
|
border-bottom: 1px solid #dae1ec;
|
|
.back {
|
float: right;
|
margin-right: 40px;
|
cursor: pointer;
|
}
|
}
|
|
.wrap {
|
padding: 20px;
|
}
|
|
.submit {
|
float: left;
|
}
|
}
|
</style>
|
