金融机构更新

package.json

@@ -16,7 +16,8 @@
     "vue": "^2.6.11",
     "vue-meta": "^2.3.3",
     "vue-router": "^3.1.5",
-    "vuex": "^3.1.2"
+    "vuex": "^3.1.2",
+    "wangeditor": "^3.1.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.2.0",

src/components/upload.vue

@@ -0,0 +1,103 @@
+<template>
+  <div id="upload">
+    <el-upload
+      v-if="url"
+      ref="upload"
+      :action="url"
+      :list-type="listType"
+      :file-list="fileList"
+      :limit="limit"
+      :on-exceed="outLimit"
+      :on-preview="handlePictureCardPreview"
+      :before-remove="handleRemove"
+      :on-success="onSuccess"
+      :show-file-list="showList"
+      :accept="accept"
+    >
+      <el-button size="small" type="primary" v-if="isBtn">点击上传</el-button>
+      <template v-else>
+        <i class="el-icon-plus"></i>
+      </template>
+      <template #tip v-if="tip">
+        {{ tip }}
+      </template>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" alt="" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+export default {
+  name: 'upload',
+  props: {
+    url: { type: null },
+    limit: { type: Number },
+    data: { type: null },
+    type: { type: String },
+    isBtn: { type: Boolean, default: false },
+    showList: { type: Boolean, default: true },
+    accept: { type: String },
+    tip: { type: String, default: undefined },
+    listType: { type: String, default: 'picture-card' },
+  },
+  components: {},
+  data: () => ({
+    dialogVisible: false,
+    dialogImageUrl: '',
+    fileList: [],
+  }),
+  created() {
+    if (this.data) {
+      this.defalutProcess(this.data);
+    }
+  },
+  watch: {
+    data: {
+      handler(val) {
+        this.defalutProcess(val);
+      },
+    },
+  },
+  computed: {},
+  methods: {
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    handleRemove(file) {
+      return true;
+    },
+    outLimit() {
+      this.$message.error('只允许上传1个文件');
+    },
+    onSuccess(response, file, fileList) {
+      //将文件整理好传回父组件
+      this.$emit('upload', { type: this.type, data: response });
+    },
+    defalutProcess(val) {
+      if (typeof val === 'object' && _.get(val, length) !== undefined && val.length > 0) {
+        let newArr = [];
+        val.map(item => {
+          let object = {};
+          object.name = item.name;
+          object.url = `${item.uri}`;
+          newArr.push(object);
+        });
+        this.$set(this, `fileList`, newArr);
+      } else if (typeof val === 'object' && _.get(val, length) === undefined) {
+        let object = {};
+        object.name = val.name;
+        object.url = `${val.uri}`;
+        this.$set(this, `fileList`, [object]);
+      } else if (typeof val === 'string') {
+        this.$set(this, `fileList`, [{ name: '附件', url: val }]);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/components/wang-editor.vue

@@ -0,0 +1,77 @@
+<template>
+  <div ref="editor" style="text-align:left"></div>
+</template>
+<script>
+import E from 'wangeditor';
+
+const menus = [
+  'head', // 标题
+  'bold', // 粗体
+  'fontSize', // 字号
+  'fontName', // 字体
+  'italic', // 斜体
+  'underline', // 下划线
+  'strikeThrough', // 删除线
+  'foreColor', // 文字颜色
+  'backColor', // 背景颜色
+  'link', // 插入链接
+  'list', // 列表
+  'justify', // 对齐方式
+  'quote', // 引用
+  // 'emoticon', // 表情
+  'table', // 表格
+  // 'video', // 插入视频
+  // 'code', // 插入代码
+  'undo', // 撤销
+  'redo', // 重复
+];
+
+export default {
+  name: 'wang-editor',
+  model: {
+    prop: 'value',
+    event: 'change', // 默认为input时间，此处改为change
+  },
+  props: {
+    value: { type: String, required: false, default: '' },
+  },
+  data() {
+    return {
+      editorContent: this.value,
+    };
+  },
+  mounted() {
+    var editor = new E(this.$refs.editor);
+    editor.customConfig.onchange = html => {
+      this.editorContent = html;
+      this.$emit('change', html);
+    };
+    // 自定义菜单配置
+    editor.customConfig.menus = menus;
+    editor.customConfig.zIndex = 0;
+    editor.customConfig.uploadImgServer = '/files/cms/images/upload';
+    editor.customConfig.uploadImgMaxLength = 1;
+    editor.customConfig.uploadImgHooks = {
+      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
+      // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
+      customInsert: function(insertImg, result, editor) {
+        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
+        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
+
+        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
+        var url = result.uri;
+        insertImg(url);
+
+        // result 必须是一个 JSON 格式字符串！！！否则报错
+      },
+    };
+    editor.create();
+    editor.txt.html(this.value);
+  },
+  methods: {
+    getContent: function() {
+      return this.editorContent;
+    },
+  },
+};
+</script>

src/layout/institution/detailInfo.vue

@@ -1,54 +1,43 @@
 <template>
   <div id="detailInfo">
     <el-row>
-      <el-col :span="24">
+      <el-col :span="24" class="info">
         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
           <el-form-item label="金融机构名称" prop="name">
-            <el-input v-model="ruleForm.name"></el-input>
+            <el-input v-model="ruleForm.name" placeholder="请输入金融机构名称"></el-input>
           </el-form-item>
           <el-form-item label="机构logo" prop="logo">
-            <el-input v-model="ruleForm.logo"></el-input>
-            <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="dialogVisible">
-              <img width="100%" :src="dialogImageUrl" alt="" />
-            </el-dialog>
+            <upload :limit="1" :data="ruleForm.logo" type="logo" :url="`/files/teacher/upload`" @upload="uploadSuccess"></upload>
           </el-form-item>
           <el-form-item label="机构简称">
-            <el-input v-model="ruleForm.abbreviation"></el-input>
+            <el-input v-model="ruleForm.abbreviation" placeholder="请输入机构简称"></el-input>
           </el-form-item>
           <el-form-item label="机构英文名称">
-            <el-input v-model="ruleForm.english_name"></el-input>
+            <el-input v-model="ruleForm.english_name" placeholder="请输入机构英文名称"></el-input>
           </el-form-item>
-          <el-form-item label="所属行业	">
+          <el-form-item label="所属行业">
             <el-select v-model="ruleForm.profession" placeholder="请选择所属行业">
               <el-option label="行业1" value="hangye1"></el-option>
               <el-option label="行业2" value="hangye2"></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="机构类型	">
+          <el-form-item label="机构类型">
             <el-select v-model="ruleForm.nature" placeholder="请选择机构类型">
               <el-option label="类型1" value="leixing1"></el-option>
               <el-option label="类型2" value="leixing2"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="组织形式">
-            <el-input v-model="ruleForm.form"></el-input>
+            <el-input v-model="ruleForm.form" placeholder="请输入机构形式"></el-input>
           </el-form-item>
           <el-form-item label="机构官网网址">
-            <el-input v-model="ruleForm.website"></el-input>
+            <el-input v-model="ruleForm.website" placeholder="请输入机构官网网址"></el-input>
           </el-form-item>
           <el-form-item label="法定代表人">
-            <el-input v-model="ruleForm.representative"></el-input>
+            <el-input v-model="ruleForm.representative" placeholder="请输入法定代表人"></el-input>
           </el-form-item>
           <el-form-item label="联系电话">
-            <el-input v-model="ruleForm.contact_number"></el-input>
+            <el-input v-model="ruleForm.contact_number" placeholder="请输入联系电话"></el-input>
           </el-form-item>
           <el-form-item label="所属地区">
             <el-select v-model="ruleForm.belong_addr" placeholder="请选择所属地区">
@@ -57,30 +46,29 @@
             </el-select>
           </el-form-item>
           <el-form-item label="办公地址">
-            <el-input v-model="ruleForm.business_addr"></el-input>
+            <el-input v-model="ruleForm.business_addr" placeholder="请输入办公地址"></el-input>
           </el-form-item>
           <el-form-item label="注册地址">
-            <el-input v-model="ruleForm.registered_addr"></el-input>
+            <el-input v-model="ruleForm.registered_addr" placeholder="请输入注册地址"></el-input>
           </el-form-item>
           <el-form-item label="创立时间">
-            <el-col :span="11">
-              <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.establish_time" style="width: 100%;"></el-date-picker>
-            </el-col>
+            <el-date-picker v-model="ruleForm.establish_time" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
+            </el-date-picker>
           </el-form-item>
           <el-form-item label="组织机构号码">
-            <el-input v-model="ruleForm.code"></el-input>
+            <el-input v-model="ruleForm.code" placeholder="请输入组织机构号码"></el-input>
           </el-form-item>
           <el-form-item label="管理资金规模">
-            <el-input v-model="ruleForm.size"></el-input>
+            <el-input v-model="ruleForm.size" placeholder="请输入管理资金规模"></el-input>
           </el-form-item>
           <el-form-item label="注册资本">
-            <el-input v-model="ruleForm.registered_capital"></el-input>
+            <el-input v-model="ruleForm.registered_capital" placeholder="请输入注册资本"></el-input>
           </el-form-item>
           <el-form-item label="实缴资金">
-            <el-input v-model="ruleForm.contributed_capital"></el-input>
+            <el-input v-model="ruleForm.contributed_capital" placeholder="请输入实缴资金"></el-input>
           </el-form-item>
           <el-form-item label="机构简介">
-            <el-input type="textarea" v-model="ruleForm.introduction"></el-input>
+            <wang-editor v-model="ruleForm.introduction" placeholder="请输入机构简介"></wang-editor>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
@@ -93,12 +81,17 @@
 </template>
 
 <script>
+import WangEditor from '@/components/wang-editor.vue';
+import upload from '@/components/upload.vue';
 export default {
   name: 'detailInfo',
   props: {
     ruleForm: null,
   },
-  components: {},
+  components: {
+    WangEditor, //富文本
+    upload, //图片
+  },
   data: () => ({
     rules: {
       name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
@@ -108,14 +101,31 @@ export default {
   created() {},
   computed: {},
   methods: {
-    submitForm(ruleForm) {
-      this.$emit('submitForm', { data: this.form });
+    submitForm() {
+      this.$emit('submitForm', { data: this.ruleForm });
     },
     resetForm() {
       this.$emit('resetForm');
     },
+    uploadSuccess({ type, data }) {
+      if (type !== 'logo') {
+        let arr = _.get(this.ruleForm, type);
+        if (arr !== undefined) {
+          this.ruleForm[type].push({ name: data.name, uri: data.uri });
+        } else {
+          let newArr = [{ name: data.name, uri: data.uri }];
+          this.$set(this.ruleForm, `${type}`, newArr);
+        }
+      } else {
+        this.$set(this.ruleForm, `${type}`, data.uri);
+      }
+    },
   },
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="less" scoped>
+.info {
+  padding: 0 200px 0 0;
+}
+</style>