[update 委员信息] 上传个人照片

src/views/organizationalManage/committeeMemberInfo/CommitteeMemberInfoDetail.vue

@@ -13,10 +13,15 @@
                              :span="label.span ? label.span : 1"
                              :class="{'descriptions-item-none': label.type === 'none'}"
                              :label="label.label">
-          <template v-if="!label.type">{{ model[label.valueField] }}</template>
-          <template v-else-if="label.type === 'img'">
-            <img :src="getImgUrl(model[label.valueField])" alt="" class="descriptions-item-content-img">
-          </template>
+          <!-- 默认的直接显示 -->
+          <span v-if="!label.type">{{ model[label.valueField] }}</span>
+          <!-- 多个字段数组用函数处理好内容显示 -->
+          <span v-else-if="label.type === 'arr'">{{ fieldArrToContent(label.split, label.valueField) }}</span>
+          <!-- 图片 -->
+          <div v-else-if="label.type === 'img'" class="descriptions-item-content-img">
+            <img v-if="model[label.valueField]" :src="getImgUrl(model[label.valueField])" alt="">
+            <a-avatar v-else :size="90" icon="user" />
+          </div>
         </a-descriptions-item>
       </a-descriptions>
     </a-card>
@@ -90,14 +95,14 @@ export default {
           isOpen: true,
           column: 2,
           labelList: [
-            {label: '毕业院校', valueField: 'graduationInstitution'},
-            {label: '所学专业', valueField: 'majorStudied'},
-            {label: '学历', valueField: 'educationalBackground'},
-            {label: '学位', valueField: 'degree'},
-            {label: '专业技术特长', valueField: 'professionalTechnicalExpertise'},
-            {label: '会何种外语及熟练程度', valueField: 'foreignLanguage'},
-            {label: '其他语言及熟练程度', valueField: 'foreignLanguageProficiencyLevel'},
-            {label: '两院院士', valueField: 'isAcademician'},
+            { label: '毕业院校', valueField: 'graduationInstitution' },
+            { label: '所学专业', valueField: 'majorStudied' },
+            { label: '学历', valueField: 'educationalBackground' },
+            { label: '学位', valueField: 'degree' },
+            { label: '专业技术特长', valueField: 'professionalTechnicalExpertise' },
+            { label: '会何种外语及熟练程度', valueField: ['foreignLanguage', 'foreignLanguageProficiencyLevel'], split: ' ', type: 'arr'  },
+            { label: '其他语言及熟练程度', valueField: 'otherLanguagesAndProficiencyLevels' },
+            { label: '两院院士', valueField: 'isAcademician' },
           ]
         }
       ]
@@ -129,6 +134,22 @@ export default {
     // 获取图片url
     getImgUrl (id) {
       return getFileAccessHttpUrl(id)
+    },
+    /**
+     * 将字段数组转内容
+     * @param split - 分隔符
+     * @param fieldArr - 字段的数组
+     * @return {string} - 返回拼接的内容
+     */
+    fieldArrToContent (split, fieldArr) {
+      let arr = []
+      fieldArr.forEach(field => {
+        const val = this.model[field]
+        if (val || val === 0) {
+          arr.push(val)
+        }
+      })
+      return arr.join(split)
     }
   }
 }

src/views/organizationalManage/committeeMemberInfo/CommitteeMemberInfoList.vue

@@ -75,10 +75,18 @@
             </a-tooltip>
           </template>
 
+          <!--操作-->
+          <span slot="action" class="action-span-cell" slot-scope="record">
+            <a v-has="'committeeMemberInfo:uploadPhoto'" @click="uploadPhoto(record)">上传个人头像</a>
+          </span>
+
         </a-table>
       </div>
       <!--    /table表格区域-->
     </a-card>
+
+    <!-- 上传图片 -->
+    <upload-photo-modal ref="uploadPhotoModal" @ok="handleUploadPhotoOk"></upload-photo-modal>
   </div>
 </template>
 
@@ -86,9 +94,10 @@
 import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
 import IconImg from '@/assets/imgs/icon/icon_organizational_manage.png'
 import {JeroListMixin} from '@/mixins/JeroListMixin'
+import UploadPhotoModal from '@views/organizationalManage/committeeMemberInfo/modules/UploadPhotoModal'
 export default {
   name: 'CommitteeMemberInfoList',
-  components: {PageHeaderTitle},
+  components: {UploadPhotoModal, PageHeaderTitle},
   mixins: [JeroListMixin],
   data () {
     return {
@@ -129,14 +138,14 @@ export default {
           align: 'center',
           width: 140,
           dataIndex: 'committeeNumber',
-          scopedSlots: { customRender: 'detail' }
+          scopedSlots: { customRender: 'text' }
         },
         {
           title: '委员姓名',
           align: 'center',
           width: 140,
           dataIndex: 'name',
-          scopedSlots: { customRender: 'text' }
+          scopedSlots: { customRender: 'detail' }
         },
         {
           title: '性别',
@@ -173,6 +182,13 @@ export default {
           dataIndex: 'appointmentLetterNumber',
           scopedSlots: { customRender: 'text' }
         },
+        {
+          title: '操作',
+          dataIndex: '',
+          align: 'center',
+          width: 100,
+          scopedSlots: { customRender: 'action' }
+        },
       ],
       url: {
         list: '/PayCommitteeMemberInfo/page'
@@ -193,6 +209,19 @@ export default {
         }
       })
     },
+    /**
+     * 上传个人头像
+     * @param record
+     */
+    uploadPhoto (record) {
+      this.$refs.uploadPhotoModal.edit(record)
+    },
+    /**
+     * 上传个人头像完成
+     */
+    handleUploadPhotoOk () {
+      this.loadData()
+    },
     // 下拉框的搜索
     filterOption(input, option) {
       return (

src/views/organizationalManage/committeeMemberInfo/modules/UploadPhotoModal.vue

@@ -0,0 +1,102 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item label="个人照片" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <j-image-upload v-decorator="['photo', validatorRules.photo]" :return-id="true"></j-image-upload>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </j-modal>
+</template>
+
+<script>
+import JImageUpload from '@comp/jero/JImageUpload'
+import pick from 'lodash.pick'
+import {postAction} from '@api/manage'
+export default {
+  name: 'UploadPhotoModal',
+  components: {JImageUpload},
+  data() {
+    return {
+      form: this.$form.createForm(this),
+      title: '操作',
+      width: 600,
+      visible: false,
+      model: {},
+      labelCol: {
+        xs: {span: 24},
+        sm: {span: 5}
+      },
+      wrapperCol: {
+        xs: {span: 24},
+        sm: {span: 10}
+      },
+      confirmLoading: false,
+      validatorRules: {
+        photo: {
+          rules: [{required: true, message: '请上传个人照片'}],
+          validateTrigger: 'change'
+        }
+      },
+      url: {
+        edit: '/PayCommitteeMemberInfo/uploadPhoto'
+      }
+    }
+  },
+  methods: {
+    add() {
+      this.edit({})
+    },
+    edit(record) {
+      this.model = Object.assign({}, record)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'photo'))
+      })
+    },
+    close() {
+      this.form.resetFields()
+      this.$emit('close')
+      this.visible = false
+    },
+    handleOk() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const formData = Object.assign({ id: this.model.id }, values)
+          console.log('表单提交数据', formData)
+          postAction(this.url.edit, formData).then((res) => {
+            if (res.success) {
+              that.$message.success(res.message)
+              that.$emit('ok')
+              that.close()
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    handleCancel() {
+      this.close()
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>