人员管理新增头像

src/api/persons/apiPersons.js

@@ -21,9 +21,19 @@ const delUser = (id) => {
     })
 }
 
+// 上传图片
+const uploadFile = (file) => {
+  return Request.postWithFile('/upload/images', {
+      images: file
+  })
+}
+
 export default {
     getPersonList,
     addUser,
     updateUser,
     delUser,
-}
+
+    uploadFile,
+
+}

src/components/persons/personsDetail.vue

@@ -1,267 +1,289 @@
 <template>
-    <div class="persons-detail">
-        <div class="persons-detail-left">
-            <a-form-model ref="formRef" :model="form" :rules="formRules" layout="inline" labelAlign="right"
-                          :label-col="{span: 8}"
-                          :wrapper-col="{span: 16}">
-                <div class="formTitle">【基本信息】</div>
-                <a-form-model-item label="姓名" prop="name">
-                    <a-input v-model="form.name" placeholder="姓名" :disabled="disabled"/>
-                </a-form-model-item>
-                <a-form-model-item label="性别">
-                    <a-select v-model="form.gender" allowClear placeholder="性别" :disabled="disabled">
-                        <a-select-option v-for="item in options.sex" :key="item.value" :value="item.value">
-                            {{ item.label }}
-                        </a-select-option>
-                    </a-select>
-                </a-form-model-item>
-                <a-form-model-item label="职务">
-                    <a-input v-model="form.duty" placeholder="职务" :disabled="disabled"/>
-                </a-form-model-item>
-                <a-form-model-item label="公司">
-                    <a-input v-model="form.companyName" placeholder="公司" :disabled="disabled"/>
-                </a-form-model-item>
-                <a-form-model-item label="部门">
-                    <a-input v-model="form.deptName" placeholder="部门" :disabled="disabled"/>
-                </a-form-model-item>
-                <a-form-model-item label="邮箱">
-                    <a-input v-model="form.email" placeholder="邮箱" :disabled="disabled"/>
-                </a-form-model-item>
-                <a-form-model-item label="入职时间">
-                    <a-date-picker v-model="form.hiredate" type="date" placeholder="入职时间" :disabled="disabled"/>
-                </a-form-model-item>
-                <a-form-model-item label="家庭住址">
-                    <a-input v-model="form.address" placeholder="家庭住址" style="width: 460px;" :disabled="disabled"/>
-                </a-form-model-item>
+  <div class="persons-detail">
+    <div class="persons-detail-left">
+      <a-form-model ref="formRef" :model="form" :rules="formRules" layout="inline" labelAlign="right"
+                    :label-col="{span: 8}"
+                    :wrapper-col="{span: 16}">
+        <div class="formTitle">【基本信息】</div>
+        <a-form-model-item label="姓名" prop="name">
+          <a-input v-model="form.name" placeholder="姓名" :disabled="disabled"/>
+        </a-form-model-item>
+        <a-form-model-item label="性别">
+          <a-select v-model="form.gender" allowClear placeholder="性别" :disabled="disabled">
+            <a-select-option v-for="item in options.sex" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="职务">
+          <a-input v-model="form.duty" placeholder="职务" :disabled="disabled"/>
+        </a-form-model-item>
+        <a-form-model-item label="公司">
+          <a-input v-model="form.companyName" placeholder="公司" :disabled="disabled"/>
+        </a-form-model-item>
+        <a-form-model-item label="部门">
+          <a-input v-model="form.deptName" placeholder="部门" :disabled="disabled"/>
+        </a-form-model-item>
+        <a-form-model-item label="邮箱">
+          <a-input v-model="form.email" placeholder="邮箱" :disabled="disabled"/>
+        </a-form-model-item>
+        <a-form-model-item label="入职时间">
+          <a-date-picker v-model="form.hiredate" type="date" placeholder="入职时间" :disabled="disabled"/>
+        </a-form-model-item>
+        <a-form-model-item label="家庭住址">
+          <a-input v-model="form.address" placeholder="家庭住址" style="width: 460px;" :disabled="disabled"/>
+        </a-form-model-item>
 
