web-admin/src/views/system/service/index.vue

<template>
  <div id="goods">
    <el-col :span="24" class="one"> <span>客服</span> </el-col>
    <template v-if="view === 'list'">
      <data-table ref="dataTable" :fields="fields" :opera="opera" :data="list" :total="total" :limit="limit" @query="search" @edit="toEdit"></data-table>
    </template>
    <template v-else>
      <el-row>
        <el-col :span="24">
          <el-button icon="el-icon-back" size="mini" @click="toBack()">返回</el-button>
        </el-col>
        <el-col :span="24">
          <data-form :fields="infoFields" :rules="rules" v-model="form" labelWidth="150px" @save="toSave"> </data-form>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
const _ = require('lodash');
import methodsUtil from '@/util/opera';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('serviceContact');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function () {
    return {
      view: 'list',
      fields: [
        { label: '联系电话', model: 'phone' },
        { label: '微信', model: 'wx' },
        { label: 'QQ', model: 'qq' },
        { label: '邮箱', model: 'email' },
      ],
      opera: [{ label: '修改', method: 'edit' }],
      list: [],
      total: 0,
      limit: 10,
      // info部分
      infoFields: [
        { label: '联系电话', model: 'phone' },
        { label: '微信', model: 'wx' },
        { label: 'QQ', model: 'qq' },
        { label: '邮箱', model: 'email' },
      ],
      rules: {},
      form: {},
    };
  },
  created() {
    this.searchOthers();
    this.search();
  },
  methods: {
    ...mapActions(['query', 'delete', 'fetch', 'update', 'create']),
    ...methodsUtil,
    async search({ skip = 0, limit = this.limit, ...info } = {}) {
      const res = await this.query({ skip, limit, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    async searchOthers() {},
  },
};
</script>

<style lang="less" scoped>
.one {
    margin: 0 0 10px 0;

    span:nth-child(1) {
      font-size: 20px;
      font-weight: 700;
      margin-right: 10px;
    }
  }
</style>