From e9986b1274d7b22c2b13a96c86d3f032181b6278 Mon Sep 17 00:00:00 2001
From: SelfRidicule <selfridicule@gmail.com>
Date: Wed, 27 Mar 2024 14:29:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=8F=E8=BF=B0=EF=BC=9A=E4=BC=81=E4=B8=9A?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/modules/IcsCustomerStaffModal.vue   | 165 +++++++++++-------
 1 file changed, 100 insertions(+), 65 deletions(-)

diff --git a/src/views/admin/modules/IcsCustomerStaffModal.vue b/src/views/admin/modules/IcsCustomerStaffModal.vue
index 108ee5d..f2b6fc6 100644
--- a/src/views/admin/modules/IcsCustomerStaffModal.vue
+++ b/src/views/admin/modules/IcsCustomerStaffModal.vue
@@ -1,48 +1,55 @@
 <template>
   <a-modal
-    title="操作"
-    style="top: 20px;"
-    :width="800"
-    v-model="visible"
-    :confirmLoading="confirmLoading"
-    @ok="handleSubmit"
+    title='操作'
+    style='top: 20px;'
+    :width='800'
+    v-model='visible'
+    :confirmLoading='confirmLoading'
+    @ok='handleSubmit'
   >
-    <a-form :form="form">
-      <a-form-item style="display:none">
-        <a-input v-decorator="['id']"/>
+    <a-form :form='form'>
+      <a-form-item style='display:none'>
+        <a-input v-decorator="['id']" />
       </a-form-item>
-      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="姓名">
-        <a-input placeholder="姓名" v-decorator="['username', {rules: [{required: true, message: '请输入姓名'}]}]"/>
+      <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='企业'>
+        <a-select v-decorator="['icsCustomerId',{rules: [{ required: true, message: '请选择企业' }]}]"
+                  placeholder='企业'>
+          <a-select-option v-for='item in customerList' :key='item.id' :value='item.id'>
+            {{ item.name }}
+          </a-select-option>
+        </a-select>
       </a-form-item>
-      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="电话">
-        <a-input placeholder="电话" v-decorator="['mobile', {rules: [{required: true, message: '请输入电话'}]}]"/>
+      <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='姓名'>
+        <a-input placeholder='姓名' v-decorator="['name', {rules: [{required: true, message: '请输入姓名'}]}]" />
       </a-form-item>
-      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户性别">
-        <a-radio-group @change="onChange" v-decorator="['gender',{rules: [{required: true, message: '请选择性别'}]}]" >
+      <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='电话'>
+        <a-input placeholder='电话' v-decorator="['mobile', {rules: [{required: true, message: '请输入电话'}]}]" />
+      </a-form-item>
+      <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='用户性别'>
+        <a-radio-group @change='onChange' v-decorator="['gender',{rules: [{required: true, message: '请选择性别'}]}]">
           <a-radio :value="'0'">男</a-radio>
           <a-radio :value="'1'">女</a-radio>
         </a-radio-group>
       </a-form-item>
       <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='照片'>
-        <!--        <a-input placeholder="室内图片url" v-decorator="['indoorPicUrl']" />-->
         <a-upload
-          v-decorator="['photo']"
+          v-decorator="['photo' ,{rules: [{required: true, message: '请上传照片'}]}]"
           list-type='picture-card'
           class='avatar-uploader'
           :show-upload-list='false'
           :action='uploadUrl'
           :headers='headers'
-          :before-upload='beforeUpload'
-          @change='handleChange'
+          :before-upload='photoBeforeUpload'
+          @change='photoHandleChange'
         >
-          <img v-if='imageUrl' :src='imageUrl' style='width: 102px; height: 102px' />
+          <img v-if='photoImageUrl' :src='photoImageUrl' style='width: 102px; height: 102px' />
           <div v-else>
-            <a-icon :type="loading ? 'loading' : 'plus'" />
+            <a-icon :type="photoLoading ? 'loading' : 'plus'" />
             <div class='ant-upload-text'> 上传</div>
           </div>
         </a-upload>
       </a-form-item>
-      <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='照片'>
+      <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='头像'>
         <a-upload
           v-decorator="['avatar']"
           list-type='picture-card'
@@ -50,33 +57,33 @@
           :show-upload-list='false'
           :action='uploadUrl'
           :headers='headers'
-          :before-upload='beforeUpload1'
-          @change='handleChange1'
+          :before-upload='avatarBeforeUpload'
+          @change='avatarHandleChange'
         >
-          <img v-if='imageUrl' :src='imageUrl' style='width: 102px; height: 102px' />
+          <img v-if='avatarImageUrl' :src='avatarImageUrl' style='width: 102px; height: 102px' />
           <div v-else>
-            <a-icon :type="loading ? 'loading' : 'plus'" />
+            <a-icon :type="avatarLoading ? 'loading' : 'plus'" />
             <div class='ant-upload-text'> 上传</div>
           </div>
         </a-upload>
       </a-form-item>
-      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户昵称">
-        <a-input placeholder="用户昵称" v-decorator="['username']"/>
+      <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='昵称'>
+        <a-input placeholder='昵称' v-decorator="['username']" />
       </a-form-item>
-      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="身份证号">
-        <a-input placeholder="身份证号" v-decorator="['cardNo']"/>
+      <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='身份证号'>
+        <a-input placeholder='身份证号' v-decorator="['cardNo']" />
       </a-form-item>
