更新

src/views/webSiteManagement/industryApplication/applicationCate/index.vue

 <!--
  * @Author: your name
  * @Date: 2020-12-02 10:27:53
- * @LastEditTime: 2020-12-04 09:04:15
+ * @LastEditTime: 2020-12-04 09:49:42
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\index.vue
@@ -308,7 +308,7 @@ export default {
         justify-content: center;
         align-items: center;
         border-radius: 5px;
-        background-color: #1890ff;
+        background-color: #5178F2;
         color: #FFFFFF;
         cursor: pointer;
       }

src/views/webSiteManagement/industryApplication/applicationList/addApp/index.vue

 <!--
  * @Author: your name
  * @Date: 2020-12-04 09:09:37
- * @LastEditTime: 2020-12-04 09:29:00
+ * @LastEditTime: 2020-12-04 10:47:14
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\addApp\index.vue
@@ -14,18 +14,121 @@
             返回上一页
         </div>
     </div>
+    <div class="content">
+      <el-form ref="form" :model="form" label-width="120px">
+        <div class="item">
+          <div class="title">基本信息</div>
+          <div class="form">
+            <el-form-item label="*应用名称">
+                <el-col :span="12">
+                    <el-input v-model="form.name" placeholder="请输入应用名称"></el-input>
+                </el-col>
+            </el-form-item>
+            <el-form-item label="*封面图">
+                <singleImageX :value="form.coverImg" @input="onCoverPreview"></singleImageX>
+            </el-form-item>
+            <el-form-item label="*详情图">
+                <singleImageX :value="form.detailImg" @input="onDetailPreview"></singleImageX>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="item">
+          <div class="title">应用参数</div>
+          <div class="form">
+            <el-form-item label="*行业">
+                <el-col :span="12">
+                    <el-input v-model="form.industry" placeholder="请输入行业"></el-input>
+                </el-col>
+            </el-form-item>
+            <el-form-item label="*地区">
+                <el-col :span="12">
+                    <el-input v-model="form.region" placeholder="请输入地区"></el-input>
+                </el-col>
+            </el-form-item>
+            <el-form-item label="*数据采集时间">
+                <el-col :span="12">
+                    <el-input v-model="form.collectTime" placeholder="请输入数据采集时间"></el-input>
+                </el-col>
+            </el-form-item>
+            <el-form-item label="*数据来源">
+                <el-col :span="12">
+                    <el-input v-model="form.origin" placeholder="请输入数据来源"></el-input>
+                </el-col>
+            </el-form-item>
+            <el-form-item label="*成果形式">
+                <el-col :span="12">
+                    <el-input v-model="form.achievement" placeholder="请输入成果形式"></el-input>
+                </el-col>
+            </el-form-item>
+            <el-form-item label="*分辨率">
+                <el-col :span="12">
+                    <el-input v-model="form.resolvpower" placeholder="请输入分辨率"></el-input>
+                </el-col>
+            </el-form-item>
+            <el-form-item label="*是否提供样例">
+                <el-radio-group v-model="form.isSample">
+                  <el-radio-button label="是"></el-radio-button>
+                  <el-radio-button label="否"></el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="*是否提供定制">
+                <el-radio-group v-model="form.isCustomized">
+                  <el-radio-button label="是"></el-radio-button>
+                  <el-radio-button label="否"></el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="*上传样例">
+                <el-upload class="upload-demo" action="#" :auto-upload="false" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="100" :on-exceed="handleExceed" :http-request="onUploadRequest" :file-list="form.fileList">
+                <el-button size="small" type="primary">点击上传</el-button>
+                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+              </el-upload>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="item">
+          <div class="title">应用简介</div>
+          <div class="form">
+            <el-form-item label="*产品简介">
+                <Kind-editor  ref="kindeditor" :html="form.html" @input="getContent"></Kind-editor>
+            </el-form-item>
+          </div>
+        </div>
+        <el-form-item>
+            <el-button @click="$parent.componentName='appList'">取消</el-button>
+            <el-button type="primary" @click="onSubmit">确定</el-button>
+        </el-form-item>
+      </el-form>
+      </div>
   </div>
 </template>
 
 <script>
+import singleImageX from '@/components/Upload/singleImageX';
+import KindEditor from "@/components/Kindeditor";
 export default {
   name: 'addApp',
   components: {
-
+    singleImageX,
+    KindEditor
   },
   data(){
     return {
-
+      form: {
+        name: '',
+        coverImg: '',
+        detailImg: '',
+        industry: '',
+        region: '',
+        collectTime: '',
+        origin: '',
+        achievement: '',
+        resolvpower: '',
+        isSample: '是',
+        isCustomized: '是',
+        fileList: [],
+        content: '',
+        html: 'https://ebusiness-1255313385.cosbj.myqcloud.com/image/20190823/center2019082304054532.html',
+      }
     }
   },
   mounted() {
@@ -38,6 +141,44 @@ export default {
     backup(){
       this.$parent.componentName='appList'
       this.$bus.$emit('hideThreeRoute',true)
+    },
+    // 获取编辑器内容
+    getContent(content) {
+        this.form.content = content
+    },
+    // 编辑器内容转换成在线url
+    async getcontent2Url() {
+        try {
+            const htmlUrl =  await this.$refs.kindeditor.content2Url()
+            return htmlUrl
+        } catch (error) {
+            console.log(error)
+        }
+    },
+    // 上传样例
+    onUploadRequest(data) {
+      console.log("uploadData=>",data)
+    },
+    onCoverPreview(url){   
+      this.form.coverImg = url
+    },
+    onDetailPreview(url){
+      this.form.detailImg = url
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${ file.name }？`);
+    },
+    onSubmit() {
+        console.log('submit!');
     }
   },
 }
@@ -74,5 +215,36 @@ export default {
                 cursor: pointer;
             }
         }
+        .content{
+          width: 100%;
+          height: auto;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          .item{
+            width: 100%;
+            height: auto;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            .title{
+              padding-left: 40px;
+              width: calc(100% - 40px);
+              height: 36px;
+              display: flex;
+              flex-direction: row;
+              justify-content: flex-start;
+              align-items: center;
+              background-color: #F2F2F2;
+              color: #000000;
+            }
+            .form{
+              padding-top: 20px;
+              padding-left: 20px;
+              width: calc(100% - 40px);
+              height: auto;
+            }
+          }
+        }
   }
 </style>
\ No newline at end of file

src/views/webSiteManagement/industryApplication/applicationList/appList/index.vue

 <!--
  * @Author: your name
  * @Date: 2020-12-02 10:27:53
- * @LastEditTime: 2020-12-04 09:15:25
+ * @LastEditTime: 2020-12-04 09:49:19
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\index.vue
@@ -256,7 +256,7 @@ export default {
         justify-content: center;
         align-items: center;
         border-radius: 5px;
-        background-color: #1890ff;
+        background-color: #5178F2;
         color: #FFFFFF;
         cursor: pointer;
       }