-                <div class="formTitle">【管理数据】</div>
-                <a-form-model-item label="员工类型">
-                    <a-select v-model="form.type" allowClear placeholder="员工类型" :disabled="disabled">
-                        <a-select-option v-for="item in options.type" :key="item.value" :value="item.value">
-                            {{ item.label }}
-                        </a-select-option>
-                    </a-select>
-                </a-form-model-item>
-                <a-form-model-item label="职能类型">
-                    <a-select v-model="form.functionType" allowClear placeholder="职能类型" :disabled="disabled">
-                        <a-select-option v-for="item in options.functionType" :key="item.value" :value="item.value">
-                            {{ item.label }}
-                        </a-select-option>
-                    </a-select>
-                </a-form-model-item>
-                <a-form-model-item label="HR编号">
-                    <a-input v-model="form.hrNumber" placeholder="HR编号" :disabled="disabled"/>
-                </a-form-model-item>
-                <a-form-model-item label="办公驻地">
-                    <a-select v-model="form.workAddress" allowClear placeholder="办公驻地" :disabled="disabled">
-                        <a-select-option v-for="item in options.workAddress" :key="item.value" :value="item.value" >
-                            {{ item.label }}
-                        </a-select-option>
-                    </a-select>
-                </a-form-model-item>
-                <a-form-model-item label="办公楼层">
-                    <a-input v-model="form.floor" placeholder="办公楼层" :disabled="disabled"/>
-                </a-form-model-item>
-                <a-form-model-item label="人员编码" v-if="form.workAddress && form.workAddress.indexOf('bj-zy-')==0">
-                    <a-input v-model="form.zyNumber" placeholder="人员编码" :disabled="disabled"/>
-                </a-form-model-item>
-                <a-form-model-item label="房间号">
-                    <a-input v-model="form.roomNumber" placeholder="房间号" :disabled="disabled"/>
-                </a-form-model-item>
-                <a-form-model-item label="工位号">
-                    <a-input v-model="form.siteNumber" placeholder="工位号" :disabled="disabled"/>
-                </a-form-model-item>
-                <a-form-model-item label="卡片编号">
-                    <a-input v-model="form.cardNumber" placeholder="卡片编号" :disabled="disabled"/>
-                </a-form-model-item>
+        <div class="formTitle">【管理数据】</div>
+        <a-form-model-item label="员工类型">
+          <a-select v-model="form.type" allowClear placeholder="员工类型" :disabled="disabled">
+            <a-select-option v-for="item in options.type" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="职能类型">
+          <a-select v-model="form.functionType" allowClear placeholder="职能类型" :disabled="disabled">
+            <a-select-option v-for="item in options.functionType" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="HR编号">
+          <a-input v-model="form.hrNumber" placeholder="HR编号" :disabled="disabled"/>
+        </a-form-model-item>
+        <a-form-model-item label="办公驻地">
+          <a-select v-model="form.workAddress" allowClear placeholder="办公驻地" :disabled="disabled">
+            <a-select-option v-for="item in options.workAddress" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="办公楼层">
+          <a-input v-model="form.floor" placeholder="办公楼层" :disabled="disabled"/>
+        </a-form-model-item>
+        <a-form-model-item label="人员编码" v-if="form.workAddress && form.workAddress.indexOf('bj-zy-')==0">
+          <a-input v-model="form.zyNumber" placeholder="人员编码" :disabled="disabled"/>
+        </a-form-model-item>
+        <a-form-model-item label="房间号">
+          <a-input v-model="form.roomNumber" placeholder="房间号" :disabled="disabled"/>
+        </a-form-model-item>
+        <a-form-model-item label="工位号">
+          <a-input v-model="form.siteNumber" placeholder="工位号" :disabled="disabled"/>
+        </a-form-model-item>
+        <a-form-model-item label="卡片编号">
+          <a-input v-model="form.cardNumber" placeholder="卡片编号" :disabled="disabled"/>
+        </a-form-model-item>
 