-      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="员工地址">
-        <a-input placeholder="员工地址" v-decorator="['address']"/>
+      <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='地址'>
+        <a-input placeholder='地址' v-decorator="['address' ,{rules: [{required: true, message: '请输入地址'}]}]" />
       </a-form-item>
-      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="邮箱">
-        <a-input placeholder="邮箱" v-decorator="['email']"/>
+      <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='邮箱'>
+        <a-input placeholder='邮箱' v-decorator="['email']" />
       </a-form-item>
-      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="学历">
-        <a-input placeholder="学历" v-decorator="['degree']"/>
+      <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='学历'>
+        <a-input placeholder='学历' v-decorator="['degree']" />
       </a-form-item>
-      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="紧急联系人">
-        <a-input placeholder="紧急联系人" v-decorator="['urgent']"/>
+      <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='紧急联系人'>
+        <a-input placeholder='紧急联系人' v-decorator="['urgent']" />
       </a-form-item>
 
     </a-form>
@@ -84,16 +91,19 @@
 </template>
 <script>
 import { saveIcsCustomerStaff } from '@/api/admin/icsCustomerStaff'
+import {
+  getCustomerList
+} from '@/api/admin/meeting/roomContent'
+
 import pick from 'lodash.pick'
 import storage from 'store'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
+
 export default {
   name: 'IcsCustomerStaffModal',
-  props: {
-  },
-  components: {
-  },
-  data () {
+  props: {},
+  components: {},
+  data() {
     return {
       visible: false,
       labelCol: {
@@ -111,16 +121,21 @@ export default {
       },
       confirmLoading: false,
       mdl: {},
-      form: this.$form.createForm(this)
+      form: this.$form.createForm(this),
+      customerList: [],
+      photoImageUrl: '',
+      photoLoading: false,
+      avatarImageUrl: '',
+      avatarLoading: false
     }
   },
-  beforeCreate () {
+  beforeCreate() {
   },
-  created () {
+  created() {
   },
   methods: {
-
-    beforeUpload(file) {
+    // 照片
+    photoBeforeUpload(file) {
       const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
       if (!isJpgOrPng) {
         this.$message.error('You can only upload JPG file!')
@@ -131,9 +146,9 @@ export default {
       }
       return isJpgOrPng && isLt2M
     },
-    handleChange(info) {
+    photoHandleChange(info) {
       if (info.file.status === 'uploading') {
-        this.loading = true
+        this.photoLoading = true
         return
       }
       if (info.file.status === 'done') {
@@ -147,14 +162,14 @@ export default {
           })
         })
         // Get this url from response in real world.
-        getBase64(info.file.originFileObj, imageUrl => {
-          this.imageUrl = imageUrl
-          this.loading = false
+        this.getBase64(info.file.originFileObj, imageUrl => {
+          this.photoImageUrl = imageUrl
+          this.photoLoading = false
         })
       }
     },
-
-    beforeUpload1(file) {
+    // 头像
+    avatarBeforeUpload(file) {
       const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
       if (!isJpgOrPng) {
         this.$message.error('You can only upload JPG file!')
@@ -165,9 +180,9 @@ export default {
       }
       return isJpgOrPng && isLt2M
     },
-    handleChange1(info) {
+    avatarHandleChange(info) {
       if (info.file.status === 'uploading') {
-        this.loading = true
+        this.avatarLoading = true
         return
       }
       if (info.file.status === 'done') {
@@ -181,25 +196,45 @@ export default {
           })
         })
         // Get this url from response in real world.
-        getBase64(info.file.originFileObj, imageUrl => {
-          this.imageUrl = imageUrl
-          this.loading = false
+        this.getBase64(info.file.originFileObj, imageUrl => {
+          this.avatarImageUrl = imageUrl
+          this.avatarLoading = false
         })
       }
     },
-
-    add () {
+    getBase64(img, callback) {
+      const reader = new FileReader()
+      reader.addEventListener('load', () => callback(reader.result))
+      reader.readAsDataURL(img)
+    },
+    add() {
       this.form.resetFields()
       this.edit({ id: 0 })
     },
-    edit (record) {
+    edit(record) {
+      // 查询企业
+      getCustomerList().then(res => {
+        console.log('getCustomerList', res)
+        this.customerList = res.rows
+      })
       this.mdl = Object.assign(record)
       this.visible = true
       this.$nextTick(() => {
-        this.form.setFieldsValue(pick(this.mdl, 'id', 'username', 'mobile', 'gender'))
+        this.form.setFieldsValue(pick(this.mdl, 'id', 'icsCustomerId', 'name', 'mobile', 'gender', 'photo', 'avatar', 'username', 'cardNo', 'address', 'email', 'degree', 'urgent'))
       })
+      //
+      if (this.mdl.photo) {
+        this.photoImageUrl = process.env.VUE_APP_API_BASE_URL + this.mdl.photo
+      } else {
+        this.photoImageUrl = ''
+      }
+      if (this.mdl.avatar) {
+        this.avatarImageUrl = process.env.VUE_APP_API_BASE_URL + this.mdl.avatar
+      } else {
+        this.avatarImageUrl = ''
+      }
     },
-    handleSubmit (e) {
+    handleSubmit(e) {
       e.preventDefault()
       this.form.validateFields((err, values) => {
         if (!err) {