[FE]新增用户管理弹窗

security-protection-platform/src/modules/usermana/components/modal/addUser.vue

@@ -0,0 +1,115 @@
<template>
  <div>
    <t-modal :visibled="visible">
      <t-form :model="addUserModal" :rules="addUserModalRules" label-position="right">
        <t-form-item label="姓名：" prop="name">
          <t-input v-model="addUserModal.name" placeholder="请输入姓名"></t-input>
        </t-form-item>
        <t-form-item label="员工编号：" prop="code">
          <t-input v-model="addUserModal.code" placeholder="请输入员工编号"></t-input>
        </t-form-item>
        <t-form-item label="公司：" prop="field4">
          <t-select v-model="addUserModal.field4" placeholder="请选择公司" clearable>
            <t-option v-for="(item,index) in dataList" :value="item.field4" :key="index">{{ item.name }}</t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="部门：" prop="organizeCode">
          <t-select v-model="addUserModal.organizeCode" placeholder="请选择部门" clearable>
            <t-option v-for="(item,index) in dataList" :value="item.value" :key="index">{{ item.name }}</t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="职务：" prop="mainJobPosition">
          <t-select v-model="addUserModal.mainJobPosition" placeholder="请选择职务" clearable>
            <t-option v-for="(item,index) in dataList" :value="item.value" :key="index">{{ item.name }}</t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="年龄：" prop="birthday">
          <t-date-picker v-model="addUserModal.birthday" placeholder="请输入年龄" @date-change="startPickerDateChange"></t-date-picker>
        </t-form-item>
        <t-form-item label="手机：" prop="mainWirelessCall">
          <t-input v-model="addUserModal.mainWirelessCall" placeholder="请输入11位手机号"></t-input>
        </t-form-item>
        <t-form-item label="人脸图片：" prop="facePicture">
          <t-input v-model="addUserModal.facePicture" placeholder="请输入手机号"></t-input>
        </t-form-item>
      </t-form>
    </t-modal>
  </div>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: Object,
      dafault: () => []
    }
  },
  data() {
    return {
      dataList: [
        {
          name: '数据一',
          value: 1
        },
        {
          name: '数据二',
          value: 2
        },
        {
          name: '数据三',
          value: 3
        }
      ],
      // 新增用户表单
      addUserModal: {
        name: '',
        code: '',
        organizeCode: '',
        apartments: '',
        mainJobPosition: '',
        birthday: '',
        mainWirelessCall: '',
        facePicture: ''
      },
      // 新增用户表单规则
      addUserModalRules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '员工编号不能为空', trigger: 'blur' }
        ],
        field4: [
          { required: true, message: '公司不能为空' }
        ],
        organizeCode: [
          { required: true, message: '部门不能为空', trigger: 'change' }
        ],
        mainJobPosition: [
          { required: true, message: '职务不能为空', trigger: 'change' }
        ],
        birthday: [
          { required: true, message: '年龄不能为空', trigger: 'blur' }
        ],
        mainWirelessCall: [
          { required: true, message: '手机不能为空', trigger: 'blur' }
        ],
        facePicture: [
          { required: true, message: '图片不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
  }
}
</script>
<style>
</style>

security-protection-platform/src/modules/usermana/index.vue

@@ -63,13 +63,17 @@
        </t-pager>
      </div>
    </t-card>
    <add-user-modal :visible="addDeviceModal"></add-user-modal>
  </div>
</template>
<script>
import sysapi from '@/api/usermana'
import addUserModal from './components/modal/addUser'
export default {
  components: {
    addUserModal
  },
  data () {
    return {
      // 公司类型id