Merge branch 'master' of dd.tall.wiki:song/green-valley-admin

package-lock.json

@@ -17869,6 +17869,16 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1594427999421&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -17901,6 +17911,34 @@
           "integrity": "sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA=",
           "dev": true
         },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
         "css-loader": {
           "version": "3.6.0",
           "resolved": "https://registry.npm.taobao.org/css-loader/download/css-loader-3.6.0.tgz?cache=0&sync_timestamp=1604507107408&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcss-loader%2Fdownload%2Fcss-loader-3.6.0.tgz",
@@ -17954,6 +17992,13 @@
             "universalify": "^0.1.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
         "icss-utils": {
           "version": "4.1.1",
           "resolved": "https://registry.npm.taobao.org/icss-utils/download/icss-utils-4.1.1.tgz?cache=0&sync_timestamp=1602527330977&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ficss-utils%2Fdownload%2Ficss-utils-4.1.1.tgz",
@@ -18068,6 +18113,16 @@
             "minipass": "^3.1.1"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz?cache=0&sync_timestamp=1603881757308&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.3.8.tgz",
@@ -18084,6 +18139,32 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.1.2",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
+          "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          },
+          "dependencies": {
+            "loader-utils": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+              "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "big.js": "^5.2.2",
+                "emojis-list": "^3.0.0",
+                "json5": "^2.1.2"
+              }
+            }
+          }
         }
       }
     },
@@ -21176,8 +21257,13 @@
     },
     "dompurify": {
       "version": "2.2.6",
+<<<<<<< HEAD
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.2.6.tgz",
+      "integrity": "sha512-7b7ZArhhH0SP6W2R9cqK6RjaU82FZ2UPM7RO8qN1b1wyvC/NY1FNWcX1Pu00fFOAnzEORtwXe4bPaClg6pUybQ=="
+=======
       "resolved": "https://registry.npm.taobao.org/dompurify/download/dompurify-2.2.6.tgz?cache=0&sync_timestamp=1608303432721&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdompurify%2Fdownload%2Fdompurify-2.2.6.tgz",
       "integrity": "sha1-VJRdxcC0XOWuIocFd36OWdey7cQ="
+>>>>>>> 22a59e921e93c75b42a22d145077df33831527d1
     },
     "domready": {
       "version": "1.0.8",
@@ -28576,8 +28662,8 @@
     },
     "vue-dompurify-html": {
       "version": "2.3.0",
-      "resolved": "https://registry.npm.taobao.org/vue-dompurify-html/download/vue-dompurify-html-2.3.0.tgz",
-      "integrity": "sha1-sXXt2lc2LPewPShkRo+mROBaKtA=",
+      "resolved": "https://registry.npmjs.org/vue-dompurify-html/-/vue-dompurify-html-2.3.0.tgz",
+      "integrity": "sha512-Iz9wI4iiJF+rzC2x3r8quw/VXrkwgMsWXt9p0Le4wXtolBXwMDJOmK3QNMiNg36bzU2b0f3En/wjidoeRVNZ7A==",
       "requires": {
         "dompurify": "^2.0.0"
       }
@@ -28635,87 +28721,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.0.0-rc.1",
-      "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.0.0-rc.1.tgz?cache=0&sync_timestamp=1604764704943&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.0.0-rc.1.tgz",
-      "integrity": "sha1-nB8WhOLQHIpyIW+dTbEZ4VxiJkU=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1601839122515&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
-          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz",
-          "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
-          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1598611732186&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-quill-editor": {
       "version": "3.0.6",
       "resolved": "https://registry.npm.taobao.org/vue-quill-editor/download/vue-quill-editor-3.0.6.tgz",

src/components/Banner/BannerAdd.vue

@@ -3,67 +3,34 @@
     <!-- 添加 -->
     <a-modal :closable="false" footer title="添加轮播图" v-model="visible" width="700px">
       <a-form :form="form" @submit="handleSubmit">
-        <!-- 页面路径 -->
-        <a-form-item
-          :label-col="formItemLayout.labelCol"
-          :wrapper-col="formItemLayout.wrapperCol"
-          label="页面路径"
-        >
-          <a-input
-            placeholder="页面路径"
-            v-decorator="[
-                      'pagePath',
-                      {
-                        rules: [
-                          { required: true, message: '页面路径不能为空' },
-                          { whitespace: true, message: '页面路径不能为空' },
-                          { max: 140, massage: '页面路径最多140个字符' },
-                        ],
-                      },
-                    ]"
-          />
-        </a-form-item>
-        <!-- 排序 -->
-        <a-form-item
-          :label-col="formItemLayout.labelCol"
-          :wrapper-col="formItemLayout.wrapperCol"
-          label="排序"
-        >
-          <a-input
-            placeholder="排序"
-            v-decorator="[
-                      'sort',
-                      {
-                        rules: [
-                          { required: true, message: '排序不能为空' },
-                          { whitespace: true, message: '排序不能为空' },
-                          { max: 140, massage: '排序最多140个字符' },
-                        ],
-                      },
-                    ]"
-          />
+        <!-- 跳转类型 -->
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="跳转类型">
+          <a-select @change="getUse($event, 'jumpType')" class="ml-3" default-value="正常" style="width: 150px">
+            <a-select-option :key="item" :value="index" v-for="(item, index) in enable">{{ item }}</a-select-option>
+          </a-select>
         </a-form-item>
         <!-- 跳转路径 -->
