案例

foyo-service/src/main/java/com/huiju/foyo/controller/TaCaseController.java

@@ -4,6 +4,7 @@ import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.huiju.foyo.common.BaseController;
+import com.huiju.foyo.common.ConstantFoyo;
 import com.huiju.foyo.common.ResponseBean;
 import com.huiju.foyo.model.TaCase;
 import com.huiju.foyo.service.ITaCaseService;
@@ -18,6 +19,8 @@ import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.ResponseBody;
 import org.springframework.web.bind.annotation.RestController;
 
+import java.time.LocalDateTime;
+
 /**
  * <p>
     * 案例表  前端控制器
@@ -42,7 +45,7 @@ public class TaCaseController extends BaseController {
      * @param pageSize
      * @return
      */
-    @RequestMapping(value="/taCase",method= RequestMethod.GET)
+    @RequestMapping(value="/admin/case/list",method= RequestMethod.GET)
     public ResponseBean taCaseList(@RequestParam(value ="pageNum",defaultValue = "1") Integer pageNum,
                                    @RequestParam(value ="pageSize",defaultValue = "10") Integer pageSize){
         ResponseBean responseBean = new ResponseBean();
@@ -50,6 +53,8 @@ public class TaCaseController extends BaseController {
             //使用分页插件
 		    IPage<TaCase> pg = new Page<>(pageNum, pageSize);
             QueryWrapper<TaCase> queryWrapper = new QueryWrapper<>();
+            queryWrapper.eq("status", ConstantFoyo.STATUS_EFFECTIVE);
+            queryWrapper.orderByDesc("sort");
             queryWrapper.orderByDesc("create_time");
 
             IPage<TaCase> result = iTaCaseService.page(pg, queryWrapper);
@@ -67,10 +72,13 @@ public class TaCaseController extends BaseController {
      * @param taCase 实体对象
      * @return
      */
-    @RequestMapping(value="/taCase",method= RequestMethod.POST)
+    @RequestMapping(value="/admin/case/add",method= RequestMethod.POST)
     public ResponseBean taCaseAdd(@RequestBody TaCase taCase){
         ResponseBean responseBean = new ResponseBean();
         try {
+            taCase.setStatus(ConstantFoyo.STATUS_EFFECTIVE);
+            taCase.setCreateBy(ConstantFoyo.USER_ADMIN);
+            taCase.setCreateTime(LocalDateTime.now());
             if (iTaCaseService.save(taCase)){
                 responseBean.addSuccess(taCase);
             }else {

foyo-service/src/main/java/com/huiju/foyo/controller/TaCaseTypeController.java

@@ -4,6 +4,7 @@ import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.huiju.foyo.common.BaseController;
+import com.huiju.foyo.common.ConstantFoyo;
 import com.huiju.foyo.common.ResponseBean;
 import com.huiju.foyo.model.TaCaseType;
 import com.huiju.foyo.service.ITaCaseTypeService;
@@ -146,4 +147,22 @@ public class TaCaseTypeController extends BaseController {
         }
         return responseBean;
     }
+    
+    /**
+     * 查询列表
+     */
+    @RequestMapping(value="/admin/caseType/list",method= RequestMethod.GET)
+    public ResponseBean getCaseTypeList(){
+        ResponseBean responseBean = new ResponseBean();
+        try {
+            QueryWrapper<TaCaseType> queryWrapper = new QueryWrapper<>();
+            queryWrapper.orderByDesc("create_time");
+            responseBean.addSuccess(iTaCaseTypeService.list(queryWrapper));
+        }catch (Exception e){
+            e.printStackTrace();
+            logger.error("taCaseTypeList -=- {}",e.toString());
+            responseBean.addError(e.getMessage());
+        }
+        return responseBean;
+    }
 }

foyo-service/src/main/java/com/huiju/foyo/model/TaCase.java

@@ -95,7 +95,7 @@ public class TaCase implements Serializable {
     /**
      * 案例内容
      */
-    private String caseContent;
+    private String content;
 
 
 }

foyo.pdman.json

@@ -414,7 +414,7 @@
               "chnname": "所属行业"
             },
             {
-              "name": "case_content",
+              "name": "content",
               "type": "LongText",
               "remark": "",
               "chnname": "案例内容"

vue-element-admin/package.json

@@ -61,6 +61,7 @@
     "vue-splitpane": "1.0.2",
     "vuedraggable": "^2.16.0",
     "vuex": "3.0.1",
+    "wangeditor": "^3.1.1",
     "xlsx": "^0.11.16"
   },
   "devDependencies": {

vue-element-admin/src/api/case.js

@@ -23,3 +23,26 @@ export function deleteServiceBatch(data) {
     data
   })
 }
+
+export function getCaseListData(query) {
+  return request({
+    url: '/case/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getCaseTypeListData(query) {
+  return request({
+    url: '/caseType/list',
+    method: 'get'
+  })
+}
+
+export function addCase(data) {
+  return request({
+    url: '/case/add',
+    method: 'post',
+    data
+  })
+}

vue-element-admin/src/components/Wangeditor/index.vue

@@ -0,0 +1,77 @@
+<template>
+    <div id="websiteEditorElem" style="height: 400px"></div>
+</template>
+
+<script>
+    import E from 'wangeditor'
+    export default {
+        name: "index",
+        props:[
+          'content'
+        ],
+        watch: {
+            text(newVal, oldVal) {
+                console.log(newVal, oldVal)
+                //this.phoneEditor.txt.html(this.text)
+                if (!newVal && oldVal) {
+                    this.text = newVal
+                    this.intiPhoneEditor()
+                }
+                this.sendContent()
+            }
+        },
+        data() {
+          return {
+              text: this.content,
+              phoneEditor: ''
+          }
+        },
+        mounted() {
+            this.$nextTick(() => {
+                this.intiPhoneEditor()
+            })
+        },
+        methods: {
+            sendContent() {
+                this.$emit('get-content', this.text)
+            },
+            intiPhoneEditor() {
+                console.log('初始化值：', this.text)
+                const _that = this
+                _that.phoneEditor = new E('#websiteEditorElem')
+                const phoneEditor = _that.phoneEditor
+                phoneEditor.customConfig.zIndex = 1
+                phoneEditor.customConfig.onchange = function (html) {
+                    _that.text = html
+                }
+                // phoneEditor.customConfig.uploadImgServer = this.upFileUrl
+                // phoneEditor.customConfig.uploadFileName = 'uploadFiles'
+
+                // phoneEditor.customConfig.customUploadImg = function (files, insert) {
+                //     _that.uploadImg(files[0]).then(data => {
+                //         insert(data)
+                //     })
+                // }
+                phoneEditor.customConfig.menus = [
+                    'head',  // 标题
+                    'bold',  // 粗体
+                    'fontSize',  // 字号
+                    'fontName',  // 字体
+                    'italic',  // 斜体
+                    'underline',  // 下划线
+                    'strikeThrough',  // 删除线
+                    'foreColor',  // 文字颜色
+                    'backColor',  // 背景颜色
+                    'justify',  // 对齐方式
+                    'image',  // 插入图片
+                ]
+                phoneEditor.create()
+                phoneEditor.txt.html(this.text)
+            },
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

vue-element-admin/src/store/modules/case.js

@@ -1,4 +1,4 @@
-import { serviceCaseCover, addCaseCover, deleteServiceBatch } from '@/api/case'
+import { serviceCaseCover, addCaseCover, getCaseListData, deleteServiceBatch, addCase, getCaseTypeListData } from '@/api/case'
 
 const servicecase = {
   namespaced: true,
@@ -22,6 +22,33 @@ const servicecase = {
         })
       })
     },
+    createCase({ commit, state }, data) {
+      return new Promise((resolve, reject) => {
+        addCase(data).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    getCaseList({ commit, state }, data) {
+      return new Promise((resolve, reject) => {
+        getCaseListData(data).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    getCaseTypeList({ commit, state }, data) {
+      return new Promise((resolve, reject) => {
+        getCaseTypeListData(data).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
     deleteService({ commit, state }, data) { // 删除 活动报名人员
       return new Promise((resolve, reject) => {
         deleteServiceBatch(data).then(response => {

vue-element-admin/src/views/case/add.vue

@@ -1,13 +1,10 @@
 <template>
   <div id="app" class="app-container">
     <el-form ref="form" :model="form">
-      <el-form-item :label-width="formLabelWidth" label="业务名称">
-        <el-input v-model="form.serviceName"/>
+      <el-form-item :label-width="formLabelWidth" label="案例标题">
+        <el-input v-model="form.caseTitle"/>
       </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="权重">
-        <el-input v-model="form.sort"/>
-      </el-form-item>
-      <el-form-item :label-width="formLabelWidth" label="banner图">
+      <el-form-item :label-width="formLabelWidth" label="案例封面图">
         <el-upload
           :action= "uploadImgUrl"
           :show-file-list="false"
@@ -18,24 +15,42 @@
           <i v-else class="el-icon-plus avatar-uploader-icon"/>
         </el-upload>
       </el-form-item>
+      <el-form-item :label-width="formLabelWidth" label="案例简介">
+        <el-input v-model="form.caseSummary"/>
+      </el-form-item>
+      <el-form-item :label-width="formLabelWidth" label="案例类型">
+        <el-select v-model="form.taCaseTypeId" placeholder="请选择案例类型">
+          <el-option v-for="item in caseTypeList" :key="item.id" :value="item.id" :label="item.typeName"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item :label-width="formLabelWidth" label="案例客户方logo">
+        <el-upload
+          :action= "uploadImgUrl"
+          :show-file-list="false"
+          :on-success="handleLogoSuccess"
+          class="avatar-uploader"
+          name="uploadFiles">
+          <img v-if="logoUrl" :src="logoUrl" class="avatar">
+          <i v-else class="el-icon-plus avatar-uploader-icon"/>
+        </el-upload>
+      </el-form-item>
+      <el-form-item :label-width="formLabelWidth" label="所属行业">
+        <el-input v-model="form.caseIndustry"/>
+      </el-form-item>
       <el-form-item>
-        <el-tag
-          v-for="tag in dynamicTags"
-          :key="tag"
-          :disable-transitions="false"
-          closable
-          @close="handleClose(tag)">
-          {{ tag }}
-        </el-tag>
-        <el-input
-          v-if="inputVisible"
-          ref="saveTagInput"
-          v-model="inputValue"
-          size="small"
-          class="input-new-tag"
-          @keyup.enter.native="handleInputConfirm"
-          @blur="handleInputConfirm"/>
-        <el-button v-else class="button-new-tag" closable @click="showInput">+ 添加标签</el-button>
+        <p class="title">案例内容</p>
+        <div id="websiteEditorElem" style="height: 400px"/>
+      </el-form-item>
+      <el-form-item :label-width="formLabelWidth" label="权重">
+        <el-input v-model="form.sort"/>
+      </el-form-item>
+      <el-form-item :label-width="formLabelWidth" label="是否置顶">
+        <el-switch
+          v-model="form.topping"
+          active-color="#13ce66"
+          inactive-color="#ff4949"
+          active-value="1"
+          inactive-value="0"/>
       </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
@@ -49,6 +64,7 @@
 // import { updateArticle, createBanner } from '@/api/banner' // getBanner
 import waves from '@/directive/waves' // Waves directive
 import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import E from 'wangeditor'
 const calendarTypeOptions = [
   { key: 'CN', display_name: 'China' },
   { key: 'US', display_name: 'USA' },
@@ -84,6 +100,7 @@ export default {
       total: 0,
       listLoading: true,
       imageUrl: '', // 图片预览
+      logoUrl: '', // 图片预览
       importanceOptions: [1, 2, 3],
       calendarTypeOptions,
       communityQuery: {
@@ -98,10 +115,14 @@ export default {
       listQuery: [],
       form: {
         id: '',
-        serviceName: '',
+        caseTitle: '',
         sort: '',
-        serviceImageUrl: '',
-        labelList: []
+        caseCoverImg: '',
+        caseLogoImg: '',
+        caseSummary: '',
+        caseIndustry: '',
+        topping: 0,
+        content: ''
       },
       uploadImgUrl: process.env.BASE_API + '/uploadimage',
       dialogStatus: '',
@@ -109,6 +130,7 @@ export default {
       formLabelWidth: '120px',
       showContentVisible: false,
       showURLVisible: true,
+      caseTypeList: [],
       bannerPositionArr: [
         { id: 1, value: '首页banner' },
         { id: 2, value: '服务banner' }
@@ -118,17 +140,50 @@ export default {
       inputValue: ''
     }
   },
-  computed: {
+  mounted() {
+    const _that = this
+    const phoneEditor = new E('#websiteEditorElem')
+    phoneEditor.customConfig.zIndex = 1
+    phoneEditor.customConfig.onchange = function(html) {
+      _that.form.content = html
+      console.log('that.dynamic.url', _that.form.content)
+    }
+    // phoneEditor.customConfig.uploadImgServer = this.upFileUrl
+    // phoneEditor.customConfig.uploadFileName = 'uploadFiles'
+
+    phoneEditor.customConfig.customUploadImg = function(files, insert) {
+      _that.uploadImg(files[0]).then(data => {
+        insert(data)
+      })
+    }
+    phoneEditor.customConfig.menus = [
+      'head', // 标题
+      'bold', // 粗体
+      'fontSize', // 字号
+      'fontName', // 字体
+      'italic', // 斜体
+      'underline', // 下划线
+      'strikeThrough', // 删除线
+      'foreColor', // 文字颜色
+      'backColor', // 背景颜色
+      'justify', // 对齐方式
+      'image' // 插入图片
+    ]
+    phoneEditor.create()
   },
   created() {
-    this.listQuery = this.$route.params.listQuery
+    this.getCaseTypeList()
   },
   updated() {
   },
   methods: {
     handleAvatarSuccess(res, file) { // 上传成功回调
       this.imageUrl = URL.createObjectURL(file.raw)
-      this.form.serviceImageUrl = res.data[0]
+      this.form.caseCoverImg = res.data[0]
+    },
+    handleLogoSuccess(res, file) { // 上传成功回调
+      this.logoUrl = URL.createObjectURL(file.raw)
+      this.form.caseLogoImg = res.data[0]
     },
     dialogAddForm() {
       this.dialogFormVisible = true
@@ -138,7 +193,7 @@ export default {
     },
     dialogForm(isVaule) {
       if (isVaule === '0') {
-        this.$router.push({ name: 'service-index' })
+        this.$router.push({ name: 'case-index' })
       } else {
         this.createData()
       }
@@ -156,13 +211,13 @@ export default {
       this.$refs['form'].validate((valid) => {
         if (valid) {
           this.form.labelList = this.dynamicTags
-          this.$store.dispatch('service/createService', this.form).then((res) => {
+          this.$store.dispatch('servicecase/createCase', this.form).then((res) => {
             if (res.data.code === '0') {
               this.$message({
                 message: res.data.message,
                 type: 'success'
               })
-              this.$router.push({ name: 'service-index' })
+              this.$router.push({ name: 'case-index' })
             } else {
               this.$message({
                 message: res.data.message,
@@ -189,12 +244,24 @@ export default {
       }
       this.inputVisible = false
       this.inputValue = ''
+    },
+    getCaseTypeList() {
+      this.$store.dispatch('servicecase/getCaseTypeList', this.form).then((res) => {
+        if (res.data.code === '0') {
+          this.caseTypeList = res.data.data
+        }
+      })
     }
   }
 }
 </script>
 
 <style scoped>
+.title{
+    font-size: 14px;
+    color: #606266;
+    font-weight: 600;
+}
 .app-container {
   width: 50%;
   margin: auto;

vue-element-admin/src/views/case/index.vue

@@ -11,27 +11,32 @@
     </el-form>
     <div class="operation">
       <div>
-        <el-button type="primary" @click="addService">新增业务</el-button>
+        <el-button type="primary" @click="addCase">新增案例</el-button>
         <el-button type="danger" @click="deleteService">删除</el-button>
       </div>
     </div>
     <el-table
       v-loading="listLoading"
       ref="multipleTable"
-      :data="serviceList"
+      :data="caseList"
       border
       tooltip-effect="dark"
       style="width: 100%; margin-top: 20px;"
       @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="业务名称" align="center">
+      <el-table-column label="案例名称" align="center">
         <template slot-scope="scope">
-          <span>{{ scope.row.serviceName }}</span>
+          <span>{{ scope.row.caseTitle }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="业务图片" align="center">
+      <el-table-column label="案例封面图" align="center">
         <template slot-scope="scope">
-          <img v-if="scope.row.serviceImageUrl !== ''" :src="scope.row.serviceImageUrl" width="50" height="50">
+          <img v-if="scope.row.caseCoverImg !== ''" :src="scope.row.caseCoverImg" width="50" height="50">
+        </template>
+      </el-table-column>
+      <el-table-column label="案例客户方logo" align="center">
+        <template slot-scope="scope">
+          <img v-if="scope.row.caseLogoImg !== ''" :src="scope.row.caseLogoImg" width="50" height="50">
         </template>
       </el-table-column>
       <el-table-column label="排序" align="center">
@@ -79,7 +84,7 @@ export default {
         city: '南京',
         citylimit: false
       },
-      serviceList: [],
+      caseList: [],
       total: 0,
       listLoading: true,
       listQuery: {
@@ -101,9 +106,9 @@ export default {
     },
     getList() {
       this.listLoading = true
-      this.$store.dispatch('service/getServiceList', this.listQuery).then((res) => {
+      this.$store.dispatch('servicecase/getCaseList', this.listQuery).then((res) => {
         console.log(res)
-        this.serviceList = res.data.data.records
+        this.caseList = res.data.data.records
         this.total = res.data.data.total
         this.listLoading = false
       }).catch(() => {
@@ -126,8 +131,8 @@ export default {
         this.$router.push({ name: 'bill-info', query: { id: billId }})
       }
     },
-    addService() {
-      this.$router.push({ name: 'service-edit' })
+    addCase() {
+      this.$router.push({ name: 'case-add' })
     },
     handleFilter() {
       this.listQuery.pageNum = 1