From 916685aa02a5b8a8522b255596b48041f95dab2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E4=B8=BD=E5=90=9B?= <664953382@qq.com>
Date: Tue, 20 Jul 2021 09:54:22 +0800
Subject: [PATCH] up

---
 src/api/oss.js                             |   7 +
 src/components/Upload/multiUpload.vue      | 121 +++++++++++++++
 src/components/Upload/singleUpload.vue     | 121 +++++++++++++++
 src/layout/components/Navbar.vue           |  63 ++++----
 src/router/modules/transferPage.js         |  29 ++--
 src/views/technology/achievement/add.vue   | 165 +++++++++++++++++++++
 src/views/technology/achievement/index.vue | 156 ++++++++++++++++++-
 src/views/technology/demand/add.vue        | 151 +++++++++++++++++++
 src/views/technology/demand/index.vue      | 156 ++++++++++++++++++-
 9 files changed, 920 insertions(+), 49 deletions(-)
 create mode 100644 src/api/oss.js
 create mode 100644 src/components/Upload/multiUpload.vue
 create mode 100644 src/components/Upload/singleUpload.vue
 create mode 100644 src/views/technology/achievement/add.vue
 create mode 100644 src/views/technology/demand/add.vue

diff --git a/src/api/oss.js b/src/api/oss.js
new file mode 100644
index 0000000..50690c9
--- /dev/null
+++ b/src/api/oss.js
@@ -0,0 +1,7 @@
+import request from '@/utils/request';
+export function policy() {
+  return request({
+    url: '/aliyun/oss/policy',
+    method: 'get'
+  });
+}
diff --git a/src/components/Upload/multiUpload.vue b/src/components/Upload/multiUpload.vue
new file mode 100644
index 0000000..aaf04d5
--- /dev/null
+++ b/src/components/Upload/multiUpload.vue
@@ -0,0 +1,121 @@
+<template> 
+  <div>
+    <el-upload
+      :action="useOss?ossUploadUrl:minioUploadUrl"
+      :data="useOss?dataObj:null"
+      list-type="picture-card"
+      :file-list="fileList"
+      :before-upload="beforeUpload"
+      :on-remove="handleRemove"
+      :on-success="handleUploadSuccess"
+      :on-preview="handlePreview"
+      :limit="maxCount"
+      :on-exceed="handleExceed"
+    >
+      <i class="el-icon-plus"></i>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
+      <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import {policy} from '@/api/oss'
+
+  export default {
+    name: 'multiUpload',
+    props: {
+      //图片属性数组
+      value: Array,
+      //最大上传图片数量
+      maxCount:{
+        type:Number,
+        default:5
+      }
+    },
+    data() {
+      return {
+        dataObj: {
+          policy: '',
+          signature: '',
+          key: '',
+          ossaccessKeyId: '',
+          dir: '',
+          host: ''
+        },
+        dialogVisible: false,
+        dialogImageUrl:null,
+        useOss:false, //使用oss->true;使用MinIO->false
+        ossUploadUrl:'http://macro-oss.oss-cn-shenzhen.aliyuncs.com',
+        minioUploadUrl:'http://192.168.99.239:1818/minio/upload',
+      };
+    },
+    computed: {
+      fileList() {
+        let fileList=[];
+        for(let i=0;i<this.value.length;i++){
+          fileList.push({url:this.value[i]});
+        }
+        return fileList;
+      }
+    },
+    methods: {
+      emitInput(fileList) {
+        let value=[];
+        for(let i=0;i<fileList.length;i++){
+          value.push(fileList[i].url);
+        }
+        this.$emit('input', value)
+      },
+      handleRemove(file, fileList) {
+        this.emitInput(fileList);
+      },
+      handlePreview(file) {
+        this.dialogVisible = true;
+        this.dialogImageUrl=file.url;
+      },
+      beforeUpload(file) {
+        let _self = this;
+        if(!this.useOss){
+          //不使用oss不需要获取策略
+          return true;
+        }
+        return new Promise((resolve, reject) => {
+          policy().then(response => {
+            _self.dataObj.policy = response.data.policy;
+            _self.dataObj.signature = response.data.signature;
+            _self.dataObj.ossaccessKeyId = response.data.accessKeyId;
+            _self.dataObj.key = response.data.dir + '/${filename}';
+            _self.dataObj.dir = response.data.dir;
+            _self.dataObj.host = response.data.host;
+            resolve(true)
+          }).catch(err => {
+            console.log(err)
+            reject(false)
+          })
+        })
+      },
+      handleUploadSuccess(res, file) {
+        let url = this.dataObj.host + '/' + this.dataObj.dir + '/' + file.name;
+        if(!this.useOss){
+          //不使用oss直接获取图片路径
+          url = res.data.url;
+        }
+        this.fileList.push({name: file.name,url:url});
+        this.emitInput(this.fileList);
+      },
+      handleExceed(files, fileList) {
+        this.$message({
+          message: '最多只能上传'+this.maxCount+'张图片',
+          type: 'warning',
+          duration:1000
+        });
+      },
+    }
+  }
+</script>
+<style>
+
+</style>
+
+
diff --git a/src/components/Upload/singleUpload.vue b/src/components/Upload/singleUpload.vue
new file mode 100644
index 0000000..fea339e
--- /dev/null
+++ b/src/components/Upload/singleUpload.vue
@@ -0,0 +1,121 @@
+<template> 
+  <div>
+    <el-upload
+      :action="useOss?ossUploadUrl:minioUploadUrl"
+      :data="useOss?dataObj:null"
+      list-type="picture"
+      :multiple="false" :show-file-list="showFileList"
+      :file-list="fileList"
+      :before-upload="beforeUpload"
+      :on-remove="handleRemove"
+      :on-success="handleUploadSuccess"
+      :on-preview="handlePreview">
+      <el-button size="small" type="primary">点击上传</el-button>
+      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="fileList[0].url" alt="">
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import {policy} from '@/api/oss'
+
+  export default {
+    name: 'singleUpload',
+    props: {
+      value: String
+    },
+    computed: {
+      imageUrl() {
+        return this.value;
+      },
+      imageName() {
+        if (this.value != null && this.value !== '') {
+          return this.value.substr(this.value.lastIndexOf("/") + 1);
+        } else {
+          return null;
+        }
+      },
+      fileList() {
+        return [{
+          name: this.imageName,
+          url: this.imageUrl
+        }]
+      },
+      showFileList: {
+        get: function () {
+          return this.value !== null && this.value !== ''&& this.value!==undefined;
+        },
+        set: function (newValue) {
+        }
+      }
+    },
+    data() {
+      return {
+        dataObj: {
+          policy: '',
+          signature: '',
+          key: '',
+          ossaccessKeyId: '',
+          dir: '',
+          host: '',
+          // callback:'',
+        },
+        dialogVisible: false,
+        useOss:false, //使用oss->true;使用MinIO->false
+        ossUploadUrl:'http://macro-oss.oss-cn-shenzhen.aliyuncs.com',
+        minioUploadUrl:'http://192.168.99.239:1818/minio/upload',
+      };
+    },
+    methods: {
+      emitInput(val) {
+        this.$emit('input', val)
+      },
+      handleRemove(file, fileList) {
+        this.emitInput('');
+      },
+      handlePreview(file) {
+        this.dialogVisible = true;
+      },
+      beforeUpload(file) {
+        let _self = this;
+        if(!this.useOss){
+          //不使用oss不需要获取策略
+          return true;
+        }
+        return new Promise((resolve, reject) => {
+          policy().then(response => {
+            _self.dataObj.policy = response.data.policy;
+            _self.dataObj.signature = response.data.signature;
+            _self.dataObj.ossaccessKeyId = response.data.accessKeyId;
+            _self.dataObj.key = response.data.dir + '/${filename}';
+            _self.dataObj.dir = response.data.dir;
+            _self.dataObj.host = response.data.host;
+            // _self.dataObj.callback = response.data.callback;
+            resolve(true)
+          }).catch(err => {
+            console.log(err)
+            reject(false)
+          })
+        })
+      },
+      handleUploadSuccess(res, file) {
+        this.showFileList = true;
+        this.fileList.pop();
+        let url = this.dataObj.host + '/' + this.dataObj.dir + '/' + file.name;
+        if(!this.useOss){
+          //不使用oss直接获取图片路径
+          url = res.data.url;
+        }
+        this.fileList.push({name: file.name, url: url});
+        this.emitInput(this.fileList[0].url);
+      }
+    }
+  }
+</script>
+<style>
+
+</style>
+
+
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 5357ccd..d53fe9c 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,14 +1,19 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger
+      id="hamburger-container"
+      :is-active="sidebar.opened"
+      class="hamburger-container"
+      @toggleClick="toggleSideBar"
+    />
 
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
 
