139 lines
		
	
	
		
			4.5 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			139 lines
		
	
	
		
			4.5 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <ai-detail class="content-add">
 | |
|     <template slot="title">
 | |
|       <ai-title :title="params.id ? '编辑公示' : '添加公示'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
 | |
|       </ai-title>
 | |
|     </template>
 | |
|     <template slot="content">
 | |
|       <ai-card title="基本信息">
 | |
|         <template #content>
 | |
|           <el-form class="ai-form" :model="form" label-width="120px" ref="form">
 | |
|             <el-form-item label="所属网格" prop="girdId" style="width: 100%;" :rules="[{ required: true, message: '请选择所属网格', trigger: 'change' }]">
 | |
|               <ai-picker :ops="{label: 'girdName'}" :instance="instance" v-model="form.girdId" @pick="e => onUserChange(e)" dialogTitle="选择所属网格" action="/app/appgirdinfo/girdList">
 | |
|                 <div class="time-select">
 | |
|                   <span class="dept-name" style="color:#999;" v-if="!form.girdName">选择所属网格</span>
 | |
|                   <span class="dept-name" v-else>{{ form.girdName }}</span>
 | |
|                   <i class="el-icon-arrow-down"></i>
 | |
|                 </div>
 | |
|               </ai-picker>
 | |
|             </el-form-item>
 | |
|             <el-form-item label="一类" prop="classOne" style="width: 100%;" :rules="[{required: true, message: '请输入一类', trigger: 'change'}]">
 | |
|               <el-input placeholder="请输入一类" size="small" v-model="form.classOne"></el-input>
 | |
|             </el-form-item>
 | |
|             <el-form-item label="二类" prop="classTwo" style="width: 100%;" :rules="[{required: true, message: '请输入二类', trigger: 'change'}]">
 | |
|               <el-input placeholder="请输入二类" size="small" v-model="form.classTwo"></el-input>
 | |
|             </el-form-item>
 | |
|             <el-form-item label="三类" prop="classThree" style="width: 100%;" :rules="[{required: true, message: '请输入三类', trigger: 'change'}]">
 | |
|               <el-input placeholder="请输入三类" size="small" v-model="form.classThree"></el-input>
 | |
|             </el-form-item>
 | |
|             <el-form-item label="分值" prop="integral" style="width: 100%;" :rules="[{required: true, message: '请输入分值', trigger: 'change'}]">
 | |
|               <el-input-number v-model="form.integral" :min="0"></el-input-number>
 | |
|             </el-form-item>
 | |
|           </el-form>
 | |
|         </template>
 | |
|       </ai-card>
 | |
|     </template>
 | |
|     <template #footer>
 | |
|       <el-button @click="cancel">取消</el-button>
 | |
|       <el-button type="primary" @click="confirm">提交</el-button>
 | |
|     </template>
 | |
|   </ai-detail>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
|   import { mapState } from 'vuex'
 | |
|   export default {
 | |
|     name: 'Add',
 | |
| 
 | |
|     props: {
 | |
|       instance: Function,
 | |
|       dict: Object,
 | |
|       params: Object
 | |
|     },
 | |
|     data () {
 | |
|       return {
 | |
|         form: {
 | |
|           classOne: '',
 | |
|           classThree: '',
 | |
|           classTwo: '',
 | |
|           girdId: '',
 | |
|           girdName: '',
 | |
|           integral: ''
 | |
|         },
 | |
|         id: ''
 | |
|       }
 | |
|     },
 | |
| 
 | |
|     created () {
 | |
|       if (this.params && this.params.id) {
 | |
|         this.id = this.params.id
 | |
|         this.getInfo(this.params.id)
 | |
|       }
 | |
|     },
 | |
| 
 | |
|     methods: {
 | |
|       getInfo (id) {
 | |
|         this.instance.post(`/app/appintegralpublicityinfo/queryDetailById?id=${id}`).then(res => {
 | |
|           if (res.code === 0) {
 | |
|             this.form = {
 | |
|               ...res.data,
 | |
|               girdId: [res.data.girdId]
 | |
|             }
 | |
|           }
 | |
|         })
 | |
|       },
 | |
| 
 | |
|       confirm () {
 | |
|         this.$refs.form.validate((valid) => {
 | |
|           if (valid) {
 | |
|             this.isFlag = true
 | |
|             this.instance.post(`/app/appintegralpublicityinfo/addOrUpdate`, {
 | |
|               ...this.form,
 | |
|               girdId: this.form.girdId[0]
 | |
|             }).then(res => {
 | |
|               if (res.code == 0) {
 | |
|                 this.$message.success('提交成功')
 | |
|                 setTimeout(() => {
 | |
|                   this.cancel(true)
 | |
|                 }, 600)
 | |
|               }
 | |
|             })
 | |
|           }
 | |
|         })
 | |
|       },
 | |
| 
 | |
|       cancel (isRefresh) {
 | |
|         this.$emit('change', {
 | |
|           type: 'List',
 | |
|           isRefresh: !!isRefresh
 | |
|         })
 | |
|       },
 | |
| 
 | |
|       onUserChange (e) {
 | |
|         if (e.length) {
 | |
|           this.form.girdName = e[0].girdName
 | |
|         } else {
 | |
|           this.form.girdId = []
 | |
|           this.form.girdName = ''
 | |
|         }
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| </script>
 | |
| 
 | |
| <style scoped lang="scss">
 | |
|   .time-select {
 | |
|     padding: 0 16px;
 | |
|     height: 36px;
 | |
|     line-height: 36px;
 | |
|     border: 1px solid #d0d4dc;
 | |
|     border-radius: 4px;
 | |
|     display: flex;
 | |
|     justify-content: space-between;
 | |
|     cursor: pointer;
 | |
|     .el-icon-arrow-down {
 | |
|       line-height: 36px;
 | |
|     }
 | |
|   }
 | |
| </style>
 |