-        <a-form-item
-          :label-col="formItemLayout.labelCol"
-          :wrapper-col="formItemLayout.wrapperCol"
-          label="跳转路径"
-        >
-          <a-input
-            placeholder="跳转路径"
-            v-decorator="[
-                      'jumpPath',
-                      {
-                        rules: [
-                          { required: true, message: '跳转路径不能为空' },
-                          { whitespace: true, message: '跳转路径不能为空' },
-                          { max: 140, massage: '跳转路径最多140个字符' },
-                        ],
-                      },
-                    ]"
-          />
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="图片跳转路径">
+          <a-input placeholder="图片跳转路径" class="ml-3" />
+        </a-form-item>
+        <!-- 状态 -->
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="状态">
+          <a-select @change="getUse($event, 'recStatus')" class="ml-3" default-value="启用" style="width: 150px">
+            <a-select-option :key="item" :value="index" v-for="(item, index) in enable">{{ item }}</a-select-option>
+          </a-select>
+        </a-form-item>
+        <!-- 页面显示位置 -->
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="页面显示位置">
+          <a-select @change="getUse($event, 'showPage')" class="ml-3" default-value="首页" style="width: 100%">
+            <a-select-option :key="item.page" :value="item.page" v-for="item in enable2">{{ item.name }}</a-select-option>
+          </a-select>
+        </a-form-item>
+        <!-- 图片 -->
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="图片">
+          <a-upload :before-upload="beforeUpload" class="ml-3" :action="upload" list-type="picture" name="files" @change="handleChange">
+            <a-button v-show="fileList.length - 0 === 0"> <a-icon type="upload" /> 选择图片 </a-button>
+          </a-upload>
         </a-form-item>
-
         <a-form-item class="d-flex flex-row-reverse">
           <a-button @click="$emit('closeModal')" class="mr-3">取消</a-button>
           <a-button class="white--text" html-type="submit" type="primary">保存</a-button>
@@ -74,7 +41,7 @@
 </template>
 
 <script>