-                <div class="formTitle">【权限数据】</div>
-                <a-form-model-item label="身份证号">
-                    <a-input v-model="form.idCard" placeholder="身份证号" :disabled="disabled"/>
-                </a-form-model-item>
-                <a-form-model-item label="手机号">
-                    <a-input v-model="form.phone" placeholder="手机号" :disabled="disabled"/>
-                </a-form-model-item>
-                <a-form-model-item label="物理卡号">
-                    <a-input v-model="form.physicsCard" placeholder="物理卡号" :disabled="disabled"/>
-                </a-form-model-item>
-                <a-form-model-item label="消费账号">
-                    <a-input v-model="form.account" placeholder="消费账号" :disabled="disabled"/>
-                </a-form-model-item>
-                <a-form-model-item label="车牌号">
-                    <a-input v-model="form.carNumber" placeholder="车牌号" :disabled="disabled"/>
-                </a-form-model-item>
-                <a-form-model-item label="角色">
-                    <a-input v-model="form.role" placeholder="角色" :disabled="disabled"/>
-                </a-form-model-item>
+        <div class="formTitle">【权限数据】</div>
+        <a-form-model-item label="身份证号">
+          <a-input v-model="form.idCard" placeholder="身份证号" :disabled="disabled"/>
+        </a-form-model-item>
+        <a-form-model-item label="手机号">
+          <a-input v-model="form.phone" placeholder="手机号" :disabled="disabled"/>
+        </a-form-model-item>
+        <a-form-model-item label="物理卡号">
+          <a-input v-model="form.physicsCard" placeholder="物理卡号" :disabled="disabled"/>
+        </a-form-model-item>
+        <a-form-model-item label="消费账号">
+          <a-input v-model="form.account" placeholder="消费账号" :disabled="disabled"/>
+        </a-form-model-item>
+        <a-form-model-item label="车牌号">
+          <a-input v-model="form.carNumber" placeholder="车牌号" :disabled="disabled"/>
+        </a-form-model-item>
+        <a-form-model-item label="角色">
+          <a-input v-model="form.role" placeholder="角色" :disabled="disabled"/>
+        </a-form-model-item>
 
-                <div class="formTitle">【状态数据】</div>
-                <a-form-model-item label="操作状态">
-                    <a-select v-model="form.operateStatus" allowClear placeholder="操作状态" :disabled="disabled">
-                        <a-select-option v-for="item in options.operateStatus" :key="item.value" :value="item.value">
-                            {{ item.label }}
-                        </a-select-option>
-                    </a-select>
-                </a-form-model-item>
-                <a-form-model-item label="人员状态">
-                    <a-select v-model="form.status" allowClear placeholder="人员状态" :disabled="disabled">
-                        <a-select-option v-for="item in options.status" :key="item.value" :value="item.value">
-                            {{ item.label }}
-                        </a-select-option>
-                    </a-select>
-                </a-form-model-item>
-                <a-form-model-item label="下发状态">
-                    <a-select v-model="form.issueStatus" allowClear placeholder="下发状态" :disabled="disabled">
-                        <a-select-option v-for="item in options.issueStatus" :key="item.value" :value="item.value" >
-                            {{ item.label }}
-                        </a-select-option>
-                    </a-select>
-                </a-form-model-item>
-                <a-form-model-item label="授权时间">
-                    <a-date-picker v-model="form.impowerTime" type="date" placeholder="授权时间" :disabled="disabled"/>
-                </a-form-model-item>
-                <a-form-model-item label="出入口权限">
-                    <a-select v-model="form.inOut" allowClear placeholder="出入口权限" :disabled="disabled">
-                        <a-select-option v-for="item in options.inout" :key="item.value" :value="item.value" >
-                            {{ item.label }}
-                        </a-select-option>
-                    </a-select>
-                </a-form-model-item>
-                <a-form-model-item label="门禁权限">
-                    <a-select v-model="form.access" allowClear placeholder="门禁权限" :disabled="disabled">
-                        <a-select-option v-for="item in options.access" :key="item.value" :value="item.value" >
-                            {{ item.label }}
-                        </a-select-option>
-                    </a-select>
-                </a-form-model-item>
-            </a-form-model>
-
-        </div>
-        <div class="persons-detail-right">
+        <div class="formTitle">【状态数据】</div>
+        <a-form-model-item label="操作状态">
+          <a-select v-model="form.operateStatus" allowClear placeholder="操作状态" :disabled="disabled">
+            <a-select-option v-for="item in options.operateStatus" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="人员状态">
+          <a-select v-model="form.status" allowClear placeholder="人员状态" :disabled="disabled">
+            <a-select-option v-for="item in options.status" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="下发状态">
+          <a-select v-model="form.issueStatus" allowClear placeholder="下发状态" :disabled="disabled">
+            <a-select-option v-for="item in options.issueStatus" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="授权时间">
+          <a-date-picker v-model="form.impowerTime" type="date" placeholder="授权时间" :disabled="disabled"/>
+        </a-form-model-item>
+        <a-form-model-item label="出入口权限">
+          <a-select v-model="form.inOut" allowClear placeholder="出入口权限" :disabled="disabled">
+            <a-select-option v-for="item in options.inout" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="门禁权限">
+          <a-select v-model="form.access" allowClear placeholder="门禁权限" :disabled="disabled">
+            <a-select-option v-for="item in options.access" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </a-select-option>
+          </a-select>
+        </a-form-model-item>
+      </a-form-model>
 
