143 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			143 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <ai-detail>
 | |
|     <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 ref="form" class="ai-form" :model="form" label-width="110px" label-position="right">
 | |
|             <el-form-item label="服务区域" style="width: 100%;" prop="codeName">
 | |
|               <span style="color: #666;">{{ form.areaName }}</span>
 | |
|             </el-form-item>
 | |
|             <el-form-item style="width: 100%" label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
 | |
|               <el-input size="small" placeholder="请输入姓名" v-model="form.name"></el-input>
 | |
|             </el-form-item>
 | |
|             <el-form-item style="width: 100%" label="电话" prop="phone" :rules="[{ required: true, message: '请输入电话', trigger: 'blur' }]">
 | |
|               <el-input size="small" placeholder="请输入电话" maxlength="20" v-model="form.phone"></el-input>
 | |
|             </el-form-item>
 | |
|             <el-form-item style="width: 100%;" label="是否公开" prop="isPublic" :rules="[{ required: true, message: '请选择是否公开', trigger: 'change' }]">
 | |
|               <el-radio-group v-model="form.isPublic">
 | |
|                 <el-radio label="1">是</el-radio>
 | |
|                 <el-radio label="0">否</el-radio>
 | |
|               </el-radio-group>
 | |
|             </el-form-item>
 | |
|             <el-form-item label="图片" style="width: 100%;" prop="picture">
 | |
|               <ai-uploader
 | |
|                 :instance="instance"
 | |
|                 isShowTip
 | |
|                 v-model="form.picture"
 | |
|                 :limit="1">
 | |
|               </ai-uploader>
 | |
|             </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>
 | |
|   export default {
 | |
|     name: 'Add',
 | |
| 
 | |
|     props: {
 | |
|       instance: Function,
 | |
|       dict: Object,
 | |
|       params: Object
 | |
|     },
 | |
| 
 | |
|     data () {
 | |
|       return {
 | |
|         info: {},
 | |
|         form: {
 | |
|           areaId: '',
 | |
|           name: '',
 | |
|           areaName: '',
 | |
|           phone: '',
 | |
|           picture: [],
 | |
|           isPublic: '1'
 | |
|         },
 | |
|         id: '',
 | |
|         areaList: []
 | |
|       }
 | |
|     },
 | |
| 
 | |
|     created () {
 | |
|       this.getAreaList()
 | |
| 
 | |
|       if (this.params && this.params.areaId && !this.params.id) {
 | |
|         this.form.areaId = this.params.areaId
 | |
|         this.form.areaName = this.params.areaName
 | |
|       }
 | |
| 
 | |
|       if (this.params && this.params.id) {
 | |
|         this.id = this.params.id
 | |
|         this.getInfo(this.params.id)
 | |
|       }
 | |
|     },
 | |
| 
 | |
|     methods: {
 | |
|       getInfo (id) {
 | |
|         this.instance.post(`/app/appvillageauxiliarypolice/queryDetailById?id=${id}`).then(res => {
 | |
|           if (res.code === 0) {
 | |
|             this.form = res.data
 | |
|             this.form.picture = res.data.picture ? [{url: res.data.picture}] : []
 | |
|           }
 | |
|         })
 | |
|       },
 | |
| 
 | |
|       getAreaList() {
 | |
|         this.instance.post(`/admin/area/queryAreaByParentId?id=341021104000`).then(res => {
 | |
|           if (res.code == 0) {
 | |
|             this.areaList = res.data.map(item => {
 | |
|               item.dictName = item.name
 | |
|               item.dictValue = item.id
 | |
| 
 | |
|               return item
 | |
|             })
 | |
|           }
 | |
|         })
 | |
|       },
 | |
| 
 | |
|       onClose () {
 | |
|         this.form.explain = ''
 | |
|       },
 | |
| 
 | |
|       confirm () {
 | |
|         this.$refs.form.validate((valid) => {
 | |
|           if (valid) {
 | |
|             this.instance.post(`/app/appvillageauxiliarypolice/addOrUpdate`, {
 | |
|               ...this.form,
 | |
|               id: this.params.id || '',
 | |
|               picture: this.form.picture.length ? this.form.picture[0].url : ''
 | |
|             }).then(res => {
 | |
|               if (res.code == 0) {
 | |
|                 this.$message.success('提交成功')
 | |
|                 setTimeout(() => {
 | |
|                   this.cancel(true)
 | |
|                 }, 600)
 | |
|               }
 | |
|             })
 | |
|           }
 | |
|         })
 | |
|       },
 | |
| 
 | |
|       cancel (isRefresh) {
 | |
|         this.$emit('change', {
 | |
|           type: 'list',
 | |
|           isRefresh: !!isRefresh
 | |
|         })
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| </script>
 | |
| 
 | |
| <style scoped lang="scss">
 | |
| </style>
 |