-// import { addTeam } from 'config/api'
+import { upload, addCarousel } from 'config/api';
 
 const formItemLayout = {
   labelCol: { span: 6 },
@@ -82,33 +49,127 @@ const formItemLayout = {
 };
 const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } };
 export default {
-  name: "BannerAdd",
+  name: 'BannerAdd',
   props: { visible: { type: Boolean, default: false } },
   data() {
     return {
       formItemLayout,
       tailItemLayout,
       form: this.$form.createForm(this, { name: 'r-d-add' }),
+      enable: ['启用', '禁用'],
+      enable1: ['不跳转', 'H5'],
+      enable2: [
+        {
+          name: '首页',
+          page: 0,
+        },
+        {
+          name: '关于我们-公司介绍',
+          page: 11,
+        },
+        {
+          name: '关于我们-组织机构',
+          page: 12,
+        },
+        {
+          name: '创新平台-创新资源平台',
+          page: 32,
+        },
+        {
+          name: '创新平台-科技创新服务',
+          page: 33,
+        },
+        {
+          name: ':孵化平台-众创空间',
+          page: 41,
+        },
+        {
+          name: '孵化平台-公共实验室',
+          page: 42,
+        },
+        {
+          name: '孵化平台-中试基地',
+          page: 43,
+        },
+        {
+          name: '孵化平台-创业导师',
+          page: 44,
+        },
+        {
+          name: '孵化平台-孵化场所',
+          page: 45,
+        },
+        {
+          name: '孵化平台-创业服务',
+          page: 46,
+        },
+        {
+          name: '孵化平台-众创空间-虚拟众创空间',
+          page: 48,
+        },
+        {
+          name: '孵化平台-众创空间-实体众创空间',
+          page: 49,
+        },
+        {
+          name: '产业平台-产业服务',
+          page: 52,
+        },
+      ],
+      upload: upload,
+      paramD: {
+        jumpType: 0,
+        jumpUrl: '',
+        param: '',
+        url: '',
+        recStatus: 0,
+        showPage: 0,
+      },
+      fileList: [],
+      //限制文件上传的格式和大小
+      beforeUpload: file => {
+        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+        if (!isJpgOrPng) {
+          this.$message.error('仅支持 JPG/PNG 格式的图片!');
         }
+        return isJpgOrPng;
+      },
+    };
   },
 
   methods: {
+    // 改变搜索条件
+    getUse(value, str) {
+      this.paramD[str] = value;
+      console.log(this.paramD[str]);
+    },
+    handleChange(info) {
+      // this.fileList = fileList;
+      console.log(info);
+      if (info.file.status === 'done') {
+        this.fileList.push(info.file.response.data[0].visitUrl);
+      } else if (info.file.status === 'removed') {
+        this.fileList = info.fileList;
+      }
+    },
     // 提交表单
     handleSubmit(e) {
       e.preventDefault();
+      this.paramD.url = this.fileList[0];
       this.form.validateFieldsAndScroll(async (err, values) => {
         if (!err) {
           try {
-            // const params = { param: values };
-            // const res = await addTeam(params);
-            // const { data, msg, code } = res.data;
-            // this.$emit('closeModal');
-            // if (code === 200) {
-            //   this.$message.success('添加成功')
-            //   // TODO: 填到列表中
-            // } else {
-            //   throw msg;
-            // }
+            const params = { param: this.paramD };
+            const res = await addCarousel(params);
+            const { data, msg, code } = res.data;
+            this.$emit('closeModal');
+            this.$emit('handleTableChange');
+            if (code === 200) {
+              this.$message.success('添加成功');
+              // TODO: 填到列表中
+            } else {
+              throw msg;
+            }
           } catch (error) {
             this.$message.error(error || '添加失败');
           }

src/components/Banner/BannerDate.vue

@@ -1,21 +1,34 @@
 <template>
   <div class="main flex-1">
-    <div style="width:100%" v-if="lists && lists.length > 0">
+    <div style="width: 100%" v-if="lists && lists.list">
       <a-table
         :columns="columns"
-        :data-source="lists"
+        :data-source="lists.list"
         :loading="loading"
         :row-key="record => record.id"
+        :pagination="pagination"
+        @change="handleTableChange"
         bordered
         class="white"
+        :scroll="{ y: height }"
       >
         <template slot="id" slot-scope="text, record, index">
           <span>{{ index + 1 }}</span>
         </template>
-
+        <template slot="url" slot-scope="text, record">
+          <img :src="record.url" style="width: 300px; height: 80px" alt="" />
+        </template>
+        <template slot="jumpType" slot-scope="text, record">
+          <span v-if="record.jumpType - 0 === 0">不跳转</span>
+          <span v-if="record.jumpType - 0 === 1">H5</span>
+        </template>
+        <template slot="jumpUrl" slot-scope="text, record">
+          <span v-if="record.jumpUrl">{{ jumpUrl }}</span>
+          <span v-else>无</span>
+        </template>
         <template slot="edit" slot-scope="text, record">
           <a-icon @click="showEditModal(record)" class="pointer" theme="twoTone" type="edit" />
-          <a-popconfirm @confirm="() => onDelete(record.id)" title="确定要删除这一条?" v-if="lists.length">
+          <a-popconfirm @confirm="() => onDelete(record.id)" title="确定要删除这一条?" v-if="lists.list">
             <a-icon class="ml-4 pointer" theme="twoTone" two-tone-color="#ff0000" type="delete" />
           </a-popconfirm>
           <a-switch checked-children="启用" class="ml-4" default-checked un-checked-children="禁用" />
@@ -25,12 +38,12 @@
     <a-empty v-else />
 
     <!-- 编辑 -->
-    <banner-edit :editItem="editItem" :editVisible="editVisible" @closeModal="closeModal" />
+    <banner-edit :edit-item="editItem" :edit-visible="editVisible" @closeModal="closeModal" />
   </div>
 </template>
 
 <script>
-import BannerEdit from "components/Banner/BannerEdit.vue";
+import BannerEdit from 'components/Banner/BannerEdit.vue';
 // import { delTeam } from 'config/api';
 
 const columns = [
@@ -42,25 +55,47 @@ const columns = [
     scopedSlots: { customRender: 'id' },
   },
   {
-    title: '页面路径',
+    title: '图片',
     align: 'center',
-    dataIndex: 'pagePath',
-    key: 'pagePath',
-    scopedSlots: { customRender: 'pagePath' },
+    dataIndex: 'url',
+    key: 'url',
+    width: 350,
+    scopedSlots: { customRender: 'url' },
   },
   {
-    title: '排序',
+    title: '显示位置',
     align: 'center',
-    dataIndex: 'sort',
-    key: 'sort',
-    scopedSlots: { customRender: 'sort' },
+    dataIndex: 'showPage',
+    key: 'showPage',
+    scopedSlots: { customRender: 'showPage' },
+  },
+  {
+    title: '跳转类型',
+    align: 'center',
+    dataIndex: 'jumpType',
+    key: 'jumpType',
+    scopedSlots: { customRender: 'jumpType' },
   },
   {
     title: '跳转路径',
     align: 'center',
-    dataIndex: 'jumpPath',
-    key: 'jumpPath',
-    scopedSlots: { customRender: 'jumpPath' },
+    dataIndex: 'jumpUrl',
+    key: 'jumpUrl',
+    scopedSlots: { customRender: 'jumpUrl' },
+  },
+  {
+    title: '图片参数',
+    align: 'center',
+    dataIndex: 'param',
+    key: 'param',
+    scopedSlots: { customRender: 'param' },
+  },
+  {
+    title: '创建时间',
+    align: 'center',
+    dataIndex: 'updatedAt',
+    key: 'updatedAt',
+    scopedSlots: { customRender: 'updatedAt' },
   },
   {
     title: '编辑',
@@ -72,46 +107,43 @@ const columns = [
   },
 ];
 
-const lists = [
-  {
-    id:'001',
-    pagePath:'http://localhost:8080/',
-    sort:1,
-    jumpPath: 'https://test.tall.wiki/pt-dev/user/login?redirect=%2F',
-  },
-  {
-    id:'002',
-    pagePath:'http://localhost:8080/',
-    sort:2,
-    jumpPath: 'https://test.tall.wiki/pt-dev/user/login?redirect=%2F',
-  }
-];
-
 export default {
-  name: "BannerDate",
-  components: {
-    BannerEdit,
+  name: 'BannerDate',
+  components: { BannerEdit },
+  props: {
+    lists: {
+      type: Object,
+      default: () => {},
+    },
+    pagination: {
+      type: Object,
+      default: () => {},
+    },
   },
   data() {
-    this.cacheData = lists.map(item => ({ ...item }));
     return {
       columns,
-      lists,
       loading: false,
       editingKey: '',
       height: '',
       editVisible: false,
       editItem: null, // 修改的那条
-    }
+    };
   },
-
   mounted() {
-    this.height = document.getElementsByClassName('main')[0].offsetHeight - 150;
+    let th = 200;
+    let wh = window.innerHeight;
+    this.height = wh - th;
+    window.onresize = () => {
+      return (() => {
+        wh = window.innerHeight;
+        this.height = wh - th;
+      })();
+    };
   },
 
   methods: {
     showEditModal(record) {
-      console.log('record: ', record);
       this.editItem = record;
       this.editVisible = true;
     },
@@ -119,7 +151,11 @@ export default {
     closeModal() {
       this.editVisible = false;
     },
-
+    handleTableChange(pagination) {
+      const { current, pageSize } = pagination;
+      const condition = { current, pageSize };
+      this.$emit('getListData', condition);
+    },
     // 删除
     async onDelete(teamId) {
       try {
@@ -143,7 +179,7 @@ export default {
     openSignUp() {
       const { query } = this.$route;
       this.$router.push({ path: '/sign-up', query });
-    }
+    },
   },
 };
 </script>

src/components/Banner/BannerEdit.vue

@@ -1,14 +1,10 @@
 <template>
   <div class="d-flex flex-wrap pb-3">
     <!-- 编辑 -->
-    <a-modal :closable="false" footer title="修改轮播图" v-model="editVisible" width="700px">
-      <a-form :form="form" @submit="handleSubmit">
+    <a-modal :closable="false" footer title="修改轮播图" v-model="editVisible" width="700px" @cancel="$emit('closeModal')">
+      <a-form :form="form" @submit="handleSubmit" v-if="editItem">
         <!-- 页面路径 -->
-        <a-form-item
-          :label-col="formItemLayout.labelCol"
-          :wrapper-col="formItemLayout.wrapperCol"
-          label="页面路径"
-        >
+        <!-- <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="页面路径">
           <a-input
             placeholder="页面路径"
             v-decorator="[
@@ -22,48 +18,40 @@
               },
             ]"
           />
-        </a-form-item>
-        <!-- 排序 -->
-        <a-form-item
-          :label-col="formItemLayout.labelCol"
-          :wrapper-col="formItemLayout.wrapperCol"
-          label="排序"
-        >
-          <a-input
-            placeholder="排序"
-            v-decorator="[
-                      'sort',
-                      {
-                        rules: [
-                          { required: true, message: '排序不能为空' },
-                          { whitespace: true, message: '排序不能为空' },
-                          { max: 140, massage: '排序最多140个字符' },
-                        ],
-                      },
-                    ]"
-          />
+        </a-form-item> -->
+        <!-- 跳转类型 -->
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="跳转类型">
+          <a-select @change="getUse($event, 'jumpType')" class="ml-3" :default-value="enable1[editItem.jumpType]" style="width: 150px">
+            <a-select-option :key="item" :value="index" v-for="(item, index) in enable1">{{ item }}</a-select-option>
+          </a-select>
         </a-form-item>
         <!-- 跳转路径 -->
         <a-form-item
+          v-if="editItem.jumpType === 1"
           :label-col="formItemLayout.labelCol"
           :wrapper-col="formItemLayout.wrapperCol"
-          label="跳转路径"
+          label="图片跳转路径"
         >
-          <a-input
-            placeholder="跳转路径"
-            v-decorator="[
-                      'jumpPath',
-                      {
-                        rules: [
-                          { required: true, message: '跳转路径不能为空' },
-                          { whitespace: true, message: '跳转路径不能为空' },
-                          { max: 140, massage: '跳转路径最多140个字符' },
-                        ],
-                      },
-                    ]"
-          />
+          <a-input v-model="editItem.jumpUrl" placeholder="图片跳转路径" class="ml-3" />
+        </a-form-item>
+        <!-- 状态 -->
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="状态">
+          <a-select @change="getUse($event, 'recStatus')" class="ml-3" :default-value="enable[editItem.recStatus]" style="width: 150px">
+            <a-select-option :key="item" :value="index" v-for="(item, index) in enable">{{ item }}</a-select-option>
+          </a-select>
+        </a-form-item>
+        <!-- 页面显示位置 -->
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="页面显示位置">
+          <a-select @change="getUse($event, 'showPage')" class="ml-3" :default-value="editItem.showPage" style="width: 100%">
+            <a-select-option :key="item.page" :value="item.page" v-for="item in enable2">{{ item.name }}</a-select-option>
+          </a-select>
+        </a-form-item>
+        <!-- 图片 -->
+        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="图片">
+          <a-upload :before-upload="beforeUpload" class="ml-3" :action="upload" list-type="picture" name="files" @change="handleChange">
+            <a-button v-show="fileList.length - 0 === 0"> <a-icon type="upload" /> 选择图片 </a-button>
+          </a-upload>
         </a-form-item>
-
         <a-form-item class="d-flex flex-row-reverse">
           <a-button @click="$emit('closeModal')" class="mr-3">取消</a-button>
           <a-button class="white--text" html-type="submit" type="primary">保存</a-button>
@@ -75,6 +63,7 @@
 
 <script>
 // import { upTeam } from 'config/api';
+import { upload, addCarousel } from 'config/api';
 
 const formItemLayout = {
   labelCol: { span: 6 },
@@ -84,19 +73,119 @@ const formItemLayout = {
 const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } };
 
 export default {
-  name: "BannerEdit",
+  name: 'BannerEdit',
   props: { editVisible: { type: Boolean, default: false }, editItem: { type: Object, default: () => {} } },
   data() {
     return {
       formItemLayout,
       tailItemLayout,
       form: this.$form.createForm(this, { name: 'r-d-add' }),
+      enable: ['启用', '禁用'],
+      enable1: ['不跳转', 'H5'],
+      enable2: [
+        {
+          name: '首页',
+          page: 0,
+        },
+        {
+          name: '关于我们-公司介绍',
+          page: 11,
+        },
+        {
+          name: '关于我们-组织机构',
+          page: 12,
+        },
+        {
+          name: '创新平台-创新资源平台',
+          page: 32,
+        },
+        {
+          name: '创新平台-科技创新服务',
+          page: 33,
+        },
+        {
+          name: ':孵化平台-众创空间',
+          page: 41,
+        },
+        {
+          name: '孵化平台-公共实验室',
+          page: 42,
+        },
+        {
+          name: '孵化平台-中试基地',
+          page: 43,
+        },
+        {
+          name: '孵化平台-创业导师',
+          page: 44,
+        },
+        {
+          name: '孵化平台-孵化场所',
+          page: 45,
+        },
+        {
+          name: '孵化平台-创业服务',
+          page: 46,
+        },
+        {
+          name: '孵化平台-众创空间-虚拟众创空间',
+          page: 48,
+        },
+        {
+          name: '孵化平台-众创空间-实体众创空间',
+          page: 49,
+        },
+        {
+          name: '产业平台-产业服务',
+          page: 52,
+        },
+      ],
+      upload: upload,
+      fileList: [],
+      //限制文件上传的格式和大小
+      beforeUpload: file => {
+        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+        if (!isJpgOrPng) {
+          this.$message.error('仅支持 JPG/PNG 格式的图片!');
         }
+        return isJpgOrPng;
+      },
+    };
+  },
+  watch: {
+    editItem(val) {
+      console.log(val);
+    },
   },
-
   methods: {
+    // 改变搜索条件
+    getUse(e, str) {
+      this.editItem[str] = e;
+      if (str === 'jumpType' && e === 0) {
+        this.editItem.jumpUrl = '';
+      }
+    },
+    showPageNums(nums) {
+      for (let i = 0; i < this.enable2.length; i++) {
+        if (nums - 0 === this.enable2[i].page - 0) {
+          return this.enable2[i].name;
+        } else if (i === this.enable2.length - 1) {
+          return '';
+        }
+      }
+    },
+    // 上传文件事件
+    handleChange(info) {
+      // this.fileList = fileList;
+      if (info.file.status === 'done') {
+        this.fileList.push(info.file.response.data[0].visitUrl);
+      } else if (info.file.status === 'removed') {
+        this.fileList = info.fileList;
+      }
+    },
     // 提交表单
     handleSubmit(e) {
+      console.log(this.editItem);
       e.preventDefault();
       this.form.validateFieldsAndScroll(async (err, values) => {
         if (!err) {

src/components/Banner/BannerSearch.vue

@@ -4,8 +4,16 @@
   <div class="d-flex flex-wrap pb-3">
     <div>
       <!-- 启用 -->
-      <a-select @change="getUse" class="ml-3" default-value="启用" style="width: 150px">
-        <a-select-option :key="use" :value="use" v-for="use in enable">{{ use }}</a-select-option>
+      <a-select @change="getUse($event, 'recStatus')" class="ml-3" default-value="启用" style="width: 150px">
+        <a-select-option :key="item" :value="index" v-for="(item, index) in enable">{{ item }}</a-select-option>
+      </a-select>
+      <!-- 跳转类型 -->
+      <a-select @change="getUse($event, 'jumpType')" class="ml-3" default-value="不跳转" style="width: 150px">
+        <a-select-option :key="item" :value="index" v-for="(item, index) in enable1">{{ item }}</a-select-option>
+      </a-select>
+      <!-- 页面显示位置 -->
+      <a-select allow-clear @change="getUse($event, 'showPage')" class="ml-3" placeholder="查询全部" style="width: 250px">
+        <a-select-option :key="item.name" :value="item.page" v-for="item in enable2">{{ item.name }}</a-select-option>
       </a-select>
       <a-button @click="handleTableChange" class="mx-2" type="primary">搜索</a-button>
     </div>
@@ -15,7 +23,7 @@
     <a-button @click="showModal" class="editable-add-btn" type="primary">增加</a-button>
 
     <!-- 添加 -->
-    <banner-add :visible="visible" @closeModal="closeModal" />
+    <banner-add :visible="visible" @closeModal="closeModal" @handleTableChange="handleTableChange" />
   </div>
 </template>
 
@@ -25,14 +33,75 @@ import BannerAdd from 'components/Banner/BannerAdd.vue';
 
 export default {
   name: 'BannerSearch',
-  components: {
-    BannerAdd,
-  },
+  components: { BannerAdd },
   data() {
     return {
       visible: false,
       enable: ['启用', '禁用'],
-      use: '',
+      enable1: ['不跳转', 'H5'],
+      enable2: [
+        {
+          name: '首页',
+          page: 0,
+        },
+        {
+          name: '关于我们-公司介绍',
+          page: 11,
+        },
+        {
+          name: '关于我们-组织机构',
+          page: 12,
+        },
+        {
+          name: '创新平台-创新资源平台',
+          page: 32,
+        },
+        {
+          name: '创新平台-科技创新服务',
+          page: 33,
+        },
+        {
+          name: ':孵化平台-众创空间',
+          page: 41,
+        },
+        {
+          name: '孵化平台-公共实验室',
+          page: 42,
+        },
+        {
+          name: '孵化平台-中试基地',
+          page: 43,
+        },
+        {
+          name: '孵化平台-创业导师',
+          page: 44,
+        },
+        {
+          name: '孵化平台-孵化场所',
+          page: 45,
+        },
+        {
+          name: '孵化平台-创业服务',
+          page: 46,
+        },
+        {
+          name: '孵化平台-众创空间-虚拟众创空间',
+          page: 48,
+        },
+        {
+          name: '孵化平台-众创空间-实体众创空间',
+          page: 49,
+        },
+        {
+          name: '产业平台-产业服务',
+          page: 52,
+        },
+      ],
+      paramData: {
+        jumpType: 0, // 跳转类型
+        recStatus: 0, // 状态
+        showPage: '', // 显示位置
+      },
     };
   },
   methods: {
@@ -44,26 +113,14 @@ export default {
       this.visible = false;
     },
 
-    // 类型
-    getUse(value) {
-      console.log('value: ', value);
-      this.use = value;
+    // 改变搜索条件
+    getUse(value, str) {
+      this.paramData[str] = value;
+      console.log(this.paramData[str]);
     },
 
-    async handleTableChange() {
-      try {
-        // const params = { param: {publishingPlatform: this.publishingPlatform} };
-        // const res = await selLikeTeam(params);
-        // const { data, msg, code } = res.data;
-        // if (code === 200) {
-        //   console.log('搜索结果',data);
-        //   // TODO: 填到列表中
-        // } else {
-        //   throw msg;
-        // }
-      } catch (error) {
-        this.$message.error(error);
-      }
+    handleTableChange() {
+      this.$emit('getListData', this.paramData);
     },
   },
 };

src/config/api.js

@@ -10,6 +10,10 @@ const greenvalley = `${proxyUrl}/greenvalley`;
 const policy = `${proxyUrl}/policy`; // 创新政策接口
 const researchTeam = `${greenvalley}/researchTeam`; // 创新平台相关操作
 const page = `${greenvalley}/page`; // 页面管理相关操作
+const carousel = `${greenvalley}/carousel`; // 轮播图相关接口
+
+// 上传附件
+export const upload = `${greenvalley}/file/upload`;
 const industryInfo = `${greenvalley}/industryInfo`; // 行业资讯相关操作
 const activity = `${greenvalley}/activity`; // 活动公告相关操作
 const creatingPlatform = `${greenvalley}/creatingPlatform`; // 合作意向相关操作
@@ -128,3 +132,16 @@ export const upTeam = params => axios.post(`${researchTeam}/upTeam`, params);
 
 // 根据团队名称搜索团队
 export const selLikeTeam = params => axios.post(`${researchTeam}/selLikeTeam`, params);
+
+// // 页面列表查询
+// export const getPageList = params => axios.post(`${page}/list`, params);
+
+// // 页面配置添加
+// export const addPage = params => axios.post(`${page}/add`, params);
+
+// // 页面配置删除
+// export const deletePage = params => axios.post(`${page}/delete`, params);
+// 查询轮播图列表
+export const queryCarousel = params => axios.post(`${carousel}/queryCarousel`, params);
+// 查询轮播图列表
+export const addCarousel = params => axios.post(`${carousel}/addCarousel`, params);

src/views/BannerManage/BannerManage.vue

@@ -1,37 +1,69 @@
 <template>
   <div class="pa-3 white fill-height d-flex flex-column">
-    <banner-search />
-    <banner-date />
+    <banner-search @getListData="getListData" />
+    <banner-date :lists="lists" :pagination="pagination" @getListData="getListData" />
   </div>
 </template>
 
 <script>
-import BannerSearch from "components/Banner/BannerSearch.vue";
-import BannerDate from "components/Banner/BannerDate.vue";
-// import { getSelectTeam } from 'config/api';
+import BannerSearch from 'components/Banner/BannerSearch.vue';
+import BannerDate from 'components/Banner/BannerDate.vue';
+import { queryCarousel } from 'config/api';
 
 export default {
-  name: "BannerManage",
+  name: 'BannerManage',
   components: {
     BannerSearch,
     BannerDate,
   },
 
+  data() {
+    return {
+      str: '轮播图管理界面',
+      lists: {},
+      pagination: { current: 1, pageSize: 10 },
+      pageNum: 1,
+      pageSize: 10,
+      paramData: {
+        showPage: '',
+        jumpType: 0,
+        recStatus: 0,
+      },
+    };
+  },
+
   created() {
-    // this.getSelectTeam()
+    this.getListData();
   },
 
   methods: {
-    /**
-     * 根据团队id查看研发团队相关信息
-     * @param { String } competeTimeId 第几届信息的id
-     */
-    async getSelectTeam() {
+    // 获取轮播图列表
+    async getListData(condition) {
       try {
-        const params = {param:{}}
-        const res = await getSelectTeam(params);
+        if (condition && condition.current) {
+          this.pageNum = condition.current;
+          this.pageSize = condition.pageSize;
+        } else if (condition && !condition.pageNum) {
+          this.paramData = condition;
+        }
+        const params = {
+          param: {
+            showPage: this.paramData.showPage,
+            jumpType: this.paramData.jumpType,
+            recStatus: this.paramData.recStatus,
+            pageNum: this.pageNum,
+            pageSize: this.pageSize,
+          },
+        };
+        const res = await queryCarousel(params);
         const { code, msg, data } = res.data;
         if (code === 200) {
+          this.lists = data;
+          const paper = { ...this.pagination };
+          paper.current = data.pageNum;
+          paper.total = +data.total;
+          paper.pageSize = data.pageSize;
+          this.pagination = paper;
         } else {
           throw msg || '获取失败';
         }