132 lines
		
	
	
		
			4.2 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			132 lines
		
	
	
		
			4.2 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | ||
|   <section class="base-info">
 | ||
|     <ai-title title="基本信息"/>
 | ||
|     <el-form :model="form" :rules="rules" ref="baseInfoForm" label-suffix=":" label-width="100px">
 | ||
|       <el-form-item label="事项名称" prop="processName">
 | ||
|         <el-input v-model.trim="form.processName" size="small" clearable placeholder="请输入事项名称" :maxlength="30"
 | ||
|                   show-word-limit/>
 | ||
|       </el-form-item>
 | ||
|       <el-row type="type" justify="space-between" :gutter="20">
 | ||
|         <el-col :span="12">
 | ||
|           <el-form-item label="所属部门" prop="department">
 | ||
|             <el-select placeholder="请选择" size="small" v-model="form.department" clearable style="width: 100%;">
 | ||
|               <el-option
 | ||
|                   v-for="(item,i) in dict.getDict('hbDepartment')" :key="i"
 | ||
|                   :label="item.dictName"
 | ||
|                   :value="item.dictValue">
 | ||
|               </el-option>
 | ||
|             </el-select>
 | ||
|           </el-form-item>
 | ||
|         </el-col>
 | ||
|         <el-col :span="12">
 | ||
|           <el-form-item label="所属分类" prop="classificationId">
 | ||
|             <el-select placeholder="请选择" size="small" v-model="form.classificationId" clearable style="width: 100%;">
 | ||
|               <el-option
 | ||
|                   v-for="(item,i) in classList" :key="i"
 | ||
|                   :label="item.name"
 | ||
|                   :value="item.id">
 | ||
|               </el-option>
 | ||
|             </el-select>
 | ||
|           </el-form-item>
 | ||
|         </el-col>
 | ||
|       </el-row>
 | ||
|       <el-form-item label="办结时限" prop="timeLimit">
 | ||
|         <el-input v-model.trim="form.timeLimit" oninput="value=value.replace(/[^\d]/g,'')" size="small" clearable
 | ||
|                   placeholder="请输入天数" style="width: 270px;"/>
 | ||
|       </el-form-item>
 | ||
|       <el-form-item label="办理须知" prop="needToKnow">
 | ||
|         <ai-editor v-model.trim="form.needToKnow" :instance="instance"/>
 | ||
|       </el-form-item>
 | ||
|       <el-form-item label="是否启用" prop="processDefStatus">
 | ||
|         <el-switch v-model="form.processDefStatus"
 | ||
|           active-color="#5088FF" inactive-color="#D0D4DC" active-value="1" inactive-value="0">
 | ||
|         </el-switch>
 | ||
|       </el-form-item>
 | ||
|     </el-form>
 | ||
|   </section>
 | ||
| </template>
 | ||
| 
 | ||
| <script>
 | ||
| 
 | ||
| export default {
 | ||
|   name: "baseInfo",
 | ||
|   inject: ['config'],
 | ||
|   props: {
 | ||
|     instance: Function,
 | ||
|     dict: Object,
 | ||
|   },
 | ||
|   data() {
 | ||
|     const validTimeLimit = (rule, value, callback) =>{
 | ||
|       if(!value){
 | ||
|         return callback(new Error('请输入办结时限'));
 | ||
|       }else {
 | ||
|         if(+value<=0){
 | ||
|           return callback(new Error('最小值为1'));
 | ||
|         }
 | ||
|         callback();
 | ||
|       }
 | ||
|     }
 | ||
|     return {
 | ||
|       form: {
 | ||
|         processName: "",
 | ||
|         department: "",
 | ||
|         classificationId: "",
 | ||
|         timeLimit: "",
 | ||
|         needToKnow: "",
 | ||
|         processDefStatus: "1",
 | ||
|       },
 | ||
|       classList: [],
 | ||
|       rules:{
 | ||
|         processName: [{required: true, message: '请输入事项名称', trigger: 'blur'}],
 | ||
|         department: [{required: true, message: '请选择所属部门', trigger: 'change'}],
 | ||
|         classificationId: [{required: true, message: '请选择所属分类', trigger: 'change'}],
 | ||
|         timeLimit: [{required: true,validator:validTimeLimit ,trigger: 'blur'}],
 | ||
|         needToKnow: [{required: true, message: '请输入办理须知', trigger: 'blur'}],
 | ||
|         processDefStatus: [{required: true, message: '请选择是否启用', trigger: 'change'}],
 | ||
|       }
 | ||
|     }
 | ||
|   },
 | ||
|   methods: {
 | ||
|     banseInfoForm() {
 | ||
|       return new Promise((resolve, reject) => {
 | ||
|         this.$refs['baseInfoForm'].validate(valid => {
 | ||
|           if (valid) {
 | ||
|             resolve(this.form)
 | ||
|           } else {
 | ||
|             reject(false)
 | ||
|           }
 | ||
|         })
 | ||
|       })
 | ||
|     },
 | ||
|     /**
 | ||
|      * 获取分类
 | ||
|      */
 | ||
|     getClassification() {
 | ||
|       this.instance.post(`/zwspapprovalclassification/list`, null, {
 | ||
|         current: 1,
 | ||
|         size: 9999
 | ||
|       }).then(res => {
 | ||
|         if (res?.data) {
 | ||
|           this.classList = res.data.records
 | ||
|         }
 | ||
|       })
 | ||
|     }
 | ||
|   },
 | ||
|   created() {
 | ||
|     this.getClassification()
 | ||
|     if (this.config.detailObj?.id) {
 | ||
|       Object.keys(this.form).map(e => this.form[e] = this.config.detailObj[e])
 | ||
|     }
 | ||
|   }
 | ||
| }
 | ||
| </script>
 | ||
| 
 | ||
| <style lang="scss" scoped>
 | ||
| .base-info {
 | ||
|   .iconAudit {
 | ||
|     font-size: 36px;
 | ||
|     color: #3D94FB;
 | ||
|   }
 | ||
| }
 | ||
| </style>
 |