-    <div class="right-menu">
+    <!-- <div class="right-menu">
       <template v-if="device!=='mobile'">
-        <search id="header-search" class="right-menu-item" />
-        
-        <!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
+        <search id="header-search" class="right-menu-item" /> -->
+
+    <!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
           <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
         </el-tooltip>
 
@@ -16,7 +21,7 @@
           <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
         </el-tooltip> -->
 
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
+    <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
         <el-tooltip content="布局大小" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
@@ -41,19 +46,19 @@
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
+import { mapGetters } from 'vuex';
+import Breadcrumb from '@/components/Breadcrumb';
+import Hamburger from '@/components/Hamburger';
+import Screenfull from '@/components/Screenfull';
+import SizeSelect from '@/components/SizeSelect';
+import Search from '@/components/HeaderSearch';
+import RuoYiGit from '@/components/RuoYi/Git';
+import RuoYiDoc from '@/components/RuoYi/Doc';
 
 export default {
   components: {
@@ -66,20 +71,16 @@ export default {
     RuoYiDoc
   },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'device'
-    ]),
+    ...mapGetters(['sidebar', 'avatar', 'device']),
     setting: {
       get() {
-        return this.$store.state.settings.showSettings
+        return this.$store.state.settings.showSettings;
       },
       set(val) {
         this.$store.dispatch('settings/changeSetting', {
           key: 'showSettings',
           value: val
-        })
+        });
       }
     }
   },
