vip

src/views/vip/components/VipForm.vue

@@ -0,0 +1,113 @@
+<template>
+  <el-dialog title="VIP" :close-on-click-modal="false" append-to-body :visible.sync="visible" width="500px" @close="closeDialog">
+    <div>
+      <el-form ref="dialogForm" :model="dialogForm" :rules="dataRule"  @keyup.enter.native="dialogFormSubmit()">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="手机号" prop="phone">
+              <el-input v-model="dialogForm.phone" placeholder="请输入" clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="车型" prop="carTypeId">
+              <el-select v-model="dialogForm.carTypeId" clearable placeholder="选择车型">
+                <el-option v-for="item in carOptions" :key="item.carTypeId" :label="item.carName" :value="item.carTypeId" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="会员" prop="memberId">
+              <el-select v-model="dialogForm.memberId" clearable placeholder="选择车型">
+                <el-option v-for="item in memberOptions.filter(item => item.carTypeId === dialogForm.carTypeId)" :key="item.memberId" :label="item.memberName" :value="item.memberId" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button plain @click="(visible = false)">取消</el-button>
+      <el-button v-jclick type="primary" :disabled="!canSubmit" @click="dialogFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { addUserMember, getCarList, getMemberList } from '@/api/vip';
+
+export default {
+  name:"VipForm",
+  data() {
+    return {
+      visible: false,
+      canSubmit: true,
+      dialogForm: {
+        userId: undefined,
+        memberId: undefined,
+        phone: undefined
+      },
+      dataRule: {
+        phone: [{ required: true, message: '手机号不为空', trigger: 'blur' },
+        { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }],        carTypeId: [{ required: true, message: '车型不能为空', trigger: 'blur' }],
+        memberId: [{ required: true, message: '会员不能为空', trigger: 'blur' }]
+      },
+      carOptions:[],
+      memberOptions:[]
+    };
+  },
+  methods: {
+    init(info = undefined) {
+      // debugger
+      this.visible = true;
+      this.getCarList();
+      this.getMemberList();
+      this.$nextTick(() => {
+        this.resetDialogForm();
+        // this.$refs['dialogForm'].resetFields();
+        if (info) {
+          this.dialogForm = this.deepClone(info);
+        }
+      });
+    },
+    resetDialogForm() {
+      this.dialogForm = {
+        userId: undefined,
+        memberId: undefined,
+        phone: undefined
+      };
+    },
+    closeDialog() {
+      this.$emit('update:dialogVisible', false);
+    },
+    // 表单提交
+    dialogFormSubmit() {
+      this.$refs.dialogForm.validate((valid) => {
+        if (valid) {
+          addUserMember(this.dialogForm).then(response => {
+            if (response.code == 200) {
+              this.$modal.msgSuccess('新增成功');
+              this.$emit('update');
+              this.visible = false;
+            }
+          });
+        }
+      });
+    },
+    getCarList(){
+      getCarList().then(resp => {
+        this.carOptions = resp.data;
+      })
+    },
+    getMemberList(){
+      getMemberList().then(resp => {
+        this.memberOptions = resp.data
+      })
+    }
+  }
+};
+</script>