修复bug

src/assets/css/case-app.scss

 .caseManagement-app {
+  // .el-input-group__prepend {
+  //   padding: 0 5px;
+  // }
+  // .el-input-group__append {
+  //   padding: 0 5px;
+  // }
+  .ec-list-input {
+    .el-input__inner {
+      width: 100px;
+    }
+  }
   .mb10 {
     margin-bottom: 10px;
   }

src/components/case/caseForm.vue

@@ -30,6 +30,20 @@
         </single-radio>
       </el-form-item>
       <!--添加服务目录-->
+      <el-form-item label="服务目录：" prop="actFavList" class="ec-clear-left is-required">
+        <el-button type="primary" size="mini" @click.stop.prevent="showService">
+          <i class="fa fa-search"></i> 搜索服务目录
+        </el-button>
+        <ul class="ec-list-input">
+          <li v-for="(item, index) in quantityArr">
+            <span>{{ item.name }}</span>
+            <el-input size="mini" v-model="list[item.key]">
+              <template slot="prepend">数量</template>
+              <el-button slot="append" icon="el-icon-close" @click="remove(item.key)"></el-button>
+            </el-input>
+          </li>
+        </ul>
+      </el-form-item>
       <el-form-item label="计划时间：" prop="start_at" class="ec-clear-left is-required">
         <el-date-picker
           size="small"
@@ -72,11 +86,13 @@
         </el-input>
       </el-form-item>
     </el-form>
+    <serviceDialog ref="serviceDialog"></serviceDialog>
   </section>
 </template>
 <script>
 import singleRadio from '../common/singleRadio'
 import depSelect from '../schedule/depSelect'
+import serviceDialog from './serviceDialog.vue'
 import settingMixin from '../common/settingMixin'
 import {
   requestAPI,
@@ -88,16 +104,24 @@ export default {
   mixins: [settingMixin],
 
   props: {
-    model: Object
+    model: Object,
+    quantityArr: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
   },
 
   components: {
     singleRadio,
-    depSelect
+    depSelect,
+    serviceDialog
   },
 
   data () {
     return {
+      list: {},
       options: {
         projectIds: [],
         contactIds: []
@@ -113,6 +137,13 @@ export default {
       this.getProjectIds(val)
       this.getContactIds(val)
     })
+
+    this.$watch('quantityArr', (val) => {
+      val.forEach(item => {
+        this.$set(this.list, item.key, this.list[item.key] || item.value)
+      })
+      this.$emit('update:list', this.list)
+    }, {deep: true})
   },
 
   mounted () {
@@ -122,6 +153,11 @@ export default {
   },
 
   methods: {
+    remove (key) {
+      let _index = this.quantityArr.findIndex(ele => ele.key === key)
+      this.quantityArr.splice(_index, 1)
+    },
+
     getNew () {
       this.initSetting(['getCaseNew'])
     },
@@ -160,6 +196,14 @@ export default {
       }).then(res => {
         this.options.contactIds = res
       })
+    },
+
+    getQuantityTitle (q) {
+      return q
+    },
+
+    showService () {
+      this.$refs.serviceDialog.show()
     }
   }
 }
@@ -168,6 +212,7 @@ export default {
 .ec-create-form .el-form-item {
   width: 70%;
 }
+
 // .ec-create-form .el-form-item {
 //   width: 100%;
 // }

src/components/case/caseModal.vue

@@ -3,7 +3,9 @@
     <sidePopup ref="sidePopup" title="新建工单" :width="50" @update:close="() => btnClose()">
       <CaseForm
         ref="form"
-        :model="model">
+        :model="model"
+        :quantityArr="quantityArr"
+        @update:list="formatList">
       </CaseForm>
       <div class="mt20" style="margin-left: 150px;">
         <el-button type="cancel" @click.stop.prevent="handleClose" size="mini">取 消</el-button>
@@ -29,6 +31,7 @@ export default {
   data () {
     return {
       diaVis: false,
+      quantityArr: [],
       model: {
         id: '',
         client_id: '',
@@ -40,12 +43,19 @@ export default {
         spent_time: '',
         alarm_before: '',
         engineer_id: '',
-        description: ''
+        description: '',
+        quantity: []
       }
     }
   },
 
   methods: {
+    formatList (val) {
+      this.model.quantity = []
+      Object.keys(val).forEach(item => {
+        this.model.quantity[item] = val[item]
+      })
+    },
     show (model) {
       if (model) {
         this.$refs.form.getEdit(model.id)
@@ -69,9 +79,13 @@ export default {
     },
 
     save () {
-      let _params = Object.assign({}, setModule(this.model, 'Cases'))
-      _params['CaseAssignments[engineer_id]'] = _params['Cases[engineer_id]']
-      delete _params['Cases[engineer_id]']
+      debugger
+      let _model = Object.assign({}, this.model)
+      let _params = Object.assign({}, setModule({quantity: this.model.quantity}, 'CaseServices'))
+      delete _model['quantity']
+      let _params1 = Object.assign(_params, setModule(_model, 'Cases'))
+      _params1['CaseAssignments[engineer_id]'] = _params1['Cases[engineer_id]']
+      delete _params1['Cases[engineer_id]']
       let _apiUrl = !this.model.id ? api.saveCaseNew : api.saveCaseEdit
       !this.model.id && delete _params['Cases[id]']
       this.$refs['form']._validate(() => {

src/components/case/searchForm.vue

+<template>
+  <div>
+    <el-row class="form-content">
+      <el-form ref="clientForm" size="mini" :model="clientForm" label-width="0" label-position="top">
+        <el-col :span="4" v-for="(item, key) in filter" :key="key">
+          <el-form-item>
+              <span slot="label" v-if="item.key !== 'Filter[sort]'">
+                <a @click.prevent="timeSort" v-if="item.key === 'Filter[name]'">
+                  {{item.name}}
+                  <i :class="['fa', setSortIcon()]"></i>
+                </a>
+                <span v-else>
+                  {{item.name}}
+                </span>
+              </span>
+            <el-select v-model="clientForm[item.key]" placeholder="全部" clearable v-if="!item.itemKey && item.key !== 'Filter[sort]'">
+              <el-option v-for="(option, optKey) in item.value"
+                         :key="optKey"
+                         :label="option.name"
+                         :value="option.key"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import setParams from '../common/setParams'
+export default {
+  name: 'client-form',
+  mixins: [setParams],
+  data () {
+    return {
+      clientForm: {
+      },
+      props: {
+        label: 'name',
+        value: 'key',
+        children: 'child'
+      }
+    }
+  },
+  props: ['filter'],
+  methods: {
+    setSortIcon () {
+      if (this.clientForm['Filter[sort]'] === '') {
+        return 'fa-sort-amount-desc'
+      } else if (this.clientForm['Filter[sort]'] === 'DESC') {
+        return 'fa-sort-amount-desc'
+      } else {
+        return 'fa-sort-amount-asc'
+      }
+    },
+    timeSort () {
+      if (this.clientForm['Filter[sort]'] === '') {
+        this.clientForm['Filter[sort]'] = 'ASC'
+      } else if (this.clientForm['Filter[sort]'] === 'ASC') {
+        this.clientForm['Filter[sort]'] = 'DESC'
+      } else {
+        this.clientForm['Filter[sort]'] = 'ASC'
+      }
+    },
+    _resetForm () {
+      Object.keys(this.clientForm).forEach(item => {
+        this.clientForm[item] = ''
+      })
+    }
+  },
+  created () {
+  },
+  watch: {
+    'filter' (val) {
+      this.setInitParams((ret) => {
+        val.forEach(item => {
+          this.$set(this.clientForm, item.key, ret[item.key] || '')
+        })
+      })
+    },
+    'clientForm': {
+      handler (val) {
+        this.$emit('update:clientList', val)
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/case/searchHeader.vue

+<template>
+  <el-row :gutter="10" class="header-title">
+    <el-col :span="6">
+      <h2>{{title}}</h2>
+    </el-col>
+    <el-col :span="18" class="header-search">
+      <el-form ref="form" :model="search" size="mini" label-width="0">
+        <div class="pull-right search-for">
+          <el-form-item v-if="searchKey">
+            <el-input size="small" v-model="search['ClientSearch[keyword]']" placeholder="关键词">
+              <el-button slot="append" type="primary" @click.stop.prevent="searchKeyword">搜索</el-button>
+            </el-input>
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import setParams from '../common/setParams'
+export default {
+  name: 'client-header',
+  mixins: [setParams],
+  data () {
+    return {
+      search: {}
+    }
+  },
+  methods: {
+    searchKeyword () {
+      this.$emit('update:headerSearch', this.search)
+    },
+    addNew () {
+      this.$emit('update:headerAdd')
+    },
+    clear () {
+      if (window.localStorage) {
+        window.localStorage.clear()
+        this.$emit('update:headerClear')
+      }
+    },
+
+    _resetParams () {
+      this.$set(this.search, this.searchKey + '[keyword]', '')
+    }
+  },
+  props: ['title', 'searchKey', 'addTitle'],
+
+  created () {
+    this.setInitParams((ret) => {
+      this.$set(this.search, this.searchKey + '[keyword]', ret[this.searchKey + '[keyword]'])
+    })
+  },
+  watch: {
+    'searchKey' (val) {
+      this.$set(this.search, val + '[keyword]', '')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/case/serviceDialog.vue

+<template>
+  <section>
+    <el-dialog class="dialog" title="服务目录" :visible.sync="serviceDialogVisible" :append-to-body="true" width="80%" style="height:80%;">
+      <ServiceHome
+        @update:selected="selected">
+      </ServiceHome>
+    </el-dialog>
+  </section>
+</template>
+<script>
+import ServiceHome from './serviceHome.vue'
+export default {
+
+  components: {
+    ServiceHome
+  },
+
+  data () {
+    return {
+      serviceDialogVisible: false
+    }
+  },
+
+  methods: {
+    show () {
+      this.serviceDialogVisible = true
+    },
+
+    selected (val) {
+      var that = this
+      val.forEach(item => {
+        let ret = that.$parent.quantityArr.find(ele => ele.key === item.id.toString())
+        !ret && that.$parent.quantityArr.push({key: item.id.toString(), value: 1, name: item.title})
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/components/case/serviceHome.vue

+<template>
+  <section>
+    <div>
+      <search-header
+        ref="searchHeader"
+        :title="'服务目录'"
+        :search-key="'ClientSearch'"
+        @update:headerSearch="search => searchKeyword(search)"
+        @update:headerClear="() => searchClear()">
+      </search-header>
+      <search-form
+        ref="clientForm"
+        :filter="filter"
+        @update:clientList="form =>{ updateForm(form) }">
+      </search-form>
+      <NoList v-if="result.list.length === 0"/>
+      <Item :list="result.list"
+        @update:selected="selectedItem">
+      </Item>
+      <Pagenation
+        @update:pager="pager => {updatePage(pager)}"
+        :total="result.pagenation.totalcount">
+      </Pagenation>
+    </div>
+    </CaseModal>
+  </section>
+</template>
+
+<script>
+import SearchHeader from './searchHeader'
+import SearchForm from './SearchForm'
+import Item from './serviceItem'
+import FormModal from '../service/serviceModal'
+// import CaseModal from './caseModal'
+import Pagenation from './servicePagenation'
+import SetParams from '../common/setParams'
+import singleRadioTool from '../common/singleRadioTool'
+import NoList from '../common/noList.vue'
+import {
+  requestAPI,
+  api
+} from '@/lib/commonMixin'
+export default {
+  name: 'accountHome',
+
+  mixins: [SetParams],
+
+  components: {
+    SearchHeader,
+    SearchForm,
+    Item,
+    FormModal,
+    Pagenation,
+    singleRadioTool,
+    NoList
+  },
+
+  data () {
+    return {
+      currKey: 'service',
+      filter: [],
+      form: {
+        'ClientSearch[keyword]': ''
+      },
+      pagenation: {
+        thispage: 1,
+        pagesize: 10
+      },
+      type: 'all',
+      navArray: [],
+      result: {
+        list: [],
+        pagenation: {
+          totalcount: 1,
+          thispage: 1,
+          pagesize: 10
+        },
+        thisUser: {
+          id: '',
+          name: '',
+          sex: ''
+        }
+      }
+    }
+  },
+
+  mounted () {
+    this.init()
+    this.getList({})
+  },
+
+  methods: {
+    init () {
+      this.getFilter()
+    },
+
+    selectedItem (val) {
+      this.$emit('update:selected', val)
+    },
+
+    // 1.查询条件
+    getFilter () {
+      requestAPI(api[`get${this.currKey}Filter`]).then(res => {
+        this.filter = res
+      })
+    },
+
+    // 2.列表数据
+    getList (ret) {
+      requestAPI(api[`get${this.currKey}List`], ret).then((res) => {
+        const {
+          list = [],
+          pagenation = {}
+        } = res
+
+        this.result.list = list
+        this.result.pagenation = pagenation
+      })
+    },
+
+    // 3.1关键字搜索
+    searchKeyword (search) {
+      let ret = this.setParams({
+        ...this.form,
+        page: this.pagenation.thispage
+      }, search)
+      this.getList(ret)
+    },
+
+    // 3.2关键字后面的重置
+    searchClear () {
+      this.$refs.searchHeader._resetParams()
+      this.$refs.clientForm._resetForm()
+
+      // this.clearParams()
+      // this.$refs.timeSearchForm.resetForm()
+      // this._reload()
+    },
+
+    // 4.重新加载
+    _reload () {
+      let ret = this.setParams({
+        ...this.form,
+        page: this.pagenation.thispage
+      }, {})
+      this.getList(ret)
+    },
+
+    // 5.1查询条件
+    updateForm (search) {
+      let ret = this.setParams({
+        ...this.form,
+        page: this.pagenation.thispage
+      }, search)
+      this.getList(ret)
+    },
+
+    // 5.2分页查询
+    updatePage (pager) {
+      let ret = this.setParams({
+        ...this.form,
+        page: this.pagenation.thispage
+      }, {page: pager.thispage})
+      this.getList(ret)
+    },
+
+    // 5.3 TimeSearchForm
+    timeSearchForm (search) {
+      let ret = this.setParams({
+        ...this.form,
+        page: this.pagenation.thispage
+      }, search)
+      this.getList(ret)
+    },
+
+    // 6.1新增
+    addSch () {
+      this.$refs.formModal.show()
+    },
+
+    // 6.2编辑
+    editEvent (item) {
+      this.$refs.formModal.show(item)
+    },
+
+    // 7.操作
+    // 修改密码
+    changePasswordEvent () {},
+    // 删除
+    deleteEvent (id) {
+      let deleteTip = '删除账户'
+      this.$confirm(`${deleteTip}?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        requestAPI(api[`deleteservice`], { id })
+        .then((res) => {
+          this.$message.success(`${deleteTip}成功`)
+          this._reload()
+        })
+      }).catch(() => {
+        this.$message.info(`取消${deleteTip}`)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@include c('opearate-button') {
+  > .el-button {
+    margin-right:0px;
+  }
+  & .btn-primary .badge {
+    color: #333744;
+    background-color: #fff;
+  }
+  & .badge {
+    position: relative;
+    top: 0px;
+    left: -5px;
+    display: inline-block;
+    padding: 0px 5px;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: .25rem;
+    background:white;
+    color:#333744;
+  }
+  i {
+    display: inline-block;
+    padding-right: 3px;
+  }
+}
+</style>

src/components/case/serviceItem.vue

+<template>
+  <section>
+    <el-table :data="list" stripe border @selection-change="handleSelectionChange">
+      <el-table-column
+        type="selection"
+        width="55">
+      </el-table-column>
+      <el-table-column label="服务品牌" width="100">
+        <template slot-scope="scope">
+          <span>{{ scope.row.brand.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="服务类型" width="100">
+        <template slot-scope="scope">
+          <span>{{ scope.row.type.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="服务编号" width="100">
+        <template slot-scope="scope">
+          <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="100">
+        <template slot-scope="scope">
+          <span>{{ scope.row.title }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="服务描述" width="180">
+        <template slot-scope="scope">
+          <ol>
+            <li v-for="item in scope.row.description">
+              <span>{{ item }}</span>
+            </li>
+          </ol>
+        </template>
+      </el-table-column>
+      <el-table-column prop="points" label="工分(工作日工作时间)" width="180">
+      </el-table-column>
+      <el-table-column prop="points_off_time" label="工分(工作日工作外时间)" width="180">
+      </el-table-column>
+      <el-table-column prop="points_holiday" label="工分(节假日)">
+      </el-table-column>
+    </el-table>
+  </section>
+</template>
+<script>
+export default {
+  name: 'serviceItem',
+
+  props: ['list'],
+
+  methods: {
+    editEvent (item) {
+      this.$parent.editEvent(item)
+    },
+
+    deleteEvent (item) {
+      this.$parent.deleteEvent(item.id)
+    },
+
+    handleSelectionChange (val) {
+      this.$emit('update:selected', val)
+    }
+  }
+}
+</script>
+<style scoped>
+</style>

src/components/case/servicePagenation.vue

+<template>
+  <section class="page">
+    <el-pagination v-if="total > 0"
+      background
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pager.thispage"
+      :page-sizes="[10, 20, 40, 60, 80, 100]"
+      :page-size="pager.pagesize"
+      layout="total, prev, pager, next, jumper"
+      :total="total">
+    </el-pagination>
+  </section>
+</template>
+<script>
+export default {
+
+  props: {
+    total: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data () {
+    return {
+      pager: {
+        thispage: 1,
+        pagesize: 20,
+        totalcount: 0
+      }
+    }
+  },
+
+  created () {
+    // this.$emit('update:pager', this.pager)
+  },
+
+  methods: {
+    handleSizeChange (val) {
+      this.pager.thispage = 1
+      this.pager.pagesize = val
+      this.pager.totalcount = this.total
+      this.$emit('update:pager', this.pager)
+    },
+    handleCurrentChange (val) {
+      this.pager.thispage = val
+      this.pager.totalcount = this.total
+      this.$emit('update:pager', this.pager)
+    }
+  }
+}
+</script>
+<style scoped>
+.page {
+  text-align: right;
+}
+</style>