123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- <template>
- <div>
- <a-modal
- :footer="null"
- :title="titleText"
- v-model="isshow"
- @cancle="cancel"
- :centered="true">
- <a-spin :spinning="loading">
- <a-form-model ref="ruleForm" :model="formData" :rules="rules">
- <a-form-model-item label="司机姓名" prop="name" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
- <a-input v-model.trim="formData.name" :maxLength="30" placeholder="请输入司机姓名(最多30个字符)" id="addDiverModal-name"/>
- </a-form-model-item>
- <a-form-model-item label="手机号码" prop="phone" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
- <a-input v-model.trim="formData.phone" :maxLength="11" placeholder="请输入手机号" id="addDiverModal-phone"/>
- </a-form-model-item>
- <a-form-model-item label="状态" prop="loginFlag" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
- <a-radio-group
- name="radioGroup"
- v-model="formData.loginFlag"
- id="addDiverModal-loginFlag"
- >
- <a-radio :value="1">是</a-radio>
- <a-radio :value="0">否</a-radio>
- </a-radio-group>
- </a-form-model-item>
- <a-form-model-item :wrapper-col="{ span: 24, offset: 8 }">
- <a-button type="primary" @click="onSubmit" :style="{ marginRight: '15px' }" id="addDiverModal-onSubmit">保存</a-button>
- <a-button @click="cancel" :style="{ marginLeft: '15px' }" id="addDiverModal-cancel">取消</a-button>
- </a-form-model-item>
- </a-form-model>
- </a-spin >
- </a-modal>
- </div>
- </template>
- <script>
- import {
- STable,
- VSelect
- } from '@/components'
- import { saveDriver, driverDetails } from '@/api/cleanManage.js'
- export default {
- name: 'AddDiverModal',
- components: {
- STable,
- VSelect
- },
- props: {
- visible: {
- type: Boolean,
- default: false
- },
- itemId: {
- type: String,
- default: ''
- }
- },
- data () {
- return {
- titleText: '新增',
- isshow: this.visible,
- formLayout: 'horizontal',
- optionData: [],
- formData: {
- name: '', // 姓名
- loginFlag: '', // 状态
- phone: '' // 手机号码
- },
- rules: {
- phone: [{ required: true, pattern: /^\d{11}$/, message: '请输入手机号', trigger: 'blur' }],
- name: [{ required: true, message: '请输入司机姓名', trigger: 'blur' }],
- loginFlag: [{ required: true, message: '请选择状态', trigger: 'blur' }]
- },
- loading: false
- }
- },
- methods: {
- cancel (e) {
- this.clear()
- this.$emit('close')
- },
- // 编辑查详情
- getPageInfo () {
- this.loading = true
- driverDetails({
- id: this.itemId
- }).then(res => {
- if (res.status == 200) {
- this.loading = false
- this.formData = Object.assign({}, this.formData, res.data)
- this.formData.loginFlag = Number(this.formData.loginFlag)
- }
- })
- },
- // 保存提交
- onSubmit () {
- this.$refs.ruleForm.validate(valid => {
- const _this = this
- if (valid) {
- const params = JSON.parse(JSON.stringify(this.formData))
- saveDriver(params).then(res => {
- if (res.status == 200) {
- _this.$message.success(res.message)
- _this.$emit('refresh')
- setTimeout(function () {
- _this.cancel()
- }, 300)
- }
- })
- }
- })
- },
- // 取消
- handleCancel () {
- this.cancel()
- },
- clear () {
- this.$refs.ruleForm.resetFields()
- delete this.formData.id
- this.formData.name = ''
- this.formData.loginFlag = ''
- this.formData.phone = ''
- }
- },
- watch: {
- visible (newValue, oldValue) {
- this.isshow = newValue
- },
- isshow (val) {
- if (!val) {
- this.$emit('close')
- } else {
- this.$nextTick(() => {
- this.$refs.ruleForm.resetFields()
- })
- }
- },
- itemId (newValue, oldValue) {
- if (newValue && this.isshow) {
- this.titleText = '编辑'
- this.getPageInfo(newValue)
- } else {
- this.titleText = '新增'
- console.log(this.loading)
- }
- }
- }
- }
- </script>
- <style>
- </style>
|