@@ -95,11 +96,11 @@ export default {
       }).then(() => {
         this.$store.dispatch('LogOut').then(() => {
           location.href = '/index';
-        })
-      })
+        });
+      });
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -108,18 +109,18 @@ export default {
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.025);
     }
   }
 
@@ -151,10 +152,10 @@ export default {
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: background 0.3s;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.025);
         }
       }
     }
diff --git a/src/router/modules/transferPage.js b/src/router/modules/transferPage.js
index 173c891..7364a22 100644
--- a/src/router/modules/transferPage.js
+++ b/src/router/modules/transferPage.js
@@ -15,27 +15,28 @@ const nestedRouter = {
       name: 'demand',
       meta: { title: '企业需求' }
     },
-    // {
-    //   path: 'addDemand',
-    //   component: resolve => require(['@/views/technology/demand/add'], resolve),
-    //   name: 'addDemand',
-    //   meta: { title: '企业需求' },
-    //   hidden: true
-    // },
+    {
+      path: 'addDemand',
+      component: resolve => require(['@/views/technology/demand/add'], resolve),
+      name: 'addDemand',
+      meta: { title: '企业需求' },
+      hidden: true
+    },
     {
       path: 'achievement',
       component: resolve =>
         require(['@/views/technology/achievement/index'], resolve),
       name: 'achievement',
       meta: { title: '科技成果' }
+    },
+    {
+      path: 'addAchievement',
+      component: resolve =>
+        require(['@/views/technology/achievement/add'], resolve),
+      name: 'addAchievement',
+      meta: { title: '科技成果' },
+      hidden: true
     }
-    // {
-    //   path: 'addAchievement',
-    //   component: resolve => require(['@/views/technology/achievement/add'], resolve),
-    //   name: 'addAchievement',
-    //   meta: { title: '科技成果' },
-    //   hidden: true
-    // },
   ]
 };
 
