sishitongtang-crm/src/views/business/business.vue

<!--业务板块-->
<template>
  <div>
    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="业务板块">
      <div slot="content"></div>
      <slot>
        <Button type="primary" @click="$refs['addBusiness'].type = 'add',$refs['addBusiness'].isShow = true">新增</Button>
      </slot>
    </lx-header>

    <xy-table
      :defaultExpandAll="false"
      :total="total"
      :table-item="table"
      :list="list"
      @editor="editor"
      @delete="destroy"
      @pageIndexChange="e => {select.page = e;getTypes()}"
      @pageSizeChange="e => select.page_size = e"></xy-table>

    <add-business ref="addBusiness" @refresh="getTypes"></add-business>
  </div>
</template>

<script>
import {getList,destroy} from '@/api/productType'
import {parseTime} from '@/utils'

import addBusiness from "@/views/business/component/addBusiness";
export default {
  components:{
    addBusiness
  },
  data() {
    return {
      select:{
        page_size:10,
        page:1
      },

      total:0,
      list:[],
      table:[
        {
          type:'expand',
          expandFn:(props)=>{
            return (
              <el-form label-width="120px" label-position="right" className="demo-table-expand">
                <el-form-item label="名称">
                  <span>{props?.row.name}</span>
                </el-form-item>
                <el-form-item label="服务购买方">
                  <span>{props?.row.buy_name}</span>
                </el-form-item>
                <el-form-item label="服务流程">
                  <span>{props?.row.flow}</span>
                </el-form-item>
              </el-form>
            )
          }
        },
        {
          prop:'name',
          label:'名称',
          align:'left',
          minWidth:220
        },
        {
          prop:'cycle',
          label:'结算周期',
          width: 200,
          formatter:(cell,data,value)=>{
            switch (value){
              case 1:
                return '月度结算'
                break;
              case 2:
                return '季度结算'
                break;
              case 3:
                return '年度结算'
                break;
              default:
                return value
            }
          }
        },
        {
          prop:'sortnumber',
          label:'排序',
          width: 100
        },
        {
          prop:'created_at',
          label:'创建信息',
          width: 200,
          formatter:(v1,v2,value)=>{
            return parseTime(new Date(value),'{y}-{m}-{d}')
          }
        }
      ],


    }
  },
  methods: {
    async getTypes() {
      const res = await getList(this.select)
      this.total = res.total
      this.list = res.data

      console.log(this.list)
    },

    editor(row){
      this.$refs['addBusiness'].type = 'editor'
      this.$refs['addBusiness'].id = row.id
      this.$refs['addBusiness'].isShow = true
    },
    destroy(row){
      destroy(row.id).then(res => {
        this.$message({
          type:"success",
          message:'删除业务类别成功'
        })

        this.getTypes()
      })
    }
  },
  mounted() {
    this.getTypes()
  }
}
</script>


<style lang="scss" scoped>
@import "../../styles/index";

.switch {
  display: flex;

  &-item {
    flex: 1;
    text-align: center;
    letter-spacing: 2px;
    color: rgb(100, 100, 100);
    background: #fff;
    border: 1px solid rgb(210, 210, 210);

    padding: 8px 0;

    &-active {
      border: none;
      overflow: hidden;
      animation: btn-click 800ms forwards ease-out;

      position: relative;

      &::after {
        content: '';
        width: 300px;
        height: 300px;
        border-radius: 100%;
        background: rgba(180, 180, 180, 0.4);
        animation: ripple 800ms forwards;
        transform: translateX(-50%);

        position: absolute;
        top: -300px;
        left: 50%;
      }
    }

    @keyframes ripple {
      from {
        opacity: 1;
      }
      to {
        visibility: hidden;
        opacity: 0;
        top: 100px;
      }
    }
    @keyframes btn-click {
      from {

      }
      to {
        color: #fff;
        background: $primaryColor;

      }
    }
  }

  & > div:nth-child(-n+2) {
    border-right: none;
  }
}
</style>