服务目录联调

src/assets/css/service-app.scss

-.service-app {}
+.services-app {
+  .el-dialog__title {
+    color:white;
+  }
+  .ec-page-wrapper .el-form-item__label {
+    color: white;
+  }
+  .el-button--cancel {
+    color:white;
+    background-color: #EB7567;
+    border-color: #e86150;
+  }
+  .el-button--confirm {
+    color:white;
+    background-color:#649FD7;
+    border-color:#5092d2;
+  }
+}

src/components/service/serviceForm.vue

@@ -35,7 +35,21 @@
         <el-input
           class="ec-input-normal"
           size="mini"
-          v-model.trim="model.description">
+          v-model.trim="model['description'][0]">
+          <i class="el-icon-circle-plus el-input__icon"
+            slot="suffix"
+            @click="addDesEvent">
+          </i>
+        </el-input>
+        <el-input
+          v-for="(item, index) in model.description.slice(1)"
+          class="ec-input-normal"
+          size="mini"
+          v-model.trim="model['description'][index + 1]">
+          <i class="el-icon-remove el-input__icon"
+            slot="suffix"
+            @click="removeDesEvent">
+          </i>
         </el-input>
       </el-form-item>
       <el-form-item label="工分(工作日工作时间)：" prop="points" class="ec-clear-left is-required">
@@ -94,6 +108,14 @@ export default {
   },
 
   methods: {
+    addDesEvent () {
+      this.model.description.push('')
+    },
+
+    removeDesEvent () {
+      this.model.description.pop()
+    },
+
     getNew () {
       this.initSetting(['getServiceNew'])
     },

src/components/service/serviceList.vue

+<template>
+  <section>
+    <table class="table table-stripede table-bordered">
+      <thead>
+        <tr><th>名称</th><th>内容</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>服务名称</td><td>{{ model.title }}</td></tr>
+        <tr><td>服务编号</td><td>{{ model.serial_no }}</td></tr>
+        <tr><td>服务品牌</td><td>{{ model.brand.name }}</td></tr>
+        <tr><td>服务类型</td><td>{{ model.type.name }}</td></tr>
+        <tr><td>服务描述</td><td>
+          <ol>
+            <li v-for="item in model.description">{{ item }}</li>
+          </ol>
+        </td></tr>
+        <tr><td>工分(工作日工作时间)</td><td>{{ model.points }}</td></tr>
+        <tr><td>工分(工作日工作外时间)</td><td>{{ model.points_off_time }}</td></tr>
+        <tr><td>工分(节假日)</td><td>{{ model.points_holiday }}</td></tr>
+        <tr><td>录入人</td><td>{{ model.createdBy.name  }}</td></tr>
+        <tr><td>创建时间</td><td>{{ model.created_at }}</td></tr>
+        <tr><td>更新时间</td><td>{{ model.updated_at }}</td></tr>
+      </tbody>
+    </table>
+  </section>
+</template>
+<script>
+export default {
+  name: 'serviceList',
+
+  props: ['model']
+}
+</script>
+<style scoped>
+table thead {
+  background: white;
+}
+table tr:nth-child(odd){
+  background: #6c757d;
+  background-color: rgba(0,0,0,.05);
+}
+</style>

src/components/service/serviceModal.vue

@@ -34,7 +34,7 @@ export default {
         serial_no: '',
         brand_id: '',
         type_id: '',
-        description: '',
+        description: [],
         points: '',
         points_off_time: '',
         points_holiday: ''
@@ -74,7 +74,7 @@ export default {
           .then((res) => {
             this.$refs.sidePopup.close()
             this.$message.success('操作成功')
-            this.$parent.reload()
+            this.$parent._reload()
           }) // save
       }) // validate
     }

src/components/service/serviceView.vue

+<template>
+  <section>
+    <el-row :gutter="10" class="header-title">
+      <el-col :span="6">
+        <h2>查看服务目录</h2>
+      </el-col>
+    </el-row>
+    <div class="page-body-content">
+      <list :model="model"></list>
+    </div>
+  </section>
+</template>
+<script>
+import list from './serviceList'
+import {
+  requestAPI,
+  api
+} from '@/lib/commonMixin'
+export default {
+
+  data () {
+    return {
+      model: {}
+    }
+  },
+
+  components: {
+    list
+  },
+
+  created () {
+    let id = this.$route.params.id
+    this.getList(id)
+  },
+
+  methods: {
+    getList (id) {
+      requestAPI(api.getserviceEdit, { id }).then((res) => {
+        this.model = res.model
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/components/service_list/serviceItem.vue

@@ -13,7 +13,11 @@
       </el-table-column>
       <el-table-column label="服务编号" width="180">
         <template slot-scope="scope">
-          <span>{{ scope.row.serial_no }}</span>
+          <span>
+            <router-link :to="{ path: '/view/' + scope.row.id }">
+              {{ scope.row.serial_no }}
+            </router-link>
+          </span>
         </template>
       </el-table-column>
       <el-table-column label="服务名称" width="180">

src/routes/service.js

 import ServiceHome from '../components/service_list/serviceHome'
+import ServiceView from '../components/service/serviceView'
 const routes = [{
   path: '/service',
   name: 'serviceHome',
   component: ServiceHome
+}, {
+  path: '/view/:id',
+  name: 'serviceView',
+  component: ServiceView
 }]
 export default routes