+    </div>
+    <div class="persons-detail-right">
+      <a-upload
+          name="avatar"
+          list-type="picture-card"
+          class="avatar-uploader"
+          :show-upload-list="false"
+          action=""
+          :before-upload="beforeUpload"
+      >
+        <a-avatar v-if="form.photo" :src="'/ioc-api'+form.photo" style="width: 100%;height: 100%" alt="avatar"/>
+        <div v-else>
+          <div class="ant-upload-text">
+            上传头像
+          </div>
         </div>
+      </a-upload>
     </div>
+  </div>
 </template>
 
 <script>
+import apiPersons from "@/api/persons/apiPersons";
+
 export default {
-    props: {
-        item: Object,
-        disabled: Boolean,
-        statusOption: Array,
-        typeOption: Array,
-    },
-    data() {
-        return {
-            form: {},
-            formRules: {
-                name: [
-                    {required: true, message: '请输入姓名', trigger: 'blur'},
-                    {required: true, message: '请输入姓名', trigger: 'change'}
-                ]
-            },
-            options: {
-                sex: [
-                    {
-                        label: '男',
-                        value: '1'
-                    }, {
-                        label: '女',
-                        value: '2'
-                    },
-                ],
-                functionType: [
-                    {
-                        label: '生产人员',
-                        value: '1'
-                    }, {
-                        label: '职能人员',
-                        value: '2'
-                    },
-                ],
-                workAddress: [
-                    {
-                        label: '主语3',
-                        value: 'bj-zy-3'
-                    }, {
-                        label: '主语4',
-                        value: 'bj-zy-4'
-                    }, {
-                        label: '中鼎B',
-                        value: 'bj-zd-b'
-                    }, {
-                        label: '华通',
-                        value: 'bj-ht'
-                    }, {
-                        label: '亦庄',
-                        value: 'bj-yz'
-                    }, {
-                        label: '集团',
-                        value: 'c'
-                    }, {
-                        label: '京内其他',
-                        value: 'bj-other'
-                    }, {
-                        label: '京外其他',
-                        value: 'other'
-                    },
-                ],
-                operateStatus: [
-                    {
-                        label: '新增',
-                        value: '1'
-                    }, {
-                        label: '修改',
-                        value: '2'
-                    }, {
-                        label: '失效/注销',
-                        value: '3'
-                    },
-                ],
-                status: [],
-                type: [],
-                issueStatus: [
-                    {
-                        label: '正常',
-                        value: '1'
-                    }, {
-                        label: '待审核',
-                        value: '2'
-                    }, {
-                        label: '未成功',
-                        value: '3'
-                    },
-                ],
-                inout: [
-                    {
-                        label: '是',
-                        value: '1'
-                    },
-                    {
-                        label: '否',
-                        value: ''
-                    }
-                ],
-                access: [
-                    {
-                        label: '是',
-                        value: '1'
-                    },
-                    {
-                        label: '否',
-                        value: ''
-                    }
-                ],
-            }
-        }
-    },
-    created() {
-        this.options.type = this.typeOption;
-        this.options.status = this.statusOption;
-        this.form = JSON.parse(JSON.stringify(this.item))
-    },
-    methods: {
+  props: {
+    item: Object,
+    disabled: Boolean,
+    statusOption: Array,
+    typeOption: Array,
+  },
+  data() {
+    return {
+      form: {},
+      formRules: {
+        name: [
+          {required: true, message: '请输入姓名', trigger: 'blur'},
+          {required: true, message: '请输入姓名', trigger: 'change'}
+        ]
+      },
+      options: {
+        sex: [
+          {
+            label: '男',
+            value: '1'
+          }, {
+            label: '女',
+            value: '2'
+          },
+        ],
+        functionType: [
+          {
+            label: '生产人员',
+            value: '1'
+          }, {
+            label: '职能人员',
+            value: '2'
+          },
+        ],
+        workAddress: [
+          {
+            label: '主语3',
+            value: 'bj-zy-3'
+          }, {
+            label: '主语4',
+            value: 'bj-zy-4'
+          }, {
+            label: '中鼎B',
+            value: 'bj-zd-b'
+          }, {
+            label: '华通',
+            value: 'bj-ht'
+          }, {
+            label: '亦庄',
+            value: 'bj-yz'
+          }, {
+            label: '集团',
+            value: 'c'
+          }, {
+            label: '京内其他',
+            value: 'bj-other'
+          }, {
+            label: '京外其他',
+            value: 'other'
+          },
+        ],
+        operateStatus: [
+          {
+            label: '新增',
+            value: '1'
+          }, {
+            label: '修改',
+            value: '2'
+          }, {
+            label: '失效/注销',
+            value: '3'
+          },
+        ],
+        status: [],
+        type: [],
+        issueStatus: [
+          {
+            label: '正常',
+            value: '1'
+          }, {
+            label: '待审核',
+            value: '2'
+          }, {
+            label: '未成功',
+            value: '3'
+          },
+        ],
+        inout: [
+          {
+            label: '是',
+            value: '1'
+          },
+          {
+            label: '否',
+            value: ''
+          }
+        ],
+        access: [
+          {
+            label: '是',
+            value: '1'
+          },
+          {
+            label: '否',
+            value: ''
+          }
+        ],
+      }
     }
+  },
+  created() {
+    this.options.type = this.typeOption;
+    this.options.status = this.statusOption;
+    this.form = JSON.parse(JSON.stringify(this.item))
+  },
+  methods: {
+    beforeUpload(file) {
+      apiPersons.uploadFile(file).then(res=>{
+        this.form.photo = res.data.data;
+      })
+      return false;
+    },
+  }
 }
 </script>
 
@@ -309,4 +331,13 @@ export default {
 /deep/ .ant-modal-body {
   padding-top: 6px !important;
 }
-</style>
+.avatar-uploader {
+  margin: 50px;
+
+
+
+
+
+
+}
+</style>

src/utils/request.js

@@ -155,6 +155,7 @@ export default {
         processData: false,
         headers: {
           'Content-Type': 'multipart/form-data',
+          "token": stores.userStore().token
         },
       }).then((res) => {
         resolve(res)

vite.config.js

@@ -18,6 +18,9 @@ export default defineConfig(({ command }) => {
   return {
     base: '/',
     assetsInclude: ['assets/'],
+    define: {
+      'process.env': process.env
+    },
     css: {
       preprocessorOptions: {
         less: {