Files
dvcp_v2_webapp/packages/wechat/AppDispatchManagement/components/Add.vue
aixianling a8dff862d2 初始化
2021-12-14 18:36:19 +08:00

388 lines
12 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<section class="managementDetail">
<ai-detail>
<template #title>
<ai-title title="公文登记" isShowBottomBorder isShowBack @onBackClick="cancel(true)"/>
</template>
<template #content>
<ai-card title="公文信息">
<template slot="content">
<div class="form_div mar-t16">
<el-form
ref="rules"
:model="form"
:rules="formRules"
size="small"
label-suffix=""
label-width="100px"
>
<el-form-item label="公文名称" prop="documentName">
<el-input
v-model="form.documentName"
placeholder="请输入..."
maxlength="50"
></el-input>
</el-form-item>
<div class="above">
<div class="left">
<el-form-item label="公文编号" prop="documentCode">
<el-input
v-model="form.documentCode"
placeholder="请输入..."
maxlength="50"
></el-input>
</el-form-item>
</div>
<div class="right">
<el-form-item label="公文类型" prop="documentType">
<el-select
v-model="form.documentType"
placeholder="请选择..."
clearable
>
<el-option
v-for="(item, i) in dict.getDict('officialDocumentName')"
:key="i"
:label="item.dictName"
:value="item.dictValue"
></el-option>
</el-select>
</el-form-item>
</div>
</div>
<div class="above">
<div class="left">
<el-form-item label="保密等级">
<el-select
v-model="form.confidentialityLevel"
placeholder="请选择..."
clearable
>
<el-option
v-for="(item, i) in dict.getDict('officialDocumentConfidentialityLevel')"
:key="i"
:label="item.dictName"
:value="item.dictValue"
></el-option>
</el-select>
</el-form-item>
</div>
<div class="right">
<el-form-item label="阅示类型" prop="readType">
<el-select @change="readTypeChange"
v-model="form.readType"
placeholder="请选择..."
clearable
>
<el-option
v-for="(item, i) in dict.getDict('officialDocumentReadType')"
:key="i"
:label="item.dictName"
:value="item.dictValue"
></el-option>
</el-select>
</el-form-item>
</div>
</div>
<div class="above">
<div class="left">
<el-form-item label="紧急程度">
<el-select
v-model="form.emergencyLevel"
placeholder="请选择..."
clearable
>
<el-option
v-for="(item, i) in dict.getDict('officialDocumentEmergencyLevel')"
:key="i"
:label="item.dictName"
:value="item.dictValue"
></el-option>
</el-select>
</el-form-item>
</div>
</div>
<div class="above">
<div class="left">
<el-form-item label="发文机关">
<el-input
v-model="form.issuingUnit"
placeholder="请输入..."
maxlength="50"
></el-input>
</el-form-item>
</div>
<div class="right">
<el-form-item label="发文字号">
<el-input
v-model="form.issuingFont"
placeholder="请输入..."
maxlength="50"
></el-input>
</el-form-item>
</div>
</div>
<div class="above">
<div class="left">
<el-form-item label="签发人">
<el-input
v-model="form.signer"
placeholder="请输入..."
maxlength="50"
></el-input>
</el-form-item>
</div>
</div>
<el-form-item label="备注">
<el-input
v-model="form.remark"
type="textarea"
:rows="5"
maxlength="200"
show-word-limit
placeholder="请输入..."
></el-input>
</el-form-item>
<el-form-item label="附件">
<div class="upload">
<ai-uploader :instance="instance" v-model="form.files" fileType="file" :limit="9" @change="onChange"></ai-uploader>
</div>
</el-form-item>
</el-form>
</div>
</template>
</ai-card>
<ai-card title="流转信息">
<template #content>
<span class="form-label">流转对象</span>
<div class="user-content">
<ai-wechat-selecter slot="append" :instance="instance" v-model="form.flowUsers" isShowUser :isMultiple="isMultiple"></ai-wechat-selecter>
</div>
</template>
</ai-card>
</template>
<template #footer>
<el-button class="delete-btn footer-btn" @click="cancel(true)">取消</el-button>
<el-button class="footer-btn" type="primary" @click="save('rules', '1')">保存并流转</el-button>
<el-button class="footer-btn" @click="save('rules', '0')">保存</el-button>
</template>
</ai-detail>
</section>
</template>
<script>
export default {
name: "managementDetail",
props: {
instance: Function,
dict: Object,
permissions: Function,
params: Object
},
data() {
return {
form: {
documentName: '',
documentCode: '',
documentType: '',
confidentialityLevel: '',
readType: '',
emergencyLevel: '',
issuingTime: '',
issuingUnit: '',
issuingFont: '',
signer: '',
overDescription: '',
overTime: '',
deliver: '',
remark: '',
files: [],
fileIds: [],
flowUsers: [],
},
isMultiple: true,
};
},
computed: {
formRules(){
return {
documentName: [{required: true, message: "请输入公文名称", trigger: 'change' }],
documentCode: [{required: true, message: "请输入公文编号", trigger: 'change' }],
documentType: [{required: true, message: "请选择公文类型", trigger: 'change' }],
readType: [{required: true, message: "请选择阅示类型", trigger: 'change' }],
}
},
colConfigs(){
return [
{
prop: 'meetingUserName',
align: 'center',
label: '姓名',
},
{
prop: 'meetingUserPhone',
align: 'center',
label: '手机号码',
},
{
prop: 'meetingUnitName',
align: 'center',
label: '所属部门',
},
{
slot: 'joinStatus',
},
{
slot: 'option',
}
]
},
},
created() {
this.dict.load('issuingUnit','officialDocumentEmergencyLevel', 'officialDocumentReadType', 'officialDocumentConfidentialityLevel', 'officialDocumentName');
},
mounted() {
if(this.params.id) {
this.getDetail()
}
},
methods: {
onChange() {
},
readTypeChange() {
if(this.form.readType == 0) {
this.isMultiple = false
if(this.form.flowUsers.length > 1) {
this.form.flowUsers = []
}
}else {
this.isMultiple = true
}
},
getDetail() {
this.instance.post(`/app/appofficialdocumentinfo/queryDetailById?id=${this.params.id}&flag=0`, null).then((res) => {
if (res.code == 0) {
this.form = {...res.data}
this.form.files = this.form.files || []
}
});
},
save(formName, status){
this.$refs[formName].validate((valid) => {
if (valid) {
this.submit(status)
} else {
return false;
}
});
},
submit(status) {
var flowUsers = []
this.form.flowUsers.map(item => {
var info = {
flowUserId: item.id,
flowUserName: item.name,
avatar: item.avatar
}
flowUsers.push(info)
})
this.form.fileIds = []
if(this.form.files.length) {
this.form.files.map((item) => {
this.form.fileIds.push(item.id)
})
}
this.instance.post(`/app/appofficialdocumentinfo/addOrUpdate`, {
...this.form,
status: status,
flowUsers: flowUsers
}, null).then((res) => {
if (res.code == 0) {
if(this.params.id){
this.$message.success("编辑成功");
}else{
this.$message.success("提交成功");
}
this.cancel(true)
}
});
},
cancel(isRefresh) {
this.$emit('change', {
type: 'list',
isRefresh: !!isRefresh
})
},
downFileAll () {
if (this.form.files.length > 0) {
this.instance.post('/app/appofficialdocumentinfo/downLoadAllFileForDetail', null, {
responseType: 'blob',
params: {
id: this.form.id
}
}).then((res) => {
const link = document.createElement('a')
let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
var num = ''
for (let i = 0; i < 10; i++) {
num += Math.ceil(Math.random() * 10)
}
link.setAttribute('download', '公文文件' + '.zip')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
})
} else {
this.$message.error('暂无附件提供下载')
}
},
},
};
</script>
<style lang="scss" scoped>
.managementDetail {
height: 100%;
overflow: auto;
background: #f3f6f9;
.above{
overflow: hidden;
width: 100%;
.left{
width: 50%;
float: left;
}
.right{
width: 50%;
float: right;
}
.el-select{
width: 100%;
}
.el-date-editor.el-input{
width: 100%;
}
}
.iconEdit,.Edit{
color:#5088FF;
font-size: 12px;
cursor: pointer;
padding-left: 8px;
}
.form-label{
display: inline-block;
width: 100px;
color: #666;
font-size: 14px;
text-align: right;
}
.user-content{
display: inline-block;
width: calc(100% - 100px);
}
}
</style>