388 lines
		
	
	
		
			12 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			388 lines
		
	
	
		
			12 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <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> |