diff --git a/src/views/technology/achievement/add.vue b/src/views/technology/achievement/add.vue
new file mode 100644
index 0000000..ac0109f
--- /dev/null
+++ b/src/views/technology/achievement/add.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="app-container">
+    <div>{{ editPage ? '修改' : '添加' }}成果</div>
+    <el-form
+      style="width:50%;margin:15px 0 0 15px"
+      label-position="left"
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="80px"
+    >
+      <el-form-item label="成果标题" prop="title">
+        <el-input placeholder="请输入" v-model="ruleForm.title"></el-input>
+      </el-form-item>
+      <el-form-item label="成果图片" prop="image">
+        <multi-upload v-model="ruleForm.image"></multi-upload>
+      </el-form-item>
+      <el-form-item label="技术领域" prop="level">
+        <el-select v-model="ruleForm.level" placeholder="请选择">
+          <el-option
+            v-for="item in levelOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="成熟度" prop="attribute">
+        <el-select v-model="ruleForm.attribute" placeholder="请选择">
+          <el-option
+            v-for="item in attributeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="成果企业" prop="source">
+        <el-input placeholder="请输入" v-model="ruleForm.source"></el-input>
+      </el-form-item>
+      <el-form-item label="合作标签" prop="attribute">
+        <el-select v-model="ruleForm.attribute" placeholder="请选择">
+          <el-option
+            v-for="item in attributeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="正文" prop="text">
+        <editor v-model="ruleForm.text" :min-height="192" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('ruleForm')"
+          >确定</el-button
+        >
+        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import Editor from '@/components/Editor';
+import { addPolicy, updatePolicy, getPolicyInfo } from '@/api/policy/library';
+import MultiUpload from '@/components/Upload/multiUpload';
+export default {
+  components: {
+    Editor,
+    MultiUpload
+  },
+  data() {
+    return {
+      aaa: '',
+      bbb: '',
+      editPage: false,
+      ruleForm: {
+        title: '',
+        level: '',
+        attribute: '',
+        source: '',
+        source2: '',
+        text: ''
+      },
+      // 归口选项
+      attributeOptions: [
+        {
+          value: 'KJJ',
+          label: '科技'
+        },
+        {
+          value: 'JXJ',
+          label: '经信'
+        },
+        {
+          value: 'FGW',
+          label: '发改'
+        },
+        {
+          value: 'qita',
+          label: '其他'
+        }
+      ],
+      // 级别选项
+      levelOptions: [
+        {
+          value: 1,
+          label: '省级'
+        },
+        {
+          value: 2,
+          label: '市级'
+        },
+        {
+          value: 3,
+          label: '区级'
+        }
+      ],
+      rules: {
+        title: [{ required: true, message: '请输入', trigger: 'blur' }],
+        level: [{ required: true, message: '请选择', trigger: 'change' }],
+        attribute: [{ required: true, message: '请选择', trigger: 'change' }],
+        source: [{ required: true, message: '请填写', trigger: 'blur' }],
+        source2: [{ required: true, message: '请填写', trigger: 'blur' }],
+        text: [{ required: true, message: '请填写内容', trigger: 'blur' }]
+      }
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          if (this.editPage) {
+            // 修改
+            updatePolicy(this.ruleForm).then(({ message }) => {
+              this.msgSuccess(message);
+            });
+          } else {
+            // 添加
+            addPolicy(this.ruleForm).then(({ message }) => {
+              this.msgSuccess(message);
+            });
+          }
+          this.$router.go(-1);
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    }
+    // resetForm(formName) {
+    //   this.$refs[formName].resetFields();
+    // }
+  },
+  created() {
+    let { id } = this.$route.query;
+    if (id) {
+      this.editPage = true;
+      getPolicyInfo({ policyId: id }).then(({ data }) => {
+        this.ruleForm = data;
+      });
+    }
+  }
+};
+</script>
diff --git a/src/views/technology/achievement/index.vue b/src/views/technology/achievement/index.vue
index b90ab8d..26dc846 100644
--- a/src/views/technology/achievement/index.vue
+++ b/src/views/technology/achievement/index.vue
@@ -1,5 +1,157 @@
 <template>
