产品资料管理以及详情完成

@@ -2,5 +2,5 @@
 ENV = 'development'
 
 # base api
- VUE_APP_BASE_API = 'http://192.168.11.67:8096'
-# VUE_APP_BASE_API = 'https://beta-salecloud-hengan.situdata.com'
+# VUE_APP_BASE_API = 'http://192.168.11.67:8096'
+ VUE_APP_BASE_API = 'https://beta-salecloud-hengan.situdata.com'

@@ -63,3 +63,8 @@ h6 {
 .login-form-bg {
   background: center / cover no-repeat url('./assets/image/login-form-bg.png');
 }
+// 向右浮动
+.flex-end {
+  display: flex;
+  justify-content: flex-end;
+}

@@ -48,15 +48,18 @@ export const constantRoutes = [
     path: '/',
     component: Layout,
     redirect: '/monitor',
-    meta: {},
+    meta: {
+      title: '资源监控',
+      icon: 'home'
+    },
     children: [
       {
         path: 'monitor',
         name: 'monitor',
         component: () => import('@/views/monitor'),
         meta: {
-          title: '资源监控',
-          icon: 'home'
+          title: '展业资料',
+          icon: 'report'
         }
       },
       {
@@ -65,10 +68,28 @@ export const constantRoutes = [
         hidden: true,
         component: () => import('@/views/monitorDetails'),
         meta: {
-          title: '远程订单详情',
-          icon: 'home'
+          title: '远程订单详情'
         },
         props: route => ({ custInfo: route.query })
+      },
+      {
+        path: 'product-infor-management',
+        name: 'product-infor-management',
+        component: () => import('@/views/productInforManagement'),
+        meta: {
+          title: '产品资料管理',
+          icon: 'report'
+        }
+      },
+      {
+        path: 'edit-product',
+        name: 'edit-product',
+        hidden: true,
+        component: () => import('@/views/editProduct'),
+        meta: {
+          title: '新增产品',
+          icon: 'report'
+        }
       }
     ]
   }

+<template>
+  <Card>
+    <h4 class="mb10">产品基本属性</h4>
+    <el-form class="count-form" ref="form" size="mini" inline :model="form">
+      <div>
+        <el-form-item label="产品名称">
+          <el-input
+            v-model.trim="form.name"
+            placeholder="请输入产品名称"
+            :maxlength="inputMaxLength"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item label="产品类型">
+          <el-select v-model="form.type">
+            <el-option
+              v-for="(item, index) of productTypes"
+              :key="`option-${index}`"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="产品编号">
+          <el-input
+            v-model.trim="form.id"
+            placeholder="请输入产品编号"
+            :maxlength="inputMaxLength"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item label="险别">
+          <el-select v-model="form.insurance">
+            <el-option
+              v-for="(item, index) of insuranceTypes"
+              :key="`option-${index}`"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+      <el-form-item label="产品渠道">
+        <el-checkbox-group v-model="form.channel">
+          <el-checkbox label="选项一"></el-checkbox>
+          <el-checkbox label="选项二"></el-checkbox>
+          <el-checkbox label="选项三"></el-checkbox>
+          <el-checkbox label="选项四"></el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+    </el-form>
+    <h4 class="mb10">产品资料</h4>
+    <div class="title mb10">
+      上传资料列表
+      <span class="tips">支持扩展名.pdf</span>
+    </div>
+    <el-table class="mb10" style="width: 500px" border :data="fileList">
+      <el-table-column
+        prop="type"
+        align="center"
+        label="资料"
+        width="120"
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        align="center"
+        width="200"
+        label="资料名称"
+      ></el-table-column>
+      <el-table-column align="center" label="操作">
+        <template slot-scope="scope">
+          <div class="custom-cell">
+            <el-upload
+              ref="upload"
+              style="margin-right:10px"
+              action="#"
+              accept=".pdf"
+              :show-file-list="false"
+              :auto-upload="false"
+              :on-change="onChange"
+            >
+              <el-button type="text" @click="updateFile(scope.row.id)"
+                >上传</el-button
+              >
+            </el-upload>
+            <el-button type="text" @click="previewFile(scope.row.id)"
+              >预览</el-button
+            >
+            <el-button type="text" @click="deleteFile(scope.row.id)"
+              >删除</el-button
+            >
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="title">
+      产品链接<el-button type="text" style="margin-left:20px" @click="previewLink">预览</el-button>
+    </div>
+    <el-input
+      class="mb10"
+      type="textarea"
+      :rows="5"
+      style="width:500px"
+      v-model="productLink"
+    ></el-input>
+    <div class="bottom">
+      <el-button type="primary">提交</el-button>
+    </div>
+  </Card>
+</template>
+
+<script>
+import { inputMaxLength } from '@/utils/mappingData'
+const productTypes = [
+  {
+    label: '团险',
+    value: '1'
+  }
+]
+const insuranceTypes = [
+  {
+    label: '主险',
+    value: '1'
+  },
+  {
+    label: '附加险',
+    value: '2'
+  }
+]
+export default {
+  data() {
+    return {
+      inputMaxLength,
+      productTypes,
+      insuranceTypes,
+      form: {
+        name: '',
+        type: '',
+        id: '',
+        insurance: '',
+        channel: ''
+      },
+      fileList: [
+        {
+          id: 0,
+          type: '产品条款',
+          name: null,
+          file: null
+        },
+        {
+          id: 1,
+          type: '产品说明书',
+          name: null,
+          file: null
+        },
+        {
+          id: 2,
+          type: '免责条款',
+          name: null,
+          file: null
+        }
+      ],
+      currentFileIndex: 0,
+      productLink: ''
+    }
+  },
+  methods: {
+    updateFile(id) {
+      this.currentFileIndex = id
+    },
+    async onChange(file, fileList) {
+      if (file.raw.type !== 'application/pdf') {
+        this.$message.error('支持文件为pdf根式')
+        return
+      }
+      if (this.fileList[this.currentFileIndex].name) {
+        await this.uploadConfirm()
+      }
+      this.fileList[this.currentFileIndex].name = file.name
+      this.fileList[this.currentFileIndex].file = file
+    },
+    uploadConfirm() {
+      return new Promise((resolve, reject) => {
+        this.$confirm('是否覆盖产品信息', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {
+            resolve()
+          })
+          .catch(e => {})
+      })
+    },
+    previewFile(id) {
+      if (!this.fileList[id].file) {
+        return
+      }
+      const file = this.fileList[id].file.raw
+      const myBlob = new Blob([file], {
+        type: 'application/pdf'
+      })
+      this.download(myBlob)
+    },
+    download(blob) {
+      const link = document.createElement('a')
+      link.href = URL.createObjectURL(blob)
+      link.target = '_blank'
+      link.click()
+      link.remove()
+      URL.revokeObjectURL(link.href)
+    },
+    async deleteFile(id) {
+      if (!this.fileList[id].name) {
+        return
+      }
+      await this.deleteConfirm()
+      this.fileList[this.currentFileIndex].name = null
+      this.fileList[this.currentFileIndex].file = null
+    },
+    deleteConfirm() {
+      return new Promise((resolve, reject) => {
+        this.$confirm('是否确定删除文件', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+          .then(() => {
+            resolve()
+          })
+          .catch(e => {})
+      })
+    },
+    previewLink() {
+      const link = document.createElement('a')
+      link.href = this.productLink
+      link.target = '_blank'
+      link.click()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.title {
+  font-size: 14px;
+  color: #606266;
+  margin-left: 20px;
+  .tips {
+    margin-left: 20px;
+    color: #9a9b9e;
+    display: inline-block;
+  }
+}
+.bottom {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.custom-cell {
+  display: flex;
+  justify-content: center;
+}
+</style>

@@ -213,8 +213,4 @@ export default {
     background-color: #ffaa00;
   }
 }
-.flex-end {
-  display: flex;
-  justify-content: flex-end;
-}
 </style>

+<template>
+  <Card>
+    <div>
+      <el-form class="count-form" ref="form" size="mini" inline :model="form">
+        <el-form-item label="查询条件">
+          <el-input
+            v-model.trim="form.product"
+            placeholder="产品名称/产品编号"
+            :maxlength="inputMaxLength"
+          >
+            <i slot="prefix" class="el-icon-search"></i
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="产品类型">
+          <el-select v-model="form.type">
+            <el-option
+              v-for="(item, index) of productTypes"
+              :key="`option-${index}`"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="险别">
+          <el-select v-model="form.insurance">
+            <el-option
+              v-for="(item, index) of insuranceTypes"
+              :key="`option-${index}`"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="上架状态">
+          <el-select v-model="form.shelf">
+            <el-option
+              v-for="(item, index) of shelfType"
+              :key="`option-${index}`"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="产品渠道">
+          <el-select v-model="form.channel">
+            <el-option
+              v-for="(item, index) of productChannel"
+              :key="`option-${index}`"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="flex-end mb10">
+      <el-button type="primary" size="mini" @click="submit">查询</el-button>
+      <el-button size="mini" @click="onReset">重置</el-button>
+      <el-button size="mini" type="primary" plain @click="editOrAdd"
+        >添加产品</el-button
+      >
+    </div>
+    <el-table
+      class="mb10"
+      :data="tableData"
+      border
+      style="width: 100%"
+      v-loading="loading"
+    >
+      <el-table-column
+        prop="index"
+        align="center"
+        label="产品编号"
+        fixed
+        width="90"
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        align="center"
+        label="产品名称"
+      ></el-table-column>
+      <el-table-column
+        prop="updateTime"
+        align="center"
+        label="更新时间"
+      ></el-table-column>
+      <el-table-column
+        prop="prodType"
+        align="center"
+        label="产品类型"
+      ></el-table-column>
+      <el-table-column
+        prop="insurance"
+        align="center"
+        label="险别"
+      ></el-table-column>
+      <el-table-column
+        prop="channel"
+        align="center"
+        label="产品渠道"
+      ></el-table-column>
+      <el-table-column
+        prop="index"
+        align="center"
+        label="文件类型"
+      ></el-table-column>
+      <el-table-column
+        prop="status"
+        align="center"
+        label="上架状态"
+      ></el-table-column>
+      <el-table-column align="center" label="操作" fixed="right" width="130">
+        <template slot-scope="scope">
+          <el-button type="text" @click="editOrAdd(scope.row)">编辑</el-button>
+          <el-button type="text" @click="putOnShelf">上架</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <FooterPaginationfrom :pagination="pagination"></FooterPaginationfrom>
+  </Card>
+</template>
+
+<script>
+import { inputMaxLength } from '@/utils/mappingData'
+import FooterPaginationfrom from './components/FooterPagination'
+
+const productTypes = [
+  {
+    label: '全部',
+    value: ''
+  },
+  {
+    label: '团险',
+    value: '1'
+  }
+]
+const insuranceTypes = [
+  {
+    label: '全部',
+    value: ''
+  },
+  {
+    label: '主险',
+    value: '1'
+  },
+  {
+    label: '附加险',
+    value: '2'
+  }
+]
+const shelfType = [
+  {
+    label: '全部',
+    value: ''
+  },
+  {
+    label: '未上架',
+    value: '1'
+  },
+  {
+    label: '上架',
+    value: '2'
+  }
+]
+
+const productChannel = [
+  {
+    label: '全部',
+    value: ''
+  },
+  {
+    label: '产品说明书',
+    value: '1'
+  },
+  {
+    label: '产品条款',
+    value: '2'
+  },
+  {
+    label: '免责条款',
+    value: '3'
+  },
+  {
+    label: '产品投保链接',
+    value: '4'
+  }
+]
+export default {
+  components: {
+    FooterPaginationfrom
+  },
+  data() {
+    return {
+      inputMaxLength,
+      productTypes,
+      insuranceTypes,
+      shelfType,
+      productChannel,
+      form: {
+        product: '',
+        type: '',
+        insurance: '',
+        shelf: '',
+        channel: ''
+      },
+      pagination: { size: 10, total: 0, page: 1 },
+      tableData: [{}],
+      loading: false
+    }
+  },
+  methods: {
+    editOrAdd(row) {
+      if (row) {
+      }
+      this.$router.push({
+        path: 'edit-product'
+      })
+    },
+    submit() {},
+    onReset() {
+      this.form = {
+        product: '',
+        type: '',
+        insurance: '',
+        shelf: '',
+        channel: ''
+      }
+    },
+    putOnShelf() {}
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>