zhouwenxuan
2023-09-11 adedccb67c8aafecbf06dc902fac0c4837b4087a
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<template>
  <el-dialog
    :title="dialogStatus==='add'?'新增填报':''"
    :visible.sync="dialogVisible"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    width="50%"
    :before-close="handleClose"
  >
    <el-form ref="dataForm" :model="dataForm"  :rules="rules" label-position="right" label-width="150px" style="padding-right: 50px" element-loading-text="保存中...">
      <el-form-item label="身份证号:" prop="idCard">
        <el-input v-model.trim="dataForm.idCard"/>
      </el-form-item>
      <el-form-item label="IC卡编号:" prop="iCCard">
        <el-input v-model.trim="dataForm.iCCard"/>
      </el-form-item>
      <el-form-item label="电子证号:" prop="remark">
        <el-input v-model.trim="dataForm.remark"/>
      </el-form-item>
      <el-form-item label="违章日期:" prop="remark">
        <el-date-picker
          v-model="dataForm.data"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="姓名:" prop="remark">
        <el-input v-model.trim="dataForm.remark"/>
      </el-form-item>
      <el-form-item label="所属单位:" prop="remark">
        <el-input v-model.trim="dataForm.remark"/>
      </el-form-item>
      <el-form-item label="操作类型:" prop="remark">
        <el-cascader
          v-model="value"
          :options="options"
          @change="handleChange">
        </el-cascader>
      </el-form-item>
      <el-form-item label="图片上传:" prop="remark">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisibleImg" :modal-append-to-body="false">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="违章描述:" prop="remark">
        <el-input type="textarea" v-model.trim="dataForm.remark"/>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
 
<script >
export default {
  name: 'addUser',
  components: {
  },
  data() {
    return {
      dialogVisible: false,
      dialogStatus: '',
      dialogImageUrl: '',
      dialogVisibleImg: false,
      rules: {
        name: [{ required: true, message: '身份证号', trigger: 'blur' }],
      },
      dataForm: {}
    }
  },
  created() {
 
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisibleImg = true;
    },
    openDialog (type, data) {
      this.resetDataForm();
      this.dialogVisible = true;
      this.dialogStatus = type;
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleClose() {
      this.dialogVisible = false;
      this.$emit("getList");
    },
    onSubmit() {
      this.$emit("getList");
      this.dialogVisible = false;
    },
    resetDataForm() {
      this.dataForm = {
      }
    },
  }
}
 
</script>
<style scoped>
 
</style>