-  <div>
-    成就
+  <div class="app-container">
+    <el-card shadow="never">
+      <div>
+        <i class="el-icon-search"></i>
+        <span>筛选搜索</span>
+        <div style="float:right">
+          <el-button type="primary" @click="handleSearchList" size="small">
+            查询
+          </el-button>
+        </div>
+      </div>
+      <div style="margin-top: 15px">
+        <el-form
+          size="small"
+          :model="queryParams"
+          ref="queryForm"
+          :inline="true"
+          @submit.native.prevent
+        >
+          <el-form-item label="成果标题">
+            <el-input v-model="queryParams.title" placeholder="请输入" />
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-card>
+    <el-card class="operate-container" shadow="never">
+      <i class="el-icon-tickets"></i>
+      <span>数据列表</span>
+      <el-button class="btn-add" @click="handlePage(null)" size="mini">
+        添加成果
+      </el-button>
+    </el-card>
+    <el-table
+      style="width: 100%"
+      class="table-container"
+      :data="unscrambleList"
+    >
+      <el-table-column
+        label="序号"
+        align="center"
+        type="index"
+      ></el-table-column>
+      <el-table-column label="成果标题" prop="name" align="center">
+        <template slot-scope="scope">
+          <el-link type="primary" :underline="false">{{
+            scope.row.title
+          }}</el-link>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="技术领域"
+        align="center"
+        prop="listDate"
+      ></el-table-column>
+      <el-table-column
+        label="成熟度"
+        align="center"
+        prop="source"
+      ></el-table-column>
+      <el-table-column
+        label="合作标签"
+        align="center"
+        prop="source"
+      ></el-table-column>
+      <el-table-column
+        label="成果企业"
+        align="center"
+        prop="source"
+      ></el-table-column>
+      <el-table-column
+        label="发布日期"
+        align="center"
+        prop="source"
+      ></el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button @click="handlePage(scope.row.id)" type="text" size="small"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.row.id)"
+            type="text"
+            size="small"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
+<script>
+import { getPolicyRead, delRead } from '@/api/front/unscramble';
+export default {
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 100
+      },
+      unscrambleList: [],
+      // 归口选项
+      attributeOptions: [
+        {
+          value: 'KJJ',
+          label: '科技'
+        },
+        {
+          value: 'JXJ',
+          label: '经信'
+        },
+        {
+          value: 'FGW',
+          label: '发改'
+        },
+        {
+          value: 'qita',
+          label: '其他'
+        }
+      ]
+    };
+  },
+  methods: {
+    handleSearchList() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    getList() {
+      getPolicyRead(this.queryParams).then(({ data }) => {
+        this.unscrambleList = data.list;
+      });
+    },
+    // 跳转页面
+    handlePage(id) {
+      this.$router.push({ path: '/technology/addAchievement', query: { id } });
+    },
+    /** 删除按钮操作 */
+    handleDelete(id) {
+      this.$confirm('确认删除该数据?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(function() {
+          return delRead({ id });
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess('删除成功');
+        });
+    }
+  },
+  created() {
+    this.getList();
+  }
+};
+</script>
diff --git a/src/views/technology/demand/add.vue b/src/views/technology/demand/add.vue
new file mode 100644
index 0000000..fcbc9f8
--- /dev/null
+++ b/src/views/technology/demand/add.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="app-container">
+    <div>{{ editPage ? '修改' : '添加' }}需求</div>
+    <el-form
+      style="width:50%;margin:15px 0 0 15px"
+      label-position="left"
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="80px"
+    >
+      <el-form-item label="需求标题" prop="title">
+        <el-input placeholder="请输入" v-model="ruleForm.title"></el-input>
+      </el-form-item>
+      <el-form-item label="技术领域" prop="level">
+        <el-select v-model="ruleForm.level" placeholder="请选择">
+          <el-option
+            v-for="item in levelOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="需求类型" prop="attribute">
+        <el-select v-model="ruleForm.attribute" placeholder="请选择">
+          <el-option
+            v-for="item in attributeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="需求企业" prop="source">
+        <el-input placeholder="请输入" v-model="ruleForm.source"></el-input>
+      </el-form-item>
+      <el-form-item label="价格" prop="source2">
+        <el-input placeholder="请输入" v-model="ruleForm.source2"></el-input>
+      </el-form-item>
+      <el-form-item label="正文" prop="text">
+        <editor v-model="ruleForm.text" :min-height="192" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('ruleForm')"
+          >确定</el-button
+        >
+        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import Editor from '@/components/Editor';
+import { addPolicy, updatePolicy, getPolicyInfo } from '@/api/policy/library';
+export default {
+  components: {
+    Editor
+  },
+  data() {
+    return {
+      editPage: false,
+      ruleForm: {
+        title: '',
+        level: '',
+        attribute: '',
+        source: '',
+        source2: '',
+        text: ''
+      },
+      // 归口选项
+      attributeOptions: [
+        {
+          value: 'KJJ',
+          label: '科技'
+        },
+        {
+          value: 'JXJ',
+          label: '经信'
+        },
+        {
+          value: 'FGW',
+          label: '发改'
+        },
+        {
+          value: 'qita',
+          label: '其他'
+        }
+      ],
+      // 级别选项
+      levelOptions: [
+        {
+          value: 1,
+          label: '省级'
+        },
+        {
+          value: 2,
+          label: '市级'
+        },
+        {
+          value: 3,
+          label: '区级'
+        }
+      ],
+      rules: {
+        title: [{ required: true, message: '请输入', trigger: 'blur' }],
+        level: [{ required: true, message: '请选择', trigger: 'change' }],
+        attribute: [{ required: true, message: '请选择', trigger: 'change' }],
+        source: [{ required: true, message: '请填写', trigger: 'blur' }],
+        source2: [{ required: true, message: '请填写', trigger: 'blur' }],
+        text: [{ required: true, message: '请填写内容', trigger: 'blur' }]
+      }
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          if (this.editPage) {
+            // 修改
+            updatePolicy(this.ruleForm).then(({ message }) => {
+              this.msgSuccess(message);
+            });
+          } else {
+            // 添加
+            addPolicy(this.ruleForm).then(({ message }) => {
+              this.msgSuccess(message);
+            });
+          }
+          this.$router.go(-1);
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    }
+    // resetForm(formName) {
+    //   this.$refs[formName].resetFields();
+    // }
+  },
+  created() {
+    let { id } = this.$route.query;
+    if (id) {
+      this.editPage = true;
+      getPolicyInfo({ policyId: id }).then(({ data }) => {
+        this.ruleForm = data;
+      });
+    }
+  }
+};
+</script>
diff --git a/src/views/technology/demand/index.vue b/src/views/technology/demand/index.vue
index 8fe1190..e8525e4 100644
--- a/src/views/technology/demand/index.vue
+++ b/src/views/technology/demand/index.vue
@@ -1,5 +1,157 @@
 <template>
-  <div>
-    需求
+  <div class="app-container">
+    <el-card shadow="never">
+      <div>
+        <i class="el-icon-search"></i>
+        <span>筛选搜索</span>
+        <div style="float:right">
+          <el-button type="primary" @click="handleSearchList" size="small">
+            查询
+          </el-button>
+        </div>
+      </div>
+      <div style="margin-top: 15px">
+        <el-form
+          size="small"
+          :model="queryParams"
+          ref="queryForm"
+          :inline="true"
+          @submit.native.prevent
+        >
+          <el-form-item label="需求标题">
+            <el-input v-model="queryParams.title" placeholder="请输入" />
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-card>
+    <el-card class="operate-container" shadow="never">
+      <i class="el-icon-tickets"></i>
+      <span>数据列表</span>
+      <el-button class="btn-add" @click="handlePage(null)" size="mini">
+        添加需求
+      </el-button>
+    </el-card>
+    <el-table
+      style="width: 100%"
+      class="table-container"
+      :data="unscrambleList"
+    >
+      <el-table-column
+        label="序号"
+        align="center"
+        type="index"
+      ></el-table-column>
+      <el-table-column label="需求标题" prop="name" align="center">
+        <template slot-scope="scope">
+          <el-link type="primary" :underline="false">{{
+            scope.row.title
+          }}</el-link>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="技术领域"
+        align="center"
+        prop="listDate"
+      ></el-table-column>
+      <el-table-column
+        label="需求类型"
+        align="center"
+        prop="source"
+      ></el-table-column>
+      <el-table-column
+        label="需求企业"
+        align="center"
+        prop="source"
+      ></el-table-column>
+      <el-table-column
+        label="价格"
+        align="center"
+        prop="source"
+      ></el-table-column>
+      <el-table-column
+        label="发布日期"
+        align="center"
+        prop="source"
+      ></el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button @click="handlePage(scope.row.id)" type="text" size="small"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.row.id)"
+            type="text"
+            size="small"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
+<script>
+import { getPolicyRead, delRead } from '@/api/front/unscramble';
+export default {
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 100
+      },
+      unscrambleList: [],
+      // 归口选项
+      attributeOptions: [
+        {
+          value: 'KJJ',
+          label: '科技'
+        },
+        {
+          value: 'JXJ',
+          label: '经信'
+        },
+        {
+          value: 'FGW',
+          label: '发改'
+        },
+        {
+          value: 'qita',
+          label: '其他'
+        }
+      ]
+    };
+  },
+  methods: {
+    handleSearchList() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    getList() {
+      getPolicyRead(this.queryParams).then(({ data }) => {
+        this.unscrambleList = data.list;
+      });
+    },
+    // 跳转页面
+    handlePage(id) {
+      this.$router.push({ path: '/technology/addDemand', query: { id } });
+    },
+    /** 删除按钮操作 */
+    handleDelete(id) {
+      this.$confirm('确认删除该数据?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(function() {
+          return delRead({ id });
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess('删除成功');
+        });
+    }
+  },
+  created() {
+    this.getList();
+  }